效果图
小程序加载链接
微信嵌入链接代码相当简单
1、index.wxml加载一个web-view组件,动态绑定地址
<!--index.wxml-->
<view class="container">
<web-view src="{{ webSrc }}"></web-view>
</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、因为有分享等操作,导致我们没法固定认为某个页面是第一个页面,我们需要微信小程序onload函数内识别当前是否为小程序打开的第一个页面,并使用参数的方式传给vue(m_p_f_p为1,代表第一个页面),onload函数修改如下:
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、router扩展,识别参数。
// 用到的基础函数
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、扩展router.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代码就好了。后面这套代码还能嵌入支付宝小程序等哦,封装思路基本不变。