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

本文作者:nicejade

本篇文章,旨在探索如何更为优雅的开发快应用,为广大快应用开发者提供便利和参考,尽可能提升开发效率、优化开发体验,使得可以在更短时间内,塑造出更为优质的快应用。

目标与哲学

快应用是一种新型的应用形态,由国内手机厂商基于硬件平台共同推出;秒开即点即用,更易于应用的传播和留存,可以为用户提供更高效的服务。在可预见的未来,其将有不错的应用场景和发展空间。

此quickapp-boilerplate-template仓库的建立,旨在探索如何更为优雅的开发快应用,为广大快应用开发者提供便利和参考,尽可能提升开发效率、优化开发体验,使得可以在更短时间内,塑造出更为优质的快应用。关于快应用开发更详细资料,可参见快应用官网。

线上地址:https://github.com/nicejade/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复制代码

 

改进优势

有必要谈及的是,此项目秉承在高效开发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。在检测代码中潜在问题的同时,统一团队代码规范、风格(js,less,scss等),从而促使写出高质量代码,以提升工作效率(尤其针对团队开发)。

  • 编写prettier-plugin-quickapp插件。为快应用编写prettier插件,使其可以针对 .ux/.mix 文件也能很好地工作,从而进一步完善代码风格及规范。

往期技术分享

  • 网页与快应用之间构造可靠通信通道

  • 一个前端攻城狮的快应用开发之路

  • 快应用的用法和常见问题解答

  • 快应用开发漫谈-部署与调试

  • 快应用开发新手入门指南

  • 快应用list组件的那些事儿

  • 快应用底部导航栏的原生实现

  • 全网最细致的快应用问题解决之道

  • 快速入门快应用——quickapp构建与发布

  • 快应用开发过程中遇到的问题及解决方法

【快应用生态平台】——关注我们获得更多优质内容

快应用脚手架,为优雅而生_第1张图片

 

你可能感兴趣的:(快应用技术分享,快应用)