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

問題描述

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

解決思路

mpvue的入口文件導入舊版路由配置文件

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

舊項目導入 舊項目(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() // 接口獲取refererlet 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）

轉載于:https://www.cnblogs.com/net-xiejun/p/9752692.html

總結

以上是生活随笔為你收集整理的小程序开发总结一：mpvue框架及与小程序原生的混搭开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。