摘要：騰訊地圖提供的只提供了經(jīng)緯度定位，而產(chǎn)品需要的是確認(rèn)定位后獲取城市，進(jìn)行同城商品檢索阿里云對(duì)象儲(chǔ)存處理文件上傳，比較意外的是騰訊對(duì)阿里云的域名前綴進(jìn)行了封禁后臺(tái)不能配置，解決方案是讓后臺(tái)將該域名進(jìn)行服務(wù)器域名代理。

項(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)境及依賴(lài)

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ù)類(lèi)似get請(qǐng)求?key=value，下一個(gè)頁(yè)面采用$mp.query.key獲取但是在同類(lèi)型的頁(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以使三端用戶(hù)相同，沒(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ò)

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

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