国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

big_cat / 2971人閱讀

摘要:騰訊地圖提供的只提供了經緯度定位,而產品需要的是確認定位后獲取城市,進行同城商品檢索阿里云對象儲存處理文件上傳,比較意外的是騰訊對阿里云的域名前綴進行了封禁后臺不能配置,解決方案是讓后臺將該域名進行服務器域名代理。

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

項目結構

    |---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例子中提供的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舊版本高度撐不開,嵌套比較多就不貼代碼了

默認各種小程序原生自帶圖標是白色,如果背景色是白色,那么你可能一下子發現不了加載圖消失的原因.window里配置backgroundTextStyle:"dark"

小程序有不少保留字需要注意不要重復,查看Q&A

前幾次提交審核似乎是機器審核,代碼異常也可以通過。

watch全局vuex會在非當前頁面執行,如果你拿了$mp里面的參數可能會全局報錯

api,過濾函數復用方面,import的js在每次Import打包進去都會直接拷貝整個js,60個頁面就重復60次,我們可以把這部分公共的js放到vendor.js中,就只打包一次了,包大小有明顯變化,修改webpack,參考issue

轉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*/