快应用开发心得

本期作者：任婧宇

一

 介绍

1、关于快应用

快应用采用前端技术栈，是native渲染，可以调起丰富的系统api，性能体验还不错。

2. 快应用入口

（1）应用商店

（2）桌面图标

（3）全局搜索

（4）浏览器搜索

（5）网页跳转

（6）负一屏

（7）智能推送

（8）智慧识屏

（9）场景化入口（短信按钮、应用卸载替换、二维码、传送门）

各个不同品牌手机，入口各不相同，具体在论坛搜索『快应用入口合集』，帖子内有详细介绍。

3. 快应用优点

（1）轻松调起更多系统api

（2）各厂商的流量扶持

（3）native渲染，deeplink入口，原生桌面入口，push能力

二

 工具

本次开发使用了官方提供构建工具hap-toolkit

1.  环境

（1）需安装6.0以上版本的NodeJS

（2）安装hap-toolkit

2.  手机调试工具

（1）在调试手机上，需要安装快应用调试器和平台预览版。我通过电脑上下载调试器的apk，通过USB方式发送到手机，在手机上直接点击安装。

下面是一个开发过程中，发现容易被忽略的很好用的功能：

    a.打开调试器，点击右上角三个点，选择“设置”

    b.点击“应用更新策略”，根据自己需求选择相应策略

    c.若是调试一个新写的页面，选择“仅刷新页面”即可，默认选中“重启应用”

    d.若当前调试的页面路由层级较深，且当前调试的功能不需要重启应用的话，建议选择为“仅刷新页面”，会方便很多

（2）在手机调试器上首次点击右下角“开始调试”，手机会提醒下载“快应用调试器内核”，这里，不同品牌不同型号的手机，下载的调试器内核是不同的，建议点击右上角里的平台下载，下载相对应的调试器预览版。

3.  编辑器

因为快应用支持的css样式局限，在开发过程中，使用我们普通的编辑器，不容易看到错误提示。这里推荐官方IDE，同步支持快应用最新版本语法标准，自动完成、提示和补全，以及全面准确的代码校验。还可以直接创建签名,一键生成发布联盟标准rpk包。新增的插件市场也还不错。开发者也可以根据个人需求选择相应编辑器。

三

 项目文件

1.  目录结构

安装toolkit工具后，可通过全局hap命令创建一个项目模板，如下所示:

hap init <ProjectName>

命令执行后，会在当前目录下创建<ProjectName>文件夹，作为项目根目录

项目根目录主要结构如下：

目录的简要说明如下：

src：项目源文件夹

sign：签名模块（当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名）

2.  配置文件配置

manifest.json为快应用项目配置文件，根据一个示例（官方示例）简单介绍下相关配置

{	
"package": "com.company.unit",                        应用包名	
"name": "appName",                                 应用名称	
"icon": "/Common/icon.png",                           应用图标	
"versionName": "1.0",                                应用版本名称	
"versionCode": 1,                                   应用版本号	
"minPlatformVersion": 1000,                           支持的最小平台版本号	
"features": [{ "name": "system.network" }],            接口列表	
"permissions": [{ "origin": "*" }],	
"config": {                                          统配置信息	
"logLevel": "off"	
},	
"router": {                                          路由信息	
"entry": "Hello",	
"pages": {	
"Hello": {	
"component": "hello",	
"path": "/",	
"filter": {	
view": {	
"uri": "https?://.*"	
}	
}	
}	
}	
},	
"display": {                                           UI 显示相关配置	
"backgroundColor": "#ffffff",	
"fullScreen": false,	
"titleBar": true,	
"titleBarBackgroundColor": "#000000",	
"titleBarTextColor": "#fffff",	
"pages": {	
"Hello": {	
"backgroundColor": "#eeeeee",	
"fullScreen": true,	
"titleBarBackgroundColor": "#0000ff",	
"titleBarText": "Hello"	
}	
}	
}	
}

四

 调试

1.WIFI 调试

如果手机与 PC 在同一局域网，可以使用 WIFI 调试，步骤如下：

（1）在项目根目录下执行如下命令，启动 HTTP 调试服务器

     npm run server

服务启动成功后，命令行终端和调试服务器主页可以看到提供扫描的二维码

（2）手机快应用调试器中关闭开启USB调试

手机快应用调试器点击扫码安装按钮，扫码安装待调试的 rpk 文件

手机快应用调试器中点击开始调试按钮，开始调试

2.USB 调试

USB 调试模式不需要手机与 PC 在同一局域网，需要在调试过程中手机通过 USB 连接 PC，步骤如下：

（1）在项目根目录下执行如下命令，启动 HTTP 调试服务器：

     npm runserver

（2）手机开启设置 --> 开发者选项--> USB调试

（3）手机快应用调试器选中开启USB调试，手机USB 连接到 PC

（4）手机快应用调试器中点击在线更新按钮，安装待调试的 rpk 文件

（5）手机快应用调试器中点击开始调试按钮，开始调试

3.实时预览更新效果

需要同时打开两个终端，一个执行npm run watch，另一个启动服务npm run server，默认端口为12306

也可以自定义端口，例如：npm run server -- --port 8080

五

开发

现在可以开始愉快的踩坑之路了~

1.template篇

（1）标签使用受限，其中，div等标签中不能直接输入文本，文本必须写在span或text标签中

（2）如果组件的props使用驼峰定义，那么在传递数据时要使用-连接。eg：testProp，使用时，要写成test-prop，否则无法传值

（3）tabs组件不允许嵌套使用，若需两级tab，需自己编写

（4）list组件中，list-item组件需要设置type属性，需要注意的是，如果是不同的item，要设置不同的type属性，否则会出现DOM结构错乱

    官方文档中也提到了要慎用if指令

2.style篇

（1）快应用的单位是px，该单位已实现各种屏幕自适应，比如默认设计稿宽度750px，则此时样式1px=设计稿1px

（2）最不方便之处，就是css样式支持的太有限，下面列出较常用典型的几点，更多可自行查阅官方文档：

a.由于快应用默认为flex布局，而flex的默认值方向为水平，所以，div套div布局，其中的子元素都是水平排列的，如需垂直排列，须自行另外设置

       eg：除了颜色没写任何样式，结构和显示效果请看图

b.颜色：如果要写16进制色值的话，遇到可简写的色值需要写成完整的6位，不建议3位简写，比如要写成： #999999;不能写成：#999

c.单边框:光写border-top的简写不起作用，但是可以分开写:border-style、border-top-color、border-top-width

d.position仅支持none|fixed两个值，且父容器为<list>、<swiper>时不生效

e.display仅支持flex|none两个值

3.script篇

（1）数据请求方法，成功时返回的不是json对象，需要用JSON.parse转换一下，否则取不出值

（2）input输入框使用时，不能直接取value，需要通过event.text获取

（3）this.key= value / this.$set(‘key’, value)区别

eg：在初始的data中，只设置了info为空对象，点击按钮时，设置info.aa

如下图两种写法：

a.直接写this.info.aa，页面上没有变化，仍然是undefined

b.写成this.$set(‘info.aa’，‘aaa’)，页面上显示出了aaa

其实也就是vue官方文档的那句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。所以需要使用$set方法去添加属性

（4）picker组件，改变选项值做操作的话，需要重新更新数组才能触发视图更新，例如：使用concat方法

（5）写个选中状态功能，数据层级太深的话，不起作用

（6）全局方法，写在app.ux中，其他地方调用时，用this.$app.方法名 就可以了

（7）比如我们需要实现一些dom操作，可以使用this.$element(id名称)方法，注意仅可以通过id获取DOM，且获取到的元素，跟我们传统的DOM不一样。例如，想要动态加样式，不能通过这种方式

（8）调用父组件的某个方法，可通过this.$parent().方法名 调用

（9）页面之间传递参数，用官方给的方法就挺好用

（10）通常CMD引入模块（import）时，多处引用，模块只初始化一次，快应用中会多次初始化，导致多处引用同一个模块但指针指向不同对象

六

打包及发布

1.编译工具

（1）编译打包工程

        在工程的根目录下运行

        npm runbuild

        编译后的工程目录在/build

        生成的应用路径为/dist/.rpk

（2）增加 release 签名

通过 openssl 命令等工具生成签名文件private.pem、certificate.pem，例如：

opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem

在工程的 sign 目录下创建 release 目录，将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去

（3）发布程序包

发布程序包前需要增加release签名，然后在工程的根目录下运行

  npm runrelease

生成的应用路径为/dist/.release.rpk

如果需要临时使用 debug 签名，可以使用

  npm runrelease -- --debug

2.IDE发布

（1）生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息

（2）生成发布用 RPK。点击【发布 rpk包】按钮, 生成成功的话会弹出对应的文件夹