快应用开发常见问题及解决方案
栏目: JavaScript · 发布时间: 5年前
快应用 是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统 APP 完整的应用体验，但无需安装、即点即用。 快应用 是基于手机硬件平台的新型应用形态，由国内十大手机厂商基于硬件平台共同推出，其标准是由主流手机厂商组成的快应用联盟联合制定。这里记录下在 快应用 开发中，涉及的常见问题及其对应解决方案；同时也会给出如何更好开发 快应用 的一些建议。
温馨提醒：如果您目前有涉及进行快应用开发，那么您不妨看下 快应用脚手架，为优雅而生 一文，其中将开发所遇到的一些问题、以及开发体验都作了很大程度上的优化，相信会给你带来帮助(另外， Github 上的 awesome-quickapp 仓库：云集最新快应用相关教程文章、开发资源、项目案例及新闻动态；相信也会给您更好进行快应用开发，提供更多帮助)。
此文首发于个人最新基于 Ghost 所搭建博客 静轩之别苑 | 快应用开发常见问题及解决方案 。
快应用引擎相关
快应用生命周期函数
- 现有的APP生命周期函数有 ： onCreate, onDestroy
- 现有的页面级组件生命周期函数 ：onCreate、onInit、onReady、onShow、onHide、onDestroy（onBackPress、onMenuPress）
- 已有的自定义组件生命周期函数 ： onCreate、onInit、onReady、onDestroy（onDestroy 只会在页面销毁的时候触发，用
if指令卸载无法触发）
快应用的 $app、$def、$data 以及 global
在快应用中，暴露了 $app 对象；此对象下有暴露出 $def ， $data 等字段：
$def $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>
如何解决快应用 Input 失去焦点，输入法不收起来问题
目前( 1050- )可以解决的办法是，在空白区域，添加事件，注入如下逻辑：
this.$element('yourInputId').focus({focus: false})
如何解决快应用 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>
快应用中如何使用「字体图标」
在应用中，可以使用 字体图标 如 icomoon ，可以帮着有更好的方案来展示应用图标；在快应用中，可以直接在 dom 中使用，如下示例。但，对于定义在变量中的字体编码，则需要借助 unescape 做一层转换。
<template>
<text class="font-icon" style="font-size: {{fontSize}}px;"></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: ''
},
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>
如何动态处理修改快应用样式
鉴于些原因快应用 hap-toolkit 打包，无法对逻辑代码进行处理；而快应用引擎内部，也没有对逻辑代码中样式做很好的兼顾；所以，当需要动态处理修改快应用样式时，你需要对涉及的代码进行转义处理，如下代码示例（备注：在 1030 版本，组件的 style 属性，支持直接绑定 Object 或 String）：
<template>
<div class="wrapper-padding" style="{{ styleObj }}">
<text>如何动态处理修改快应用样式</text>
</div>
</template>
<script>
export default {
protected: {
styleObj: {},
dynamicUrl: 'https://image.nicelinks.site/jpg/nice-links-039.jpg'
},
onReady() {
this.styleObj = {
backgroundColor: '#fe0',
color: '#212121',
backgroundImage: `${this.dynamicUrl}`
}
}
}
</script>
至于为何要这么处理，可以参看开发时， build 目录下所打包后的代码， hap-toolkit 是对样式进行了处理，只要逻辑层的代码修改，跟打包后的样式处置保持一致，那么就可以实现动态处理修改快应用样式；如上代码中对 background-image 的设置，就是为了兼容快应用内部打包适配（此解决方案针对 1040 及以前版本，未知快应用何时修复）。
打包 工具 相关
如何升级 hap-toolkit 从 <0.0.38 至最新：
- 将本地
hap-toolkit升级至新版本如0.2.0:yarn upgrade hap-toolkit@0.1.0; - 运行
npx hap update --force命令将本地配置升级（会新建package.json, 原文件成 old package.json ）; - 手动将 old package.json 中的自己的额外配置，同步至新的
package.json； - 将本地的 node_modules 和 package-lock.json :
rm -rf node_modules; - 重新安装依赖即可：重新运行
yarnornpm 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）；
<import name="HellorWorld" src="./../../components/HellorWorld"></import> // 为快应用注入别名(alias)之后的写法 <import name="HellorWorld" src="@components/HellorWorld"></import>
@2019-02-24 于深圳.福田 Last Modify：2018-03-07
以上所述就是小编给大家介绍的《快应用开发常见问题及解决方案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入理解Nginx（第2版）
陶辉 / 机械工业出版社 / 2016-2 / 99.00元
本书致力于说明开发Nginx模块的必备知识，第1版发行以后，深受广大读者的喜爱．然而由于Ng,nx功能繁多且性能强大，以致必须了解的基本技能也很庞杂，而第1版成书匆忙，缺失了几个进阶的技巧描述，因此第2版在此基础上进行了完善。 书中首先通过介绍官方Nginx的基本用法和配置规则，帮助读者了解一般Nginx模块的用法，然后重点介绍了女口何开发HTTP模块(含HTTP过滤模块)来得到定制化的Ng......一起来看看 《深入理解Nginx（第2版）》 这本书的介绍吧!
