快应用脚手架，为优雅而生 | 静晴轩别苑

[nicejade]

https://nice.lovejade.cn/zh/article/quickapp-boilerplate-template.html

快应用脚手架模板，旨在探索如何更为优雅的开发快应用，为广大快应用开发者提供便利和参考，尽可能提升开发效率、优化开发体验，使得可以在更短时间内，塑造出更为优质的快应用。

[nicejade]

解决升级 hap-toolkit 至0.0.38报错问题

如将 hap-toolkit 升级至 0.0.38 后，因为其内部的 webpack 版本由 3.* 升级至 4.*，所以需要额外作下处理，才可以正常使用：

1. 升级 webpack 至 4.*: yarn upgrade webpack@4.26.1；
2. 升级 babel-loader 至 8.*：yarn add babel-loader --dev;
3. 新增其他依赖： yarn add @babel/cli @babel/core @babel/plugin-syntax-jsx @babel/preset-env --dev；
4. 移除不再需要的依赖： yarn remove babel-cli babel-core;
5. 删除根路径下 .babelrc 文件；
6. 根路径下增加 babel.config.js 文件，配置如下：

module.exports = function(api) {
  api.cache(true);
  return {
    "presets":["@babel/preset-env"],
    "plugins":["@babel/plugin-transform-modules-commonjs"],
    "babelrcRoots": [".", "node_modules"]
  };
}

[nicejade]

快应用框架支持通过链接从外部打开应用：

http://hapjs.org/app//[path][?key=value] https://hapjs.org/app//[path][?key=value] hap://app//[path][?key=value]

具体参数说明如下：

package: 应用包名，必选; path: 应用内页面的 path，可选，默认为首页; key-value: 希望传给页面的参数，可选，可以有多个;

Eg: hap://app/com.quickapp.nicelinks/Home；

网页中打开「快应用」

嵌入如下 JS 代码：

<script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>

<!-- 调起应用 -->
<script type="text/javascript">
  // 无需用户确认的调用方式，xxx.yyy.zzz 为包名
  appRouter("xxx.yyy.zzz", "/Home", { paramA: 1, paramB: '2' })
  // 需要用户确认的调用方式，xxx.yyy.zzz为包名
  appRouter('xxx.yyy.zzz', '/Home', { paramA: 1, paramB: '2' }, '显示给用户的应用名称');
  // Eg: 比如跳转至「倾城之链」，路径只能为 `/`，因为在 manifest.json 中 router 配置为：pages/Home;
  appRouter('com.quickapp.nicelinks', '/', { utm_source: 'github' });
</script>

[nicejade]

如何解决快应用 textarea 无法清空数据问题

快应用（version <= 1030）目前存在 textarea 无法清空数据问题，目前只能采取 Hack 的办法解决，即在需要清除时候 this.$delete 掉该绑定的值，onchange 回调中再通过 this.$set 将数据属性添加回去，使得可以正常工作；

<textarea onchange='handleChange' placeholder="{{placeholder}}" value="{{contentValue}}" id="keyborder"></textarea>
<input class="input" type="button" onclick="onHandleBtnClick" value="处理"></input>

<script>
export default {
    handleChange(response) {
        console.log(JSON.stringify(response, null, 2))

        // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
        this.$set('contentValue', response.text)
    },
    onHandleBtnClick() {
        // Here ....... 处理你的数据；

        // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
        this.$delete('contentValue')
    }
}
</script>

[nicejade]

快应用生命周期函数

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

[nicejade]

升级 hap-toolkit 从 <= 0.0.38 至 0.1.* 办法 ：

1. 将本地 hap-toolkit 升级至 0.1.0: yarn upgrade hap-toolkit@0.1.0;
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;

[nicejade]

如何解决快应用 Input 失去焦点，输入法不收起来问题

目前(1040-)可以解决的办法是，在空白区域，添加事件，注入如下逻辑：

this.$element('yourInputId').focus({focus: false})

[nicejade]

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

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

<template>
    <text class="font-icon" style="font-size: {{fontSize}}px;">&#xe900;</text>
    <text class="font-icon" style="font-size: {{fontSize}}px;">{{ iconCode }}</text>
    <text class="font-icon" style="font-size: {{fontSize}}px;">{{ unescapeFontIconCode(iconCode) }}</text>
</template>

<script>
export default {
  private: {
    fontSize: 100,
    iconCode: '&#xe900;'
  },
  unescapeFontIconCode(iconCode = '') {
    return unescape(iconCode.replace(/&#x/g, '%u').replace(/;/g, ''))
  }
}
</script>

<style>
@font-face {
  font-family: iconfont;
  src: url('./../../assets/fonts/icomoon.ttf');
}

.font-icon {
  font-family: iconfont;
}
</style>

[nicejade]

快应用的 $app、$def、$data 以及 global

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

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

但需要注意的是：直接挂在于 this 上，需通过 this.$app 来取；挂在于 this.$def 上，才可通过 this.$app.$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)
                    }
                 })
            })
        }
    }
</script>

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

而挂在于 global 的变量(如 $apis )，可通过 global.$apis 或直接 $apis 来调用；但如果在 DOM 结构中，不可直接使用，因为其默认主题是页面级 this，所以 Toolkit 编译出的结果就会是 this.$apis or this.global.$apis，如此就不能达到预期；在页面属性中定义声明下即可，如下代码示例：

<script>
    export default {
        $apis: $apis // or global.$apis
    }
<script>