效果图
小程序加载链接
微信嵌入链接代码相当简单
1、index.wxml加载一个web-view组件，动态绑定地址
<!--index.wxml--><view class="container"> <web-view src="{{ webSrc }}"></web-view></view>
2、js中动态修改加载的地址，这是为了后面分享什么用，其实也可以直接写上链接
// index.jsPage({ 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 = 0if (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代码就好了。后面这套代码还能嵌入支付宝小程序等哦，封装思路基本不变。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。