小程式開發總結一：mpvue框架及與小程式原生的混搭開發

村長很忙發表於2018-10-07
Vue框架

mpvue-native:小程式原生和mpvue程式碼共存

問題描述

mpvue和wepy等框架是在小程式出來一段時間之後才開始有的，所以會出現的問題有：需要相容已有的老專案，有些場景對小程式的相容要求特別高的時候需要用原生的方式開發

解決思路

  1. mpvue的入口檔案匯入舊版路由配置檔案

  2. 公共樣式 字型圖示遷移 app.wxss -> app.vue中less（mpvue的公共樣式）

  3. 舊專案匯入 舊專案(native)拷貝到dist打包的根目錄

這個要注意的就是拷貝的舊專案不能覆蓋mpvue打包檔案，只要避免資料夾名字衝突即可

mpvue-native使用

yarn dev xiejun // 本地啟動
yarn build xiejun // 打包
複製程式碼

開發者工具指向目錄 /dist/xiejun

github地址： github.com/xiejun-net/…

mpvue-native目錄結構

|----build
|----config
|----dist 打包後專案目錄
    |----<projetc1>
    |----<projetc2>
|----src 原始碼
    |----assets 通用資源目錄
    |----components 元件
    |----pages 公共頁面頁面
    |----utils 常用庫
    |----<project> 對應單個專案的檔案
        |----home mpvue頁面
            |----assets
            |----App.vue
            |----main.js
        |----native 原生目錄
            |----test 小程式原生頁面
                |---web.js
                |---web.wxml
                |---web.wxss
                |---web.json
        |----app.json 路徑、分包
        |----App.vue
        |----main.js mpvue專案入口檔案
|----static 靜態檔案
|----package.json
複製程式碼

拷貝舊專案到根目錄下

 new CopyWebpackPlugin([
    {
    from: path.resolve(__dirname, `../src/${config.projectName}/native`),
    to: "",
    ignore: [".*"]
    }
]),
複製程式碼

入口及頁面

const appEntry = { app: resolve(`./src/${config.projectName}/main.js`) } // 各個專案入口檔案
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js') // 各個專案的公共頁面
const projectEntry = getEntry(resolve('./src'), `${config.projectName}/**/main.js`) // 某個專案的mpvue頁面
const entry = Object.assign({}, appEntry, pagesEntry, projectEntry)
複製程式碼

多專案共用頁面

參考web中一個專案可以有多個spa，我們也可以一個專案裡包含多個小程式，多個小程式之間可以共用元件和公用頁面，在某些場景下可以節省很多開發時間和維護時間。

打包的時候根據專案入口打包 yarn dev <project>

分包

舊專案作為主包 其他根據資料夾 pages xiejun 分包作為兩個包載入 具體根據實際情況來分

// app.json檔案配置 pages 為主包
  "pages": [
    "test/web"
  ],
  "subPackages": [
    {
      "root": "pages",
      "pages": [
        "about/main"
      ]
    },
    { 
      "root": "xiejun", 
      "pages": [
          "home/main"
        ]
    }
  ],
複製程式碼

其他有關小程式開發坑和技巧

字型圖示的使用

網頁我們直接引用css就好//at.alicdn.com/t/font_263892_1oe6c1cnjiofxbt9.css

小程式只需要新建一個css檔案把線上的css程式碼拷貝過來放置全域性即可

image

關於小程式和mpvue生命週期

點此檢視mpvue的生命週期

從官方文件上生命週期的圖示上可以看到created是在onLaunch之前，也就是說每個頁面的created 出發時機都是整個應用開啟的時機，所以一般頁面裡面都是用mouted 來請求資料的。

如何判斷小程式當前環境

問題描述

釋出小程式的時候經常擔心配置錯誤的伺服器環境 而小程式官方沒有提供任何關於判斷小程式是體驗版還是開發版本的api

解決方案

熟悉小程式開發的不難發現小程式https請求的時候的referer是有規律的：https://servicewechat.com/${appId}/${env}/page-frame.html

即連結中包含了當前小程式的appId

  • 開發工具中 appId緊接著的dev是 devtools

  • 裝置上 開發或者體驗版 appId緊接著的env是 0

  • 裝置上 正式釋出版本 appId緊接著的env是數字 如： 20 發現是小程式的釋出版本次數，20代表釋出了20次

由此我們可以通過env 這個引數來判斷當前是什麼環境，

前端是無法獲取到referer的，所以需要後端提供一個介面,返回得到referer

程式碼

// https://servicewechat.com/${appId}/${env}/page-frame.html
// 預設是正式環境，微信官方並沒有說referer規則一定如此，保險起見 try catch
async getEnv() {
    try {
        let referer = await userService.getReferer() // 介面獲取referer
        let flag = referer.match(/wx2312312312\/(\S*)\/page-frame/)[1]
        if (flag === 'devtools') { // 開發工具
            // setHostDev()
        } else if (parseInt(flag) > 0) { // 正式版本
            // setHostPro()
        } else { // 開發版本和體驗版本
            // setHostTest()
        }
    } catch (e) {
        console.log(e)
    }
}
複製程式碼

Promise

官方文件上說Promise 都支援

實際測試發現其實在ios8上是有問題的

所以request.js

import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
複製程式碼

wx.navigateto返回層級問題

官方文件是說目前可以返回10層

實際情況是在某些機型上只能返回5層 和原來一樣

所以最好使用wx.navigateto跳轉不超過5層

壓縮相容問題

在微信開發者工具上傳程式碼的時候

務必把專案ES6轉ES5否則會出現兼問題

個人公眾號:程式設計師很忙（xiejun_asp）

小程式開發總結一：mpvue框架及與小程式原生的混搭開發

相關文章