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

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地址： https://github.com/xiejun-net/mpvue-native

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代碼拷貝過來放置全局便可

關於小程序和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）