快應用開發常見問題以及解決方案【持續更新】

vivo技術弟發表於2018-10-19

接觸快應用也有一段時間了，踩過了大大小小的坑，讓我活到了今天。準備在此立貼持續更新，記錄遇到的問題以及解決方案，造福大眾。

css 方面

1、文字豎排不支援

目前官方還不支援writing-mode，除了等待官方支援這個api以外，還可以使用一種hack手段：給元素設定一個比較小的寬度。

2、text-align: center;居中無效

由於快應用預設是flex佈局，所以居中的話應當使用justify-content: center;

template 方面

1、使用了list元件之後整個頁面都不能滾動了

list元件需要加上“scrollpage=true”。https://doc.quickapp.cn/widge…

2、list 元件滑動無故閃退– 很抱歉, “快應用” 已停止執行。

很可能是你的list-item 裡面用了不同的檔案結構導致的

<list-item>
 <div if={{item.img}}>
   <image src=`{{item.img}}`>
 </div>
 <div else>
   <text>{{item.text}}</text>
 </div>
</list-item>

相同的type的list-item必須具備完全一致的DOM結構, 上例的list-item 的dom結構是會改變的,理應使用兩個不同的type 的list-item才行

<list-item type="img" if={{item.img}}>
 <div>
   <image src=`{{item.img}}`>
 </div>
</list-item>
<list type="text" else>
 <div>
   <text>{{item.text}}</text>
 </div>
</list-item>
3、richtext 插入的html片段，無法更改樣式？有時候圖片還超出螢幕的邊緣

由於官方沒有介面對richtext的樣式作修改，目前可以有的一種辦法就是使用正則搜尋匹配，然後加樣式在需要的地方

4、list元件有時候會無法渲染

解決這個問題可是花了我不少時間吶。這個是快應用已知的一個bug。
當list用在第三層的時候就會有這個無法渲染的問題。

<template>
<div>
  <div>
    <list>
    ...
    </list>
  </div>
</div>
</template>

解決方案： 改成div，或者不要放在第三層。

js 方面

1、storage.get 在success中設定變數沒反應
var a;
storage.get({
  key: `a`,
  success: function (data) {
    a = data;
  }
})
console.log(a) //undefined

原因是storage是非同步的。

其他

1、如何達到全屏的效果

在配置檔案manifest.json 中設定display，”fullScreen”: false, 可以隱藏電量訊號的手機狀態列；”titleBar”: false; 可以隱藏titleBar。這樣子就全屏了。

2、工程升級以後，background-image變成白色背景了

background-image 使用了相對路徑，工程對相對路徑的處理有點bug；暫時改成絕對路徑就好了

3、windows 安裝完找不到hap 命令

這個多半是npm 安裝目錄沒有配置環境變數的問題。

npm prefix -g 
// 會列印一個出一個路徑，將它新增進系統變數中
// 再次執行
npm install -g hap-toolkit

參考:
快應用採坑與flex佈局講解
開發文件

相關文章