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>

完事儿。

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

【小程序】当前“页面B”动态更改title，点击返回按钮，更改的标题会显示在“来源页面A”...
最近在做小程序的时候遇到这么一个有趣的问题,就是从A页面跳转到B页面,如果B页面需要在接口加载之后更改title, 并且如果接口请求过慢,还灭有请求完毕时就点击返回按钮回到A页面,这时B页面的请求会继 ...
Android 如何利用WebView组件套壳APP
序言有时候我们工作中很多项目并不会去专门做一个APP端,但是,我们却又需要这么一个APP端.这个时候WebView就可以很方便的帮助我们快速套壳出一个APP程序一.套壳APP 1.新建一个项目,把 ...
vue 路由参数变化，页面不刷新（数据不更新）解决方法
路由参数改变,页面数据不更新解决方法: http://localhost:8080/#test?id=1 http://localhost:8080/#test?id=2,参数切换后,数据未更新以下 ...
webview 无法调用uni_哥哥教你解决WebView无法打开网页的问题
WebSettings settings = main_webview.getSettings(); settings.setJavaScriptCanOpenWindowsAutomatically ...
电子琴仿真c语言程序,基于单片机简易电子琴仿真和源程序
#include #define KeyPort P1 unsigned char High,Low; //定时器预装值的高8位和低8位 sbit SPK=P3^7; //定义蜂鸣器 ...
微信小程序全局路由拦截
前言略微信小程序全局路由拦截方法1 目前微信小程序没有全局路由拦截.要想实现全局路由拦截,需要自己进行扩充.具体参考这里:微信小程序–路由拦截器. 实现思路: 替换Page的参数对象的onShow ...
uniapp微信小程序左上角返回按钮的监听
项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接 ...
阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法
路由设置:router/index.js main.js: { if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 i ...
阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍
这篇文章主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下路由设置:router/index.jsexport default new Router ...

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

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

最新文章

热门文章