[移动开发]vue路由拦截+微信小程序webview实现套壳仿真小程序，解决webview没有返回按钮

学习vue，想着搞一个案例吧，就把公司的一个小项目用vue翻新了一个版本，还被拿去正式使用了。领导又说要一个小程序版本的。要你NN个腿儿，原样的东西，套个小程序的壳吧。

小程序套壳有了，但是webview有个蛋疼的问题，H5页面没有返回上一级按钮，嘶~~

小程序新打开页面相当于在路由中添加一个历史记录，而webview相当于新开一个浏览窗口，webview的小程序页面路径也在历史记录里面，那要是H5跳转的时候拦截下来，跳转小程序webview页面再加载链接呢。想到这儿，这思路不就来了嘛。

直接上代码，vue路由拦截：

router.beforeEach((to, from, next) => {
    //判断是否在小程序环境中
	if(store.state.onMiniPrograms){
		var url = "https://www.xxx.com/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('https://www.xxx.com/Wxlogin/getsign', {
			params: {
				'url': url
			}
		}).then(data => {
			config = data.data;
			store.commit("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中，避免每次打开页面都需要检测一次
			store.commit("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:"https://www.xxx.com/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>

完事儿。