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

問(wèn)題描述

mpvue和wepy等框架是在小程序出來(lái)一段時(shí)間之后才開(kāi)始有的，所以會(huì)出現(xiàn)的問(wèn)題有：需要兼容已有的老項(xiàng)目，有些場(chǎng)景對(duì)小程序的兼容要求特別高的時(shí)候需要用原生的方式開(kāi)發(fā)

解決思路

mpvue的入口文件導(dǎo)入舊版路由配置文件

公共樣式 字體圖標(biāo)遷移 app.wxss -> app.vue中l(wèi)ess（mpvue的公共樣式）

舊項(xiàng)目導(dǎo)入 舊項(xiàng)目(native)拷貝到dist打包的根目錄

這個(gè)要注意的就是拷貝的舊項(xiàng)目不能覆蓋mpvue打包文件，只要避免文件夾名字沖突即可

mpvue-native使用

yarn dev xiejun // 本地啟動(dòng) yarn build xiejun // 打包

開(kāi)發(fā)者工具指向目錄
/dist/xiejun

github地址： https://github.com/xiejun-net/mpvue-native

mpvue-native目錄結(jié)構(gòu)

|----build |----config |----dist 打包后項(xiàng)目目錄|----<projetc1>|----<projetc2> |----src 源碼|----assets 通用資源目錄|----components 組件|----pages 公共頁(yè)面頁(yè)面|----utils 常用庫(kù)|----<project> 對(duì)應(yīng)單個(gè)項(xiàng)目的文件|----home mpvue頁(yè)面|----assets|----App.vue|----main.js|----native 原生目錄|----test 小程序原生頁(yè)面|---web.js|---web.wxml|---web.wxss|---web.json|----app.json 路徑、分包|----App.vue|----main.js mpvue項(xiàng)目入口文件 |----static 靜態(tài)文件 |----package.json

拷貝舊項(xiàng)目到根目錄下

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

入口及頁(yè)面

const appEntry = { app: resolve(`./src/${config.projectName}/main.js`) } // 各個(gè)項(xiàng)目入口文件 const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js') // 各個(gè)項(xiàng)目的公共頁(yè)面 const projectEntry = getEntry(resolve('./src'), `${config.projectName}/**/main.js`) // 某個(gè)項(xiàng)目的mpvue頁(yè)面 const entry = Object.assign({}, appEntry, pagesEntry, projectEntry)

多項(xiàng)目共用頁(yè)面

參考web中一個(gè)項(xiàng)目可以有多個(gè)spa，我們也可以一個(gè)項(xiàng)目里包含多個(gè)小程序，多個(gè)小程序之間可以共用組件和公用頁(yè)面，在某些場(chǎng)景下可以節(jié)省很多開(kāi)發(fā)時(shí)間和維護(hù)時(shí)間。

打包的時(shí)候根據(jù)項(xiàng)目入口打包 yarn dev <project>

分包

舊項(xiàng)目作為主包
其他根據(jù)文件夾 pages xiejun 分包作為兩個(gè)包加載
具體根據(jù)實(shí)際情況來(lái)分

// app.json文件配置 pages 為主包"pages": ["test/web"],"subPackages": [{"root": "pages","pages": ["about/main"]},{ "root": "xiejun", "pages": ["home/main"]}],

其他有關(guān)小程序開(kāi)發(fā)坑和技巧

字體圖標(biāo)的使用

網(wǎng)頁(yè)我們直接引用css就好//at.alicdn.com/t/font_263892_1oe6c1cnjiofxbt9.css

小程序只需要新建一個(gè)css文件把在線的css代碼拷貝過(guò)來(lái)放置全局即可

關(guān)于小程序和mpvue生命周期

點(diǎn)此查看mpvue的生命周期

從官方文檔上生命周期的圖示上可以看到created是在onLaunch之前，也就是說(shuō)每個(gè)頁(yè)面的created 出發(fā)時(shí)機(jī)都是整個(gè)應(yīng)用開(kāi)啟的時(shí)機(jī)，所以一般頁(yè)面里面都是用mouted 來(lái)請(qǐng)求數(shù)據(jù)的。

如何判斷小程序當(dāng)前環(huán)境

問(wèn)題描述

發(fā)布小程序的時(shí)候經(jīng)常擔(dān)心配置錯(cuò)誤的服務(wù)器環(huán)境
而小程序官方?jīng)]有提供任何關(guān)于判斷小程序是體驗(yàn)版還是開(kāi)發(fā)版本的api

解決方案

熟悉小程序開(kāi)發(fā)的不難發(fā)現(xiàn)小程序https請(qǐng)求的時(shí)候的referer是有規(guī)律的：https://servicewechat.com/${appId}/${env}/page-frame.html

即鏈接中包含了當(dāng)前小程序的appId

• 開(kāi)發(fā)工具中 appId緊接著的dev是 devtools

• 設(shè)備上 開(kāi)發(fā)或者體驗(yàn)版 appId緊接著的env是 0

• 設(shè)備上 正式發(fā)布版本 appId緊接著的env是數(shù)字 如： 20 發(fā)現(xiàn)是小程序的發(fā)布版本次數(shù)，20代表發(fā)布了20次

由此我們可以通過(guò)env 這個(gè)參數(shù)來(lái)判斷當(dāng)前是什么環(huán)境，

前端是無(wú)法獲取到referer的，所以需要后端提供一個(gè)接口,返回得到referer

代碼

// https://servicewechat.com/${appId}/${env}/page-frame.html // 默認(rèn)是正式環(huán)境，微信官方并沒(méi)有說(shuō)referer規(guī)則一定如此，保險(xiǎn)起見(jiàn) try catch async getEnv() {try {let referer = await userService.getReferer() // 接口獲取refererlet flag = referer.match(/wx2312312312\/(\S*)\/page-frame/)[1]if (flag === 'devtools') { // 開(kāi)發(fā)工具// setHostDev()} else if (parseInt(flag) > 0) { // 正式版本// setHostPro()} else { // 開(kāi)發(fā)版本和體驗(yàn)版本// setHostTest()}} catch (e) {console.log(e)} }

Promise

官方文檔上說(shuō)Promise 都支持

實(shí)際測(cè)試發(fā)現(xiàn)其實(shí)在ios8上是有問(wèn)題的

所以request.js

import Es6Promise from 'es6-promise' Es6Promise.polyfill()

wx.navigateto返回層級(jí)問(wèn)題

官方文檔是說(shuō)目前可以返回10層

實(shí)際情況是在某些機(jī)型上只能返回5層 和原來(lái)一樣

所以最好使用wx.navigateto跳轉(zhuǎn)不超過(guò)5層

壓縮兼容問(wèn)題

在微信開(kāi)發(fā)者工具上傳代碼的時(shí)候

務(wù)必把項(xiàng)目ES6轉(zhuǎn)ES5否則會(huì)出現(xiàn)兼問(wèn)題

個(gè)人公眾號(hào):程序員很忙（xiejun_asp）

轉(zhuǎn)載于:https://www.cnblogs.com/net-xiejun/p/9752692.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。