小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-06-25 10:54 所屬欄目:小程序開(kāi)發(fā)教程
  • 項(xiàng)目結(jié)構(gòu)

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

    • less-loader,提供嵌套樣式,誰(shuí)用誰(shuí)知道

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

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

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

       

    • 富文本處理,使用mpvue例子中提供的mpvue-wxparse,當(dāng)然你也可以自己寫(xiě)

  • 小程序開(kāi)發(fā)過(guò)程遇到的問(wèn)題

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

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

  • 轉(zhuǎn)h5實(shí)踐

    • 小程序與h5需要替換的大概30%頁(yè)面渲染輕松,但組件替換需要花一定時(shí)間,比較復(fù)雜的包括以下vue項(xiàng)目常用部分,如果有一兩個(gè)vue項(xiàng)目相信早就操作過(guò)這些部分,替換這些組件也就改改業(yè)務(wù)邏輯,采用的ui框架是接近weui的vux
      • wx這個(gè)對(duì)象我們可以結(jié)合router和vux封裝一下其中的navigateTo,redirectTo等路由及模態(tài)框和toast,并在webpack.base.conf配置wx指向該文件,這樣我們就能直接使用wx這個(gè)對(duì)象面的方法不用修改
      
      /*webpack.base.conf*/
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'wx': resolve('src/utils/wxSimulate.js')
        }
      },
      /*模擬wx的自己寫(xiě)的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),不多說(shuō),面向api編程
      • 上下拉加載采用betterscroll封裝一個(gè)scroll組件進(jìn)行slot,slot文章參考點(diǎn)左邊
      • 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搬過(guò)來(lái)基本不變
      • 剛才mpvue中提到的阿里云oss上傳需要修改配置文件中的uploadFile為h5中的FormData進(jìn)行文件上傳
      • 兩者的input聚焦函數(shù)業(yè)務(wù)不同,h5中ios不允許函數(shù)吊起聚焦需要用戶自己手點(diǎn),安卓還是可以的el.focus()進(jìn)行。
  • 最后感謝美團(tuán)的各位大佬,讓我這個(gè)菜雞舒舒服服的開(kāi)發(fā)了小程序、業(yè)績(jī)也達(dá)標(biāo)了,對(duì)文章有問(wèn)題的大佬請(qǐng)指正,希望大家都能順順利利開(kāi)開(kāi)心心的開(kāi)發(fā)小程序,最近看到京東出了個(gè)taro又準(zhǔn)備開(kāi)啟新的填坑之路啦。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://u-renovate.com/wxmini/doc/course/24593.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢