学习vue，想着搞一个案例吧，就把公司的一个小项目用vue翻新了一个版本，还被拿去正式使用了。领导又说要一个小程序版本的。要你NN个腿儿，原样的东西，套个小程序的壳吧。
小程序套壳有了，但是webview有个蛋疼的问题，H5页面没有返回上一级按钮，嘶~~
小程序新打开页面相当于在路由中添加一个历史记录，而webview相当于新开一个浏览窗口，webview的小程序页面路径也在历史记录里面，那要是H5跳转的时候拦截下来，跳转小程序webview页面再加载链接呢。想到这儿，这思路不就来了嘛。
直接上代码，vue路由拦截：
router.beforeEach((to, from, next) => {//判断是否在小程序环境中if(store.state.onMiniPrograms){var url = "/Public/activity/#"+to.path;miniProgramNavigateTo(url);}else{next();}})
微信配置：
import http from "./http.js"import store from '../store/index'import wx from "weixin-js-sdk"//微信配置方法const weixinConfig = async () => {var config = store.state.weixinConfig;if (config.appId == "" || config.appId == null || config.appId == undefined) {var url = location.href;var index = url.indexOf("#");if (index > 0) {url = url.substring(0, index);}url = encodeURIComponent(url);//同步请求接口获取签名await http.get('/Wxlogin/getsign', {params: {'url': url}}).then(data => {config = data.data;mit("setWeixinShareConfig", config);})}//微信基本配置wx.config({debug: false,appId: config.appId,timestamp: config.timestamp,nonceStr: config.nonceStr,signature: config.signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo']});}//检测是否是小程序环境下打开const detectMiniprograms = () => {wx.miniProgram.getEnv(function(res) {if (res.miniprogram) {//将小程序环境状态记录在store中，避免每次打开页面都需要检测一次mit("setOnMiniPrograms", true);}})}//封装跳转小程序的方法const miniProgramNavigateTo = (url) => {wx.miniProgram.navigateTo({url: '/pages/index/index?url=' + encodeURI(url),success: function() {console.log('success')},fail: function() {console.log('跳转回小程序的页面fail');},});}//导出export {detectMiniprograms,miniProgramNavigateTo}
Vue store记录状态
state: {weixinConfig:{},//微信配置onWeixin: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,微信环境onMiniPrograms:false,//微信小程序环境},mutations: {setWeixinShareConfig(state,config){state.weixinConfig = config;},setOnMiniPrograms(state,status){state.onMiniPrograms = status;}},
小程序js：
Page({data: {//默认webview链接webSrc:"/Public/activity/#/",},onLoad: function (e) {//接收H5跳转小程序后的参数链接，替换webview链接if(e.url !== "" && e.url !== null && e.url !== undefined){this.setData({webSrc: e.url,})}},})
小程序wxml
<web-view src="{{webSrc}}"></web-view>
完事儿。
