從入到放棄——快應(yīng)用踩坑之路
發(fā)布時間：2018-12-28 08:42 所屬欄目：小程序開發(fā)教程
伴隨著我司快應(yīng)用審核通過、上線，此處應(yīng)該有一篇快應(yīng)用踩坑經(jīng)歷。我司開發(fā)的快應(yīng)用剛好涉及到音頻、視頻、Feeds流業(yè)務(wù)，下面我說分享一下我在開發(fā)中遇到的問題。
項目搭建
hap init <project_name> // 生成一個快應(yīng)用項目腳手架
cd project_name
npm install // 安裝依賴
npm run build // 打包快應(yīng)用，輸出build和dist文件夾
npm run watch // 監(jiān)測到變化后自動編譯
npm run server // 在另起一個終端開啟server
復(fù)制代碼
如果node版本用的是8以上的話，在運行完npm install后再運行npm run build時可能會報Cannot find module .../webpack.config.js異常，請重新執(zhí)行一次hap update --force。這是由于高版本的npm在npm install時，會校驗并刪除了node_modules下部分文件夾，導(dǎo)致報錯。而hap update --force會重新復(fù)制hap-toolkit文件夾到node_modules
項目發(fā)布
由于我們在開發(fā)環(huán)境下是用的debug簽名，而正式發(fā)布到應(yīng)用市場是需要正式簽名
創(chuàng)建私鑰：
通過openssl命令等工具生成簽名文件private.pem、certificate.pem，例如：
openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
(密鑰長度，1024覺得不夠安全的話可以用2048，但是代價也相應(yīng)增大)
在工程的sign目錄下創(chuàng)建release目錄，將私鑰文件private.pem和證書文件certificate.pem拷貝進去
Country Name (2 letter code) [XX]:CN #國家代碼（中國）
State or Province Name (full name) []:BeiJing #省（北京）
Locality Name (eg, city) [Default City]:BeiJing #市（北京）
Organization Name (eg, company) [Default Company Ltd]:gdlb #公司名稱
Organizational Unit Name (eg, section) []: #可不填
Common Name (eg, your name or your server's hostname) []: #可不填
Email Address []: #郵箱
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: #可不填
An optional company name []: #可不填
在工程的sign目錄下創(chuàng)建release目錄，將私鑰文件private.pem和證書文件certificate.pem拷貝進去
復(fù)制代碼
自定義根目錄配置
開發(fā)中可能需要引入js或者css文件等，為了方便通常回會備置相對路徑,可以設(shè)置 alias （別名），來方便應(yīng)用；具體的操作是，在 src 目錄下建立 config 文件夾，在其中創(chuàng)建 webpack.config.js 文件,畢竟都是是用webpack，就像寫vue項目一樣。
const path = require('path')
module.exports = {
postHook: function(webpackConf, options){
webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, {
'@src': path.join(process.cwd(), 'src')
})
}
}
復(fù)制代碼
開發(fā)中遇到的問題
布局樣式
初寫快應(yīng)用，因為之前是開發(fā)過小程序，再到快應(yīng)用特別不適應(yīng)。
1.首頁面布局默認的就是flex，其他的浮動布局啥的都沒有。
2.css 習(xí)慣連寫，突然不能連寫很不適應(yīng)。
3. 不支position要實現(xiàn)z-index的圖層效果請使用stack組件。
4.大量的css樣式不支持，如bulr、box-shadow要實現(xiàn)只能用背景圖。
5.background-image 1030 以下版本不支持網(wǎng)絡(luò)路徑
6. 華為平臺對svg 和 動畫有兼容性問題。
7. border-radius 如果是gif圖片不生效。
8.自定義字體樣式 1030+ 才支持font-face定義字體樣式。
復(fù)制代碼
組件
list-item
作為使用率最高的組件之一，list-item組件類型不一致時,一定要給type="***"
不同命名來區(qū)別，否則也會閃退。
解決方法：
<list-item type="{{index}}">
復(fù)制代碼
swiper
swiper也是作為出現(xiàn)頻率非常高組件，但是字實際使用中，雖然bug不多，但是開放的功能太少，如vertical設(shè)置滑動方向都不支持。
順便教大家自定義dots(面板指示點)
<div class="swiper-container">
<stack>
<swiper class="swiper" autoplay="true" indicator="false" interval="2000" loop="true" onchange="swiperChange">
<block for="(index, item) in data">
<image class="wrap-img" src="{{item.image}}" onclick="bindViewTap(item)" />
</block>
</swiper>
<div class="dots">
<block for="(index, item) in data">
<div class="dot {{index === swiperCurrent ? 'active' : ''}}"></div>
</block>
</div>
</stack>
</div>
<script>
export default {
swiperChange(e) {
this.swiperCurrent = e.index
}
}
</script>
|
利用onchange事件去做修改
復(fù)制代碼
tabs
tabs內(nèi)不能再嵌套tabs，如有此類需求，外部需要div組件模擬選項卡
復(fù)制代碼
slider
這個也是一個特別坑爹的組件
slider 組件只有滑動結(jié)束后end才有回調(diào)，進行中沒有回調(diào)，改變value值也會觸發(fā)change事件，無法判斷change是人為滑動觸發(fā)，還是改變數(shù)據(jù)觸發(fā)的。官方demo竟然是有時差來區(qū)別。
復(fù)制代碼
web
1.web組件使用網(wǎng)頁與原生通信時（system.postMessage）。
當頁面發(fā)生跳轉(zhuǎn)時，就無法再觸發(fā)通信，如:
www.xxx.com?id=1跳轉(zhuǎn)到www.xxx.com?id=2
在華為機型上有更多蜜汁bug.
復(fù)制代碼
video
video組件，由于我用到了if渲染后，竟然不能立即調(diào)用它的方法，而且還打印是存在的，官方給出答復(fù)，可能還沒準備就緒。
this.$forceUpdate()
/* 使用setTimeout解決蜜汁bug */
// this.$element("video") && this.$element("video").pause()
this.$element("video")&&setTimeout(()=>{this.$element("video").pause()},30);
復(fù)制代碼
還有很坑爹的事情，如組件竟然沒有onDestroy鉤子，據(jù)說以后會增加。
接口
音頻接口
音頻接口特別坑爹。
1.沒有獲取當前播放狀態(tài)的接口，據(jù)說1050才會加入。
audio.ontimeupdate = () => {
this.isplaying = true
// 由于快用還沒提供獲取播放狀態(tài)的接口,暫時啊這樣解決了。
}
2.在通知欄中點擊關(guān)閉音樂觸發(fā)onpause完之后，ontimeupdate沒有立即停止。
audio.onpause = () => {
/* 我使用通知欄上的音樂通知欄，直接點擊關(guān)閉，觸發(fā)onpause完之后，ontimeupdate沒有立即停止，用clearTimeout解決 */
let globalTime = this.$app.$def.globalTime
clearTimeout(globalTime)
globalTime = setTimeout(() => {
this.isplaying = false
}, 20)
}
3.當頁面觸發(fā)onDestroy，onHide一定要記得銷毀不必要的回調(diào)。
復(fù)制代碼
$watch
此方法盡量避免使用，因為他在1020和1030中是有差異的，在 1030 上的 watcher 的響應(yīng)確會存在滯后，相比于 1020（牽扯到的代碼都是同步邏輯）
復(fù)制代碼
$forceUpdate()
this.$forceUpdate()有點類似與vue的this.$nextTick()，
若開發(fā)者期望數(shù)據(jù)更新時立即執(zhí)行相應(yīng)的 DOM 操作，可使用：this.$forceUpdate()；一般不推薦使用
復(fù)制代碼
被禁用的 new Function，eval
eval這些容易注入惡意代碼，所以小程序，快應(yīng)用禁用了。
其實就是怕你怕你熱更新，繞開審核，進行為所欲為的操作。
但是你確實想用eval，也可以自己實現(xiàn)一個。
參照-《前端與編譯原理——用JS寫一個JS解釋器》
