mpvue小程式踩坑之旅

lonelyRoad發表於2019-03-05
Vue

mpvue小程式

經過一段時間的專案立項，調研，公司大佬根據技術選型，開發成本，以及終端程式碼維護等綜合考慮決定使用mpvue來開發小程式端的業務，微信公眾號的專案也是選用的vue框架進行開發並且已經線上執行，因為小程式不支援dom操作，無法完全相容公眾號的程式碼，所以我們小程式端使用mpvue對原專案進行了一些修改。

mpvue框架搭建

小程式分為全域性配置和頁面配置 ,全域性配置在app.json中配置 
## 全域性安裝 vue-cli
$ npm install --global vue-cli

## 建立一個基於 mpvue-quickstart 模板的新專案
$ vue init mpvue/mpvue-quickstart my-project

## 安裝依賴
$ cd my-project
$ npm install
##啟動構建
$ npm run dev
複製程式碼

mpvue文件連結

base：在微信開發者工具中需要 npm run build 匯入dist檔案目錄下的wx資料夾，然後npm run dev 就可以熱更新開發專案了

路由

由於小程式本身配置問題mpvue並不能像vue一些支援router配置，只能使用小程式自帶的頁面配置

mpvue小程式踩坑之旅
我們在增加頁面的時候需要在app.js檔案中配置一下頁面的路徑，手動複製pages資料夾中檔案並修改成你配置的檔名

base:當新新增檔案後需要重新build，再啟服務，不然除錯沒有效果

元件

元件的功能基本支援，這也是使用mpvue提升開發效率其中的一個比較不錯的優點，但需要注意其中幾點
1 import ** from **.vue。import引入元件的時候檔案必須新增字尾名.vue否者元件引入之後頁面不會渲染。
2 有些元件是不支援的例如：動態元件，自定義 render，和<scripttype="text/x-template">字串模版等都不支援。(我的專案中沒怎麼用到這些，沒有具體實踐過)
原因很簡單，因為小程式要預編譯出 wxml。
mpvue元件文件

頁面跳轉以及引數傳遞

因為沒有路由檔案的問題，頁面跳轉只能使用小程式原生Api來進行操作，小程式提供了他的一套規則，我目前只用到了倆種。
1 redirectTo：關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面，會銷燬其他頁面棧

    wx.redirectTo({
        url: `/pages/${type}/main?roomId=${this.roomId}`
    }) 
複製程式碼

2 navigateTo：留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程式中頁面棧最多十層。

    wx.navigateTo({
        url: `/pages/${type}/main?roomId=${this.roomId}`
    }) 
複製程式碼
    {
      "navigationBarTitleText": "首頁",
      "disableSwipeBack": true
    }
複製程式碼

自帶返回icon頁面title需要在當前頁面資料夾的json檔案裡面配置上面的倆個欄位
3 接受頁面路徑引數，在頁面中新增onload方法預設option物件中就可以接收到頁面路徑的引數。

    onLoad(option) {
        this.roomId=option.roomId
    }
複製程式碼

小程式路由文件

filter 過濾器

因為小程式不支援dom操作所以mpvue無法整合vue的filter功能，好多資料操作只能在請求到資料之後根據業務需求在回撥函式中對資料進行操作處理

相關文章