效果圖
小程序加載鏈接
微信嵌入鏈接代碼相當簡單
1、index.wxml加載一個web-view組件,動態綁定地址
2、js中動態修改加載的地址,這是為了后面分享什么用,其實也可以直接寫上鏈接
// index.js
Page({
data: {
webSrc: ''
},
onLoad(options) {
let url = 'https://xcx.lycyll.com/#/index?m_p_f_p=1'
this.setData({

webSrc: url
})
}
})
趕緊試試吧,是不是發現頁面隨著路由切換,沒有提供返回按鈕,雖然可以用系統的返回事件,但是沒有返回按鈕覺得很奇怪。
擴展vue路由,適配小程序
1、因為有分享等操作微信小程序調用電子海圖,導致我們沒法固定認為某個頁面是第一個頁面,我們需要微信小程序函數內識別當前是否為小程序打開的第一個頁面,并使用參數的方式傳給vue(為1,代表第一個頁面),函數修改如下:
onLoad(options) {
let url = options.url;
if (url) {
url = decodeURIComponent(url)
let pages = getCurrentPages();
if (pages.length == 1) {
if (url.indexOf('?') > -1) {
url = url + '&m_p_f_p=1'
} else {
url = url + '?m_p_f_p=1'
}
}

} else {
url = 'https://xcx.lycyll.com/#/index?m_p_f_p=1'
}
this.setData({
webSrc: url
})
}
2、擴展,識別參數。
// 用到的基礎函數
function GetQueryString(name) {
let reg = new RegExp('([?]|&)' + name + "=([^&]*)(&|$)");
let r = window.location.href.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
// 放在函數覆蓋,擴展對象處理
let router = Object.create(orgin)

router.m_p_f_p = 0
if (GetQueryString('m_p_f_p') == 1) {
router.m_p_f_p = 1
}
3、擴展.push函數微信小程序調用電子海圖,讓第一個頁面的時候,調用小程序跳轉頁面函數。其他情況調用原來的push函數。
router.push = function () {
if (router.m_p_f_p == 1) {
let webUrl = ''
let location = arguments[0];
if (typeof location == 'string') {
let path = basePath + location;
webUrl = path;
} else {
// 獲取路徑,有的頁面用的name跳轉
let path = router.getPathWithRoute(location);
// 獲取參數
let args = router.getArgsWithRoute(location);

// 拼接參數
let arr = [];
for(let key in args){
arr.push(`${key}=${args[key]}`);
}
if (path.indexOf('?') > -1) {
path + '&' + arr.join('&')
} else {
path + '?' + arr.join('&')
}
path = basePath + path;
webUrl = path;
}
// 如果是微信小程序,調用微信的navigateTo,mpWxFunc封裝了微信相關的函數
if (browserEnv.checkEnvType(browserEnv.enum.WX_MINIPROGRAM)) {
mpWxFunc.navigateTo(webUrl);

return ;
}
}
// 其他情況使用原型上的push函數
router.__proto__.push.call(this, ...arguments)
};
4、go函數需要相反處理,如果最后一個頁面了,需要調用小程序的返回,或者返回頁面大于當前棧里面頁面數,也直接返回
router.go = function (n) {
// 判斷最后一個頁面,或者返回數大于當前頁面棧。customRouterData是前面為了動畫擴展的。
if (router.customRouterData.history && (router.customRouterData.history.length <= -n)) {
// 判斷是微信小程序
if (browserEnv.checkEnvType(browserEnv.enum.WX_MINIPROGRAM)) {
mpWxFunc.navigateBack()
return ;
}
}
router.__proto__.go.call(this, n)
}
到這里就基本完成了,前端開發只需要一心去寫vue代碼就好了。后面這套代碼還能嵌入支付寶小程序等哦,封裝思路基本不變。