快应用脚手架，为优雅而生

快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验，无需安装、即点即用；覆盖 10 亿设备，与操作系统深度集成，探索新型应用场景。快应用 ── 复杂生活的简单答案，让生活更顺畅。

快应用脚手架模板

目标与哲学

快应用是一种新型的应用形态，由国内九大手机厂商基于硬件平台共同推出；秒开即点即用，更易于应用的传播和留存，可以为用户提供更高效的服务。在可预见的未来，其将有不错的应用场景和发展空间。此 quickapp-boilerplate-template 仓库的建立，旨在探索如何更为优雅的开发快应用，为广大快应用开发者提供便利和参考，尽可能提升开发效率、优化开发体验，使得可以在更短时间内，塑造出更为优质的快应用。关于快应用开发更详细资料，可参见快应用教程资源列表。

组织结构

├── sign                # 存储 rpk 包签名模块;
│   ├── debug           # 调试环境证书/私钥文件
│   └── release         # 正式环境证书/私钥文件
└── src
│   ├── assets          # 公用的资源(images/styles/字体...)
│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源
│   │   ├──js           # 存储公共 javaScript 代码资源
│   │   └──styles       # 存放 less/css/sass 等公共样式资源
│   ├── helper          # 项目自定义辅助各类工具
│   │   ├──apis         # 存储与后台请求接口相关(已封装好)
│   │   ├──ajax.js      # 对系统提供的 fetch api 进行链式封装
│   │   └──utils        # 存放项目所封装的工具类方法
│   ├── pages           # 统一存放项目页面级代码
│   ├── app.ux          # 应用程序代码的人口文件
│   └── manifest.json   # 配置快应用基本信息
└── package.json        # 定义项目需要的各种模块及配置信息

如何使用

git clone https://github.com/nicejade/quickapp-boilerplate-template.git
cd quickapp-boilerplate-template && yarn
yarn start # 推荐 ✅✅
# 或者运行以下命令
yarn server & yarn watch
# 或者在终端一 Tab 下运行：
yarn server
# 在终端另一 Tab 下运行：
yarn watch
# ✨ 新增「快应用」页面
yarn gen YourPageName

用一台 Android 手机，下载安装「快应用」调试器，打开后操作扫码安装，扫描如上命令生成的二维码，即可看到效果；更多讯息，请参见快应用环境搭建。

改进优势

有必要谈及的是，此项目秉承在高效开发 Web 单页应用解决方案中所传递的理念：为高效开发而设计；相比于其内置简陋而凌乱的 Demo，这份脚手架做了以下诸多改进：

对项目结构进行优化；如上组织结构所示，将各资源模块，更专业的分门别类，使之可以便捷的去编写、维护、查找，同时也是基于前端开发既定共识去设计，更容易为初接触者所理解 & 上手；
更优雅的处理数据请求；采用 Promise 对系统内置请求 `@system.fetch` 进行封装，并抛出至全局，使得可以极简的进行链式调用，同时便捷地处理返回数据；
内置了样式处理方案；「快应用」支持 less, sass 的预编译；这里采取 less 方案，并内置了部分变量，以及常用混合方法，使得可以轻松开启样式编写、复用、修改等；
封装了常用方法；在 helper/utils 路径下，有对日期、字符串、系统等常用方法，分别进行封装，统一暴露给 global.$utils，使得维护方式更加合理且健壮，同时又可以便捷的使用，高效开发；当然，你也可以根据需要自行增删、抑或扩展；
简化开始开发流程；注入 Concurrently 插件，使可以运行 yarn start 即可开始开发，而无需更多命令，从而简洁开发流程；
优化本地开发端口设定；「快应用」默认端口为 12306，虽说可自定义端口，但使用体验却不够友好；此处参考 creat-react-app 设定，对本地开发地址端口使用进行优化：如果 🈯️ 定端口(默认: 8080)被占用，则向上递增寻找新的可用端口(如：8081 / 8082 / … )；
浏览器打开调试主页二维码；运行 yarn start，会启动 HTTP 调试服务器，并将该地址在命令行终端显示，手机端用快应用调试器扫码，即可下载并运行 rpk 包；当终端积累的信息流多了，就造成扫码不便；故增设在浏览器打开调试主页二维码；如想不使用此功能，在 command/server.js 文件中，将 autoOpenBrowser 设置为 false 即可；
集成轻粒子统计分析；轻粒子作为官方推荐统计方案，此脚手架已做接入；使用时只需修改 statistics.config.js 中的 app_key，为在轻粒子所申请的快应用 KEY 即可；
新增快捷命令脚本；使得可以一键生成新页面，只需运行：yarn gen YourPageName （命名推荐统一为大驼峰，将会在 pages 路径下新建该页面文件夹）命令即可，当然，也可以根据需要，自行定定制模板：/command/gen/template.ux；
集成 Prettier & Eslint；在检测代码中潜在问题的同时，统一团队代码规范、风格（js，less，scss等），从而促使写出高质量代码，以提升工作效率(尤其针对团队开发)。
编写 prettier-plugin-quickapp 插件；为快应用编写 prettier 插件，使其可以针对 .ux/.mix 文件也能很好地工作，从而进一步完善代码风格及规范。
… …

快应用脚手架内置命令

命令	描述	备注
`yarn start`	开启服务(server)和监听(watch)	附魔多步优化，一键开启开发，强烈推荐 ✔️
`yarn server`	开启服务(server)	如不嫌麻烦，可使用，不推荐
`yarn watch`	开启监听(watch)	如不嫌麻烦，可使用，不推荐
`yarn build`	编译打包，生成 `rpk`包	对内置 `hap build` 命令的转接
`yarn release`	生成 `rpk`包并增加签名	对内置 `hap release` 命令的转接
`yarn gen`	新增「快应用」页面	助你高效生成页面，模版可自定义，推荐 ✓
`yarn prettier`	一键美化代码(js/css/less/ux)	实在是团队开发好帮手，推荐 ✓
`yarn prettier-watch`	对变化代码文件格式、实时美化	极大提升代码编写效率，强烈推荐 ✔️

微信公众号	前端微信群	推荐 Web 应用
😉 静晴轩	✨ 大前端联盟	🎉 倾城之链

It's only too late if you decide it is. Get busy living. or get busy dying!

快应用脚手架，为优雅而生

目标与哲学

组织结构

如何使用

改进优势

快应用脚手架内置命令

相关链接

您可能会感兴趣的文章

文档信息