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

快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 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

用一台 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 即可;
  • ✔️ 集成 Prettier & Eslint;在检测代码中潜在问题的同时,统一团队代码规范、风格(jslessscss等),从而促使写出高质量代码,以提升工作效率(尤其针对团队开发)。
  • 编写 prettier-plugin-quickapp 插件;为快应用编写 prettier 插件,使其可以针对 .ux/.mix 文件也能很好地工作,从而进一步完善代码风格及规范。
  • … …

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

如何使用 Go 语言写游戏服务器?

之前先后用Erlang,nodejs做过tcp,http的游戏服务器。接触了golang一两个月(纯新手),想在最近的tcp网游项目中使用,但又担心以下问题: ...

1.2K5
来自专栏京东技术

JDFlutter | 京东技术中台新一代跨平台开发框架

JDFlutter 是商城共享技术部-多端融合技术部推出的新一代跨平台开发框架,可快速集成至现有 Android/iOS 工程,开发者可借助 JDFlutter...

1.9K4
来自专栏北京马哥教育

如何阅读技术文档

“大神你好,请问我打算学习Django,应该怎么做?” 答:“去看文档” “Django的文档都是英文,我看不下去,怎么办” 答:“bla bla bla…...

3298
来自专栏Golang语言社区

如何使用 Go 语言写游戏服务器?

之前先后用Erlang,nodejs做过tcp,http的游戏服务器。接触了golang一两个月(纯新手),想在最近的tcp网游项目中使用,但又担心以下问题: ...

5666
来自专栏携程技术中心

干货 | 携程实时用户行为系统实践

作者简介 陈清渠,毕业于武汉大学,多年软件及互联网行业开发经验。14年加入携程,先后负责了订单查询服务重构,实时用户行为服务搭建等项目的架构和研发工作,目前负责...

3616
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|EP(测试分析+分层自动化测试)实践

答:Hook英文翻译过来就是「钩子」的意思,那我们在什么时候使用这个「钩子」呢?在 Android 操作系统中系统维护着自己的一套事件分发机制。应用程序,包括应...

2302
来自专栏全华班

一个专注于微信公众号开发的开源框架

以上文章属于此公众号原创所有,如需转载请注明出处。其中图片引用第三方。更多内容请扫描下方二维码关注。

4.1K4
来自专栏开源项目

优质推荐 | 看 3 月新增1k+ Star 及 GVP 项目如何将你俘获

1532
来自专栏Golang语言社区

如何使用 Go 语言写游戏服务器?

之前先后用Erlang,nodejs做过tcp,http的游戏服务器。接触了golang一两个月(纯新手),想在最近的tcp网游项目中使用,但又担心以下问题: ...

7844
来自专栏PPV课数据科学社区

【数据可视化专题】数据可视化:前端数据之美如何展示?

随着 web 技术的蓬勃发展,前端的展示、交互越来越复杂,在用户的访问、操作过程中产生了大量的数据。由此,前端的数据分析也变得尤为重要。当然,对于站长来说,你可...

58710

扫码关注云+社区

领取腾讯云代金券