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