快应用开发常见问题及解决方案

快应用是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统 APP 完整的应用体验，但无需安装、即点即用。快应用是基于手机硬件平台的新型应用形态，由国内十大手机厂商基于硬件平台共同推出，其标准是由主流手机厂商组成的快应用联盟联合制定。这里记录下在快应用开发中，涉及的常见问题及其对应解决方案；同时也会给出如何更好开发快应用的一些建议。

快应用开发常见问题及解决方案

温馨提醒：如果您目前有涉及进行快应用开发，那么您不妨看下快应用脚手架，为优雅而生一文，其中将开发所遇到的一些问题、以及开发体验都作了很大程度上的优化，相信会给你带来帮助(另外， Github 上的 awesome-quickapp 仓库：云集最新快应用相关教程文章、开发资源、项目案例及新闻动态；相信也会给您更好进行快应用开发，提供更多帮助)。

此文首发于个人最新基于 Ghost 所搭建博客静轩之别苑 | 快应用开发常见问题及解决方案。

快应用引擎相关

快应用生命周期函数

• 现有的APP生命周期函数有： onCreate, onDestroy
• 现有的页面级组件生命周期函数：onCreate、onInit、onReady、onShow、onHide、onDestroy（onBackPress、onMenuPress）
• 已有的自定义组件生命周期函数： onCreate、onInit、onReady、onDestroy（onDestroy 只会在页面销毁的时候触发，用 if 指令卸载无法触发）

快应用的 def、$data 以及 global

在快应用中，暴露了 $app 对象；此对象下有暴露出 $def，$data等字段：

• $def： 使用 this.def 获取在 app.ux 中暴露的对象;
• $data：使用 this.data 获取在 manifest.json 的 config.data 中声明的全局数据；

但需要注意的是：直接挂在于 this 上，需通过 this.def` 上，才可通过 this.def 来取，二者不可混淆。

// app.ux
import device from '@system.device'
const hook2global = global.__proto__ || global
hook2global.$apis = $apis

  < script >
  export default {
  $deviceInfo: {},
  $xDeviceInfo: {},
  async onCreate() {
    this.$def.$deviceInfo = await this.getInfo()
    this.$xDeviceInfo = await this.getInfo()
  },
  async getInfo() {
    return new Promise((resolve, reject) => {
      device.getInfo({
        success: ret => {
          resolve(ret)
        },
        fail: err => {
          console.log(err)
        }
      })
    })
  }
}

如上示例代码，在其他页面代码中，this.def.app.$xDeviceInfo 这两种调用方式是期待的写法；如果混淆调用，得到的结果则是 undefined。

而挂在于 global 的变量(如 apis 或直接 apis or this.global.$apis，如此就不能达到预期；在页面属性中定义声明下即可，如下代码示例：

快应用中如何使用「字体图标」

在应用中，可以使用字体图标如 icomoon，可以帮着有更好的方案来展示应用图标；在快应用中，可以直接在 dom 中使用，如下示例。但，对于定义在变量中的字体编码，则需要借助 unescape 做一层转换。

如何动态处理修改快应用样式

鉴于些原因快应用 hap-toolkit 打包，无法对逻辑代码进行处理；而快应用引擎内部，也没有对逻辑代码中样式做很好的兼顾；所以，当需要动态处理修改快应用样式时，你需要对涉及的代码进行转义处理，如下代码示例（备注：在 1030 版本，组件的 style 属性，支持直接绑定 Object 或 String）：

至于为何要这么处理，可以参看开发时，build 目录下所打包后的代码，hap-toolkit 是对样式进行了处理，只要逻辑层的代码修改，跟打包后的样式处置保持一致，那么就可以实现动态处理修改快应用样式；如上代码中对 background-image 的设置，就是为了兼容快应用内部打包适配（此解决方案针对 1040 及以前版本，未知快应用何时修复）。

打包工具相关

如何升级 hap-toolkit 从 <0.0.38 至最新：

1. 将本地 hap-toolkit 升级至新版本如 0.2.0: yarn upgrade [email protected];
2. 运行 npx hap update --force 命令将本地配置升级（会新建 package.json, 原文件成 old package.json）;
3. 手动将 old package.json 中的自己的额外配置，同步至新的 package.json；
4. 将本地的 node_modules 和 package-lock.json: rm -rf node_modules;
5. 重新安装依赖即可：重新运行 yarn or npm i;

如何为快应用设置别名(alias)

在已有项目根目录下创建 config.js 文件夹，并在该文件夹下添加 webpack.config.js,然后注入类似如下代码即可：

const path = require('path')

module.exports = {
  postHook: function(webpackConf, options){
    const alias = Object.assign(webpackConf.resolve.alias || {}, {
      '@components': path.join(process.cwd(), 'src/components')
    })
    webpackConf.resolve.alias = alias
  }
}

如此，对于 import 自定义组件或方法，就会得到优化，而不用费神去关心相对路径（需要提醒的是：因为快应用现有设计缘故，别名不能作用于 Dom 结构以及 style）；

// 为快应用注入别名(alias)之后的写法

@2019-02-24 于深圳.福田 Last Modify：2018-03-07

---

您可能会感兴趣的文章：

• Prettier 插件为更漂亮快应用代码
• 快应用脚手架，为优雅而生
• 云集优站，尽在「倾城之链」其二
• 快应用之开发体验纪要
• 快应用开发资源、教程汇聚
  
• TOP 100 大前端超棒精选列表