快應用開發常見問題及解決方案
快應用 是移動網際網路新型應用生態，與手機系統深度整合，為使用者提供更加場景化的體驗。具備傳統 APP 完整的應用體驗，但無需安裝、即點即用。快應用 是基於手機硬體平臺的新型應用形態，由國內十大手機廠商基於硬體平臺共同推出，其標準是由主流手機廠商組成的快應用聯盟聯合制定。這裡記錄下在快應用 開發中，涉及的常見問題及其對應解決方案；同時也會給出如何更好開發快應用 的一些建議。
溫馨提醒：如果您目前有涉及進行快應用開發，那麼您不妨看下快應用腳手架，為優雅而生 一文，其中將開發所遇到的一些問題、以及開發體驗都作了很大程度上的優化，相信會給你帶來幫助(另外， Github 上的awesome-quickapp 倉庫：雲集最新快應用相關教程文章、開發資源、專案案例及新聞動態；相信也會給您更好進行快應用開發，提供更多幫助)。
快應用引擎相關
快應用生命週期函式
- 現有的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
從<0.0.38
至最新：
-
將本地
hap-toolkit升級至新版本如0.2.0:yarn upgrade [email protected]; -
執行
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-02-24