QUICKAPP March 22, 2018

快应用快速入门

Words count 4k Reading time 4 mins. Read count 0

QuickApp

作为一个前端工程师,毕竟要顺流技术的发展。

3月20日,小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加,共十家手机厂商在北京联合召开快应用标准启动发布会,手机厂商与中国信息通信研究院、电信终端产业协会、中国软件行业协会及数百家知名移动互联网应用企业共襄盛举,共同见证移动应用新生态的到来。

既然是国内厂商发布的,所以只针对安卓用户。

怎么感觉都是在对微信小程序一家独大的应对。

废话少说开撸吧。

快应用开发者文档 https://doc.quickapp.cn/ 看了这个就是表示入门了

快应用开发者论坛 http://bbs.quickapp.cn/

搭建环境

安装nodejs

需安装6.0以上版本的nodejs,请从NodeJS官网下载,推荐v6.11.3 LTS

*注意: 不要使用8.0.版本.这个版本内部ZipStream实现与node-archive包不兼容,会引起报错

安装hap-toolkit (快应用命令)

npm install - g hap-toolkit

在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功,如下命令所示:

hap -V

目前版本是0.0.26

创建新的项目

hap init <ProjectName>

成功后即显示项目目录结构

├── node_modules              npm 包
├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src                       项目资源文件夹
│   ├── Common                公用的资源文件和组件文件
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件,文件名不必与父文件夹相同
│   ├── app.ux                APP文件(用于包括公用资源)
│   └── manifest.json         项目配置文件(如:应用描述、接口申明、页面路由等)
└── package.json              定义项目需要的各种模块及配置信息,npm install根据这个配置文件,自动下载所需的运行和开发环境

编译项目

1.在项目根目录下,运行如下命令安装依赖包(webpack,babel等)

npm install
  1. 在项目的根目录下,运行如下命令进行编译打包,生成rpk包
    npm run build
    

编译打包成功后,项目根目录下会生成文件夹:build、dist

  • build:临时产出,包含编译后的页面js,图片等
  • dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出

3.自动重新编译

npm run watch

注意:npm run watch后还需要另外运行npm run server来运行server才能实现热更新

**注意**:

如果报错遇到Cannot find module ‘…/webpack.config.js’,请重新执行一次hap update –force。这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报错。而hap update –force会重新复制hap-toolkit文件夹到node_modules中

调试

需要安装两个APP应用程序(必须!需要在真机上调试预览)

快应用调试器
平台预览版

二维码预览

在终端输入,启动本地服务器

npm run server

自定义端口(如:8080)

npm run server -- --port 8080

在调试器APP选择扫描二维码;

如果提示安装失败,建议重新起一遍npm run server 重新来过。

本地安装

选择dist目录下的.rpk文件传输到手机 在调试器中选择手动安装找到你的.rpk即可安装
出现了这个,代表你安装成功,这就是Demo效果
qck

应用上传流程 http://bbs.quickapp.cn/posts/detail?id=249

账号注册流程 http://bbs.quickapp.cn/posts/detail?id=248

0%