小程序模板網(wǎng)

從入到放棄——快應(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+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25050.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢