【征文】快应用项目总结

curry

官方介绍：

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

快应用官方文档https://doc.quickapp.cn/

快应用从大的方面可以理解为手机厂商的小程序，它的语法和微信小程序也有类似的地方，但是两者之间还是有很多差别的，各有优劣，下面是快应用和微信小程序的简单对比：

技术栈	渲染方式	系统能力	开发体验	社区生态	推广入口	上线审核
小程序	webview渲染	弱	好	活跃	少	相对简单
快应用	原生渲染	强	稍差	不活跃	多	相对繁琐

大致对比下，小程序的开发体验好，社区活跃，有很多经验积累，示例分享，上线速度也较快，但是系统能力支持不足，且推广入口比较单一，自然入口只有小程序搜索页；快应用基于原生渲染，系统能力支持好，虽然只支持国内安卓厂商，但是这部分也占了很大的份额，快应用推广入口多，包括系统搜索，应用商店露出，负一屏露出等（快应用入口介绍（https://bbs.quickapp.cn/forum.ph ... tid=552&fromuid=139）），但是开发体验不好，具体见下文开发方面的总结，社区不活跃，才处于起步阶段，各种经验积累不足，且上线要经过快应用官方以及各厂商的审核，针对每个厂商要单独提包，效率不高。

项目结构:

开发之前，需要搭建好开发环境，具体看文档，按照文档的步骤执行即可；可以选择快应用官方提供的IDE；也可以直接用命令行搭配自己熟悉的IDE进行开发。开发时同时执行 npm run server 和 npm run watch 可实现热更新

调试方法有两种：

• 手机与 PC 在同一局域网，可以使用 WIFI 调试，服务启动成功后，命令行终端和调试服务器主页可以看到提供扫描的二维码

• 手机快应用调试器中关闭USB调试
• 手机快应用调试器点击扫码安装按钮，扫码安装待调试的 rpk 文件
• 手机快应用调试器中点击开始调试按钮，开始调试

• USB 调试，不需要手机与 PC 在同一局域网，需要手机通过 USB 连接 PC

• 手机开启设置 --> 开发者选项 --> USB调试
• 手机快应用调试器选中开启USB调试，手机 USB 连接到 PC
• 手机快应用调试器中点击在线更新按钮，安装待调试的 rpk 文件
• 手机快应用调试器中点击开始调试按钮，开始调试

项目配置 manifest.json:

这里可以配置应用包名，应用名称，应用图标，版本号（整数，从1开始，每次更新都需要自增1）；

接口列表，项目中需要使用的系统能力都需要在这里配置，如下：

页面路由，路由如下，每个页面对应一个路由，其中entry表示首页，即默认打开的页面：

其他具体配置规则见官方文档配置信息(https://doc.quickapp.cn/tutorial ... -configuration.html)。

开发

按照文档搭建完环境后，通过hap-toolkit生成快应用脚手架，跟据当前项目信息配置好manifest.json文件，连接电脑开启调试，就可以进入正常业务开发了。

通用基础：

• 使用系统提供的storage@system.storage模拟cookie；
• 基于系统网络请求api@system.fetch封装请求方法，包括将cookie塞入请求头；判断返回结果，合理抛错；设定超时处理等

页面开发：

在项目src目录下新建页面目录，注意首字母大写，以推荐页Recommend为例，

然后配置路由，如果Recommend是首页，entry也要指定为Recommend：

index.ux也是类似vue的单文件页，包括template，script，style三个部分，且style支持less和sass；样式布局采用 CSS Flexbox（弹性盒）样式，为了解决屏幕适配问题，所有与大小相关的样式（例如 width、font-size）均以基准宽度（默认 750px）为基础，根据实际屏幕宽度进行缩放，例如 width:100px，在 1500px 宽度屏幕上，width 实际上为 200px；

如果需要引入组件，需要使用import，如：

使用时直接通过name定义的字段就可以，。

开发中的坑:

由于对快应用不熟悉，以及快应用和传统前端开发有些区别，开发中难免遇到一些问题，这里记录开发中可能会碰到的问题（开发中如果打开了调试或者用官方IDE开发，如果报错了，都会有相应的错误提示）：

样式问题包括：

• text-algin不支持
• vertical-align不支持
• font-family不支持
• #fff 转换为 #ffffff
• 颜色值 red 转换为 #FF0000
• background不能单独使用
• background-image 不支持网络路径
• box-sizing不支持
• 属性position 的值 absolute 无效 (有效枚举值为: none|fixed)
• overflow不支持
• box-sizing不支持
• box-shadow不支持
• 样式属性不能继承
• 要实现z-index的图层效果需使用stack

很多样式都不支持，除了flex布局，只支持部分简单的通用样式，具体见快应用通用样式表(https://doc.quickapp.cn/widgets/common-styles.html)

组件问题：

• 不能使用自闭合标签
• 表单组件，改变value值也会触发change事件，无法判断change是人为触发，还是改变数据触发的
• list 组件导致无故闪退，可能是以下原因：

  • list-item内不能再嵌套list；
  • list-item的type属性为必填属性；
  • list-item内部需谨慎使用if指令或for指令，因为相同type属性的list-item的 DOM 结构必须完全相同，而使用if指令或for指令会造成 DOM 结构差异；

• richtext 插入的html片段，无法更改样式；如果需要自定义文字样式，只能使用text
• 部分手机swiper不会自动渲染第一屏，需要在onInit的时候指定索引index的值
• swiper不会根据内容自适应高度，需要设置具体height值
• slider可以改变背景条颜色和选中颜色，但是改不了圆形button的颜色

其他问题：

• 更新 rpk 的时候，版本号需要自增1
• 在protected public private里定义的属性，在 template 中无法获取，因为这些只能在页面级组件中使用，在自定义组件（非页面级组件）中，需使用data来定义数据
• 不能出现任何原生app下载引导，一旦出现就不会过审

一些建议

快应用毕竟才开始没多久，期待社区能越来越活跃，快应用也能更强大，以下是整理的一些建议（陆续更新）：

• 合理利用生命周期钩子：一些可能会造成内存泄漏的方法记得在onDestroy中销毁；onBackPress 中可以处理一些业务逻辑，比如打开了某个悬浮框，第一次按物理返回键，可以关闭悬浮框，再按一次才返回（符合安卓使用习惯）；比如在小说阅读页，可以在按返回的时候询问是否加入书架，然后执行后续逻辑；
• 一些共用方法，不需要在每个页面都引用，这样打包的时候会在所有页面都单独引用一遍，可以统一在app.ux中引入，然后抛出，在需要使用的页面通过this.$app.$def...这种形式使用；
• 快应用的rpk要求不超过1M，快应用脚手架目前不支持静态资源压缩，一定要手动对静态资源进行压缩；

curry

@快应用官方 论坛不支持markdown，难受啊

管理员

辛苦啦，排版方面有问题都可以联系我帮忙哈

curry

管理员 发表于 2018-11-27 18:31 辛苦啦，排版方面有问题都可以联系我帮忙哈

好的好的，辛苦

827542599@qq.co

哥，我也遇到了这个问题 后来您咋整呀？

curry

827542599@qq.co 发表于 2018-12-25 16:05 哥，我也遇到了这个问题 后来您咋整呀？

按照文档改下就好了，如果一定要用if或者for，可以加在list-item上或者用block包起来，文档有例子https://doc.quickapp.cn/tutorial/widgets/list-tutorial.html

827542599@qq.co

827542599@qq.co 发表于 2018-12-25 16:05 哥，我也遇到了这个问题 后来您咋整呀？

我知道了……