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

時間 2019-11-09

標籤 mpvue 開發程序問題 h5 轉化方案简体版

原文原文鏈接

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

項目結構

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

環境及依賴css
- less-loader,提供嵌套樣式，誰用誰知道
- flyio提供請求便於請求模塊的快速轉化h5(flyio提供了h5,小程序的請求封裝，參考mpvue中提供的一個例子寫攔截器，用於處理後臺返回未登陸狀態跳轉頁面)，本身在小程序中wx.request封裝也同樣，只是轉h5又須要作一個axios。
- 騰訊地圖qqMap提供的reverseGeocoder(wx.getLocation只提供了經緯度定位，而產品須要的是確認定位後獲取城市，進行同城商品檢索)
- 阿里雲oss對象儲存處理文件上傳，比較意外的是騰訊對阿里雲的oss域名前綴進行了封禁後臺不能配置，解決方案是讓後臺將該域名進行服務器域名代理。提一嘴，最開始用七牛雲沒有出現這個問題，嫌麻煩的能夠用七牛!
- 富文本處理，使用mpvue例子中提供的mpvue-wxparse，固然你也能夠本身寫
小程序開發過程遇到的問題html
- 使用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舊版本高度撐不開,嵌套比較多就不貼代碼了
- 默認各類小程序原生自帶圖標是白色，若是背景色是白色，那麼你可能一會兒發現不了加載圖消失的緣由.window裏配置backgroundTextStyle:'dark'
- 小程序有很多保留字須要注意不要重複，查看Q&A
- 前幾回提交審覈彷佛是機器審覈，代碼異常也能夠經過。
- watch全局vuex會在非當前頁面執行，若是你拿了$mp裏面的參數可能會全局報錯
- api,過濾函數複用方面，import的js在每次Import打包進去都會直接拷貝整個js，60個頁面就重複60次，咱們能夠把這部分公共的js放到vendor.js中，就只打包一次了，包大小有明顯變化，修改webpack，參考issue

轉h5實踐vue

小程序與h5須要替換的大概30%頁面渲染輕鬆，但組件替換須要花必定時間，比較複雜的包括如下vue項目經常使用部分，若是有一兩個vue項目相信早就操做過這些部分，替換這些組件也就改改業務邏輯，採用的ui框架是接近weui的vuxwebpack

wx這個對象咱們能夠結合router和vux封裝一下其中的navigateTo，redirectTo等路由及模態框和toast，並在webpack.base.conf配置wx指向該文件,這樣咱們就能直接使用wx這個對象面的方法不用修改ios

/*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相關git

/*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;}