mpvue開發(fā)小程序所遇問題及h5轉(zhuǎn)化方案

mpvue開發(fā)小程序會遇到許多問題，下面為大家解答如何解決。

• 項目結(jié)構(gòu)

•  |---build
       |---pages.js文件目錄
   |---src
       |---component子組件
       |---pages
           |---業(yè)務(wù)頁面
       |---store，vuex儲存
       |---utils
           |---請求api.js
           |---format格式化插件，小程序中不能使用vue自帶的格式化只能手動修改后臺返回的時間戳，價格，訂單狀態(tài)等
           |---request封裝fly進行請求響應(yīng)攔截
           |---wx.js
  

• 環(huán)境及依賴

  • less-loader,提供嵌套樣式，誰用誰知道

  • flyio提供請求便于請求模塊的快速轉(zhuǎn)化h5(flyio提供了h5,小程序的請求封裝，參考mpvue中提供的一個例子寫攔截器，用于處理后臺返回未登錄狀態(tài)跳轉(zhuǎn)頁面)，自己在小程序中wx.request封裝也一樣，只是轉(zhuǎn)h5又需要做一個axios。

  • 騰訊地圖qqMap提供的reverseGeocoder(wx.getLocation只提供了經(jīng)緯度定位，而產(chǎn)品需要的是確認定位后獲取城市，進行同城商品檢索)

  • 阿里云oss對象儲存處理文件上傳，比較意外的是騰訊對阿里云的oss域名前綴進行了封禁后臺不能配置，解決方案是讓后臺將該域名進行服務(wù)器域名代理。提一嘴，最開始用七牛云沒有出現(xiàn)這個問題，嫌麻煩的可以用七牛

  • 富文本處理，使用mpvue例子中提供的mpvue-wxparse，當然你也可以自己寫

• 小程序開發(fā)過程遇到的問題

  • 使用mpvue是一個非常爽的過程，vue的語法基本能正常使用但有幾個需要注意的問題
  • 頁面?zhèn)鬟f參數(shù)類似get請求?key=value，下一個頁面采用$mp.query.key獲取但是在同類型的頁面如商品詳情多次key的切換由于頁面緩存key會保持不變，根據(jù)業(yè)務(wù)不同情況可能不同，我采取的方案是在onUnload中清除key，雖然mpvue文檔官方不推薦用小程序的周期，但需要多次切換key的頁面目前能夠?qū)崿F(xiàn)先這么處理吧。
  • 最開始僅打算做小程序，后來需要補充app，需要在開放平臺關(guān)聯(lián)小程序后使用unionId以使三端用戶相同，沒有做好產(chǎn)品定位，需要重新進行表結(jié)構(gòu)設(shè)置。獲取方法為利用wx.login獲取iv，sessionkey解析encryptedData
  • 圖片驗證碼需要帶session，因此不能直接用img標簽發(fā)送get請求，而是需要要通過filedownload請求地址下載二進制文件后轉(zhuǎn)鏈接綁定給img
  • input函數(shù)觸發(fā)聚焦需要先設(shè)置:focus先為false再為true進行聚焦
  • 子組件因為只會綁定一次不會觸發(fā)OnShow周期，父組件在onshow周期獲取獲取不到this.$children
  • 小程序在關(guān)閉5分鐘內(nèi)不會被清除部分頁面還是需要下拉刷新這個功能，可以在main.js開啟enablePullDownRefresh: true，但會與scroll-view中的下拉沖突，只能二選一
  • 我們可以通過swiper嵌套scroll-view進行tab欄組件制作，swiper這個組件的高度需要用js寫定高度，高度通過getSystemInfo獲取，如果通過彈性布局flex:1;可能導(dǎo)致部分ios舊版本高度撐不開,嵌套比較多就不貼代碼了

     

  • 默認各種小程序原生自帶圖標是白色，如果背景色是白色，那么你可能一下子發(fā)現(xiàn)不了加載圖消失的原因.window里配置backgroundTextStyle:'dark'
  • 小程序有不少保留字需要注意不要重復(fù)，查看Q&A
  • 前幾次提交審核似乎是機器審核，代碼異常也可以通過。
  • watch全局vuex會在非當前頁面執(zhí)行，如果你拿了$mp里面的參數(shù)可能會全局報錯
  • ?。?！分享需要注意分享出來的是單頁沒有返回到首頁，只能點擊右上角三點，如果還沒有進行過操作建議應(yīng)該先帶頁面參數(shù)到首頁，經(jīng)過首頁跳轉(zhuǎn)到分享目的頁面，這樣會自然一點，目前我的項目基本完成，為不影響整個流程，我在幾個關(guān)鍵頁面中判斷getCurrentPage().length>1?來判斷是否為第一頁，如果是第一頁就顯示一個返回首頁的按鈕，實屬無奈

• 轉(zhuǎn)h5實踐

  • 小程序與h5需要替換的大概30%頁面渲染輕松，但組件替換需要花一定時間，比較復(fù)雜的包括以下vue項目常用部分，如果有一兩個vue項目相信早就操作過這些部分，替換這些組件也就改改業(yè)務(wù)邏輯，采用的ui框架是接近weui的vux
    • wx這個對象我們可以結(jié)合router和vux封裝一下其中的navigateTo，redirectTo等路由及模態(tài)框和toast，并在webpack.base.conf配置wx指向該文件,這樣我們就能直接使用wx這個對象面的方法不用修改

    /*webpack.base.conf*/
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'wx': resolve('src/utils/wxSimulate.js')
      }
    },
    /*模擬wx的自己寫的wxsimilate.js*/
      import router from '../router'
      import Vue from 'vue'
      import { ConfirmPlugin, ToastPlugin } from 'vux'
      Vue.use(ConfirmPlugin)
      Vue.use(ToastPlugin)
      const wx = {
        navigateTo ({ url }) {
          console.log(url)
          router.push({ path: url })
        },
        redirectTo ({url}) {
          router.replace({ path: url })
        },
        navigateBack () {
          router.go(-1)
        },
        showToast ({title}) {
          Vue.$vux.toast.show({
            // 組件除show外的屬性
            text: title
          })
        },
        // 模態(tài)框顯示
        showModal ({title, content, success}) {
          Vue.$vux.confirm.show({
            title,
            content,
            // 組件除show外的屬性
            onConfirm () {
              success && success({confirm: true, cancel: false})
            },
            onCancel () {
              success && success({confirm: false, cancel: true})
            }
          })
        }
      }
      window.wx = wx
      export default wx
    
    

    • 地圖(采用vue-amap)，不多說，面向api編程
    • 上下拉加載采用betterscroll封裝一個scroll組件進行slot,slot文章參考點左邊
    • rpx采用less+flexible中@rpx代替，只需要把所有rpx換成@rpx即可，不懂的小伙伴可以去看一下rem相關(guān)

      /*mpvue*/
        <style scoped lang="less">
        #index {padding:100rpx 20rpx 110rpx;}
      /*vue*/
        <style scoped lang="less">
        @charset "utf-8";
        @rpx: 117.188rem;
        #index {padding:100/@rpx 20/@rpx 110/@rpx;}
      

    • flyio從mpvue搬過來基本不變
    • 剛才mpvue中提到的阿里云oss上傳需要修改配置文件中的uploadFile為h5中的FormData進行文件上傳
    • 兩者的input聚焦函數(shù)業(yè)務(wù)不同，h5中ios不允許函數(shù)吊起聚焦需要用戶自己手點，安卓還是可以的el.focus()進行。

• 最后感謝美團的各位大佬，讓我這個菜雞舒舒服服的開發(fā)了小程序、業(yè)績也達標了，對文章有問題的大佬請指正，希望大家都能順順利利開開心心的開發(fā)小程序，最近看到京東出了個taro又準備開啟新的填坑之路啦。