mpvue開發小程式所遇問題及h5轉化方案

eason,發表於2019-03-04
  • 專案結構

  •  |---build
         |---pages.js檔案目錄
     |---src
         |---component子元件
         |---pages
             |---業務頁面
         |---store,vuex儲存
         |---utils
             |---請求api.js
             |---format格式化外掛,小程式中不能使用vue自帶的格式化只能手動修改後臺返回的時間戳,價格,訂單狀態等
             |---request封裝fly進行請求響應攔截
             |---wx.js
    複製程式碼
  • 環境及依賴

    • less-loader,提供巢狀樣式,誰用誰知道

    • flyio提供請求便於請求模組的快速轉化h5(flyio提供了h5,小程式的請求封裝,參考mpvue中提供的一個例子寫攔截器,用於處理後臺返回未登入狀態跳轉頁面),自己在小程式中wx.request封裝也一樣,只是轉h5又需要做一個axios。

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

    • 阿里雲oss物件儲存處理檔案上傳,比較意外的是騰訊對阿里雲的oss域名字首進行了封禁後臺不能配置,解決方案是讓後臺將該域名進行伺服器域名代理。提一嘴,最開始用七牛雲沒有出現這個問題,嫌麻煩的可以用七牛

      mpvue開發小程式所遇問題及h5轉化方案
    • 富文字處理,使用mpvue例子中提供的mpvue-wxparse,當然你也可以自己寫

  • 小程式開發過程遇到的問題

    • 使用mpvue是一個非常爽的過程,vue的語法基本能正常使用但有幾個需要注意的問題
    • 頁面傳遞引數類似get請求?key=value,下一個頁面採用$mp.query.key獲取但是在同型別的頁面如商品詳情多次key的切換由於頁面快取key會保持不變,根據業務不同情況可能不同,我採取的方案是在onUnload中清除key,雖然mpvue文件官方不推薦用小程式的週期,但需要多次切換key的頁面目前能夠實現先這麼處理吧。
    • 最開始僅打算做小程式,後來需要補充app,需要在開放平臺關聯小程式後使用unionId以使三端使用者相同,沒有做好產品定位,需要重新進行表結構設定。獲取方法為利用wx.login獲取iv,sessionkey解析encryptedData
    • 圖片驗證碼需要帶session,因此不能直接用img標籤傳送get請求,而是需要要通過filedownload請求地址下載二進位制檔案後轉連結繫結給img
    • input函式觸發聚焦需要先設定:focus先為false再為true進行聚焦
    • 子元件因為只會繫結一次不會觸發OnShow週期,父元件在onshow週期獲取獲取不到this.$children
    • 小程式在關閉5分鐘內不會被清除部分頁面還是需要下拉重新整理這個功能,可以在main.js開啟enablePullDownRefresh: true,但會與scroll-view中的下拉衝突,只能二選一
    • 我們可以通過swiper巢狀scroll-view進行tab欄元件製作,swiper這個元件的高度需要用js寫定高度,高度通過getSystemInfo獲取,如果通過彈性佈局flex:1;可能導致部分ios舊版本高度撐不開,巢狀比較多就不貼程式碼了
      mpvue開發小程式所遇問題及h5轉化方案
    • 預設各種小程式原生自帶圖示是白色,如果背景色是白色,那麼你可能一下子發現不了載入圖消失的原因.window裡配置backgroundTextStyle:`dark`
    • 小程式有不少保留字需要注意不要重複,檢視Q&A
    • 前幾次提交稽核似乎是機器稽核,程式碼異常也可以通過。
    • watch全域性vuex會在非當前頁面執行,如果你拿了$mp裡面的引數可能會全域性報錯
    • !!!分享需要注意分享出來的是單頁沒有返回到首頁,只能點選右上角三點,如果還沒有進行過操作建議應該先帶頁面引數到首頁,經過首頁跳轉到分享目的頁面,這樣會自然一點,目前我的專案基本完成,為不影響整個流程,我在幾個關鍵頁面中判斷getCurrentPage().length>1?來判斷是否為第一頁,如果是第一頁就顯示一個返回首頁的按鈕,實屬無奈
    • api,過濾函式複用方面,import的js在每次Import打包進去都會直接拷貝整個js,60個頁面就重複60次,我們可以把這部分公共的js放到vendor.js中,就只打包一次了,包大小有明顯變化,修改webpack,參考issue

mpvue開發小程式所遇問題及h5轉化方案

  • 轉h5實踐

    • 小程式與h5需要替換的大概30%頁面渲染輕鬆,但元件替換需要花一定時間,比較複雜的包括以下vue專案常用部分,如果有一兩個vue專案相信早就操作過這些部分,替換這些元件也就改改業務邏輯,採用的ui框架是接近weui的vux
      • wx這個物件我們可以結合router和vux封裝一下其中的navigateTo,redirectTo等路由及模態框和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
            })
          },
          // 模態框顯示
          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相關
        /*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聚焦函式業務不同,h5中ios不允許函式吊起聚焦需要使用者自己手點,安卓還是可以的el.focus()進行。
  • 最後感謝美團的各位大佬,讓我這個菜雞舒舒服服的開發了小程式、業績也達標了,對文章有問題的大佬請指正,希望大家都能順順利利開開心心的開發小程式,最近看到京東出了個taro又準備開啟新的填坑之路啦。

相關文章