vue路由拦截+微信小程序webview实现套壳仿真小程序,解决webview没有返回按钮

本文介绍了如何在Vue项目中利用路由拦截实现从H5页面到微信小程序webview的跳转,并在小程序环境中处理返回上一级的逻辑。通过设置微信配置、检测小程序环境以及封装跳转方法,确保页面在不同平台上的正确展示和交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习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 == "" 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值