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

  • 項目結構css

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

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

    • flyio提供請求便於請求模塊的快速轉化h5(flyio提供了h5,小程序的請求封裝,參考mpvue中提供的一個例子寫攔截器,用於處理後臺返回未登陸狀態跳轉頁面),本身在小程序中wx.request封裝也同樣,只是轉h5又須要作一個axios。webpack

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

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

    • 富文本處理,使用mpvue例子中提供的mpvue-wxparse,固然你也能夠本身寫github

  • 小程序開發過程遇到的問題web

    • 使用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裏面的參數可能會全局報錯
    • !!!分享須要注意分享出來的是單頁沒有返回到首頁,只能點擊右上角三點,若是尚未進行過操做建議應該先帶頁面參數到首頁,通過首頁跳轉到分享目的頁面,這樣會天然一點,目前個人項目基本完成,爲不影響整個流程,我在幾個關鍵頁面中判斷getCurrentPage().length>1?來判斷是否爲第一頁,若是是第一頁就顯示一個返回首頁的按鈕,實屬無奈
    • api,過濾函數複用方面,import的js在每次Import打包進去都會直接拷貝整個js,60個頁面就重複60次,咱們能夠把這部分公共的js放到vendor.js中,就只打包一次了,包大小有明顯變化,修改webpack,參考issue

  • 轉h5實踐vuex

    • 小程序與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又準備開啓新的填坑之路啦。編程

相關文章
相關標籤/搜索