快应用开发系列(一)

一、前期环境安装准备:
1、安装nodejs

https://nodejs.org/en/

2、安装hap-toolkit

npm install -g hap-toolkit

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

hap -V

升级

hap update
hap update --force 强制升级

3、手机安装快应用调试器(下载了直接安装)

https://statres.quickapp.cn/quickapp/quickapp/201803/file/quickapp_debugger.apk

手机上安装后打开,如果支持,忽略后面的这句话。如果不支持,先升级手机的系统到最新版本,如果还是不行,再安装下面这个apk,提供预览环境

https://statres.quickapp.cn/quickapp/quickapp/201803/file/quickapp_platform_preview_release.apk

成功后会出现:
快应用开发系列(一)_第1张图片
二、开始准备项目
1、创建项目

hap init demo(项目名称自定义)

会自动生成一个demo项目,目录结构如下:
快应用开发系列(一)_第2张图片

src:存放项目的源文件夹
sign:签名模块,当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名

2、安装依赖

npm install

三、开发运行调试
1、选择一款自己喜欢熟悉的编辑器
2、进入项目根目录,使用node命令来开启服务

npm run server  or  npm run server -- --port XXX(后者指定端口号)

启动成功后,pc端浏览器会输出一个二维码(PC机的服务器地址),或者根据cmd面板提示的地址手动输入来查看
3、扫描浏览器上的二维码

手机上启动快应用调试器,点击扫码安装:扫描浏览器上输出的二维码

4、开始调试

扫描二维码后,点击手机apk上的开始调试按钮,谷歌浏览器会尝试自动打开devtools调试页面

5、手机端预览

手动编译 + 手动刷新
npm run build
运行如下命令,完成编译,然后在手机快应用调试器中点击在线更新,即可查看当前代码运行效果
手动编译 + 自动刷新
npm run build && npm run notify
运行如下命令,一步完成编译和手机端自动刷新
自动编译 + 自动刷新
npm run watch
运行如下命令,启动文件监视器,每次修改工程文件时,会自动编译并在手机端刷新

有三种方式,如果是前期开发,建议选择第三种,修改保存后,手机端和浏览器端会同步刷新展示效果。

6、错误日志

当代码运行时发生异常,界面会弹出一个对话框,点击查看错误, 可以显示出错误发生的堆栈,供开发者分析。
devtools调试界面的console面板也有日志打印信息展示。(和RN一样)

四、打包发布
1、在工程的根目录下运行

npm run build

编译后的工程目录在/build,生成的应用路径为/dist/*.rpk

2、增加release签名
通过openssl命令等工具生成签名文件private.pem、certificate.pem,例如:

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

在工程的sign目录下创建release目录,将私钥文件private.pem和证书文件certificate.pem拷贝进去
3、发布
发布程序包前需要增加release签名,然后在工程的根目录下运行

npm run release

生成的应用路径为/dist/.signed.rpk
如果需要临时使用debug签名,可以使用

npm run release -- --debug

注意: debug签名由于是公开的,安全性无法保证,一定不要使用debug签名签发正式上线的应用

你可能感兴趣的:(web前端开发,js,web前端,前端开发)