WebView 微信小程序跳转h5项目，h5项目拿到token

h5vue项目接收token，防止用户从微信跳转h5，token失效，用户体验性差

在App.vue文件中Mouted里面

 getUrlData() {let tempStr = window.location.hreflet tempArr = tempStr.split('?')[1] ? tempStr.split('?')[1].split('&') : []let returnArr = {}tempArr.forEach(element => {returnArr[element.split('=')[0]] = element.split('=')[1]})console.log(returnArr);return returnArr}

在uniapp项目中，

1新建webView的页面，实现小程序跳转h5页面

<template><view><!-- #ifdef MP --><web-view v-if="webURL" :src="webURL"></web-view><!-- #endif --></view>
</template><script>
import url from "../../common/config/baseUrl.js"
export default {data() {return {webURL: ''};},components: {},onLoad(option) {// console.log("url: " + JSON.stringify(url));//对路径进行匹配var url1 = option?.webURL;if(/*******/.test (url1)){this.webURL =decodeURIComponent(url1);}else if(/test/.test(url1)){this.webURL =decodeURIComponent(url1);}else{this.webURL = decodeURIComponent(url.url) + decodeURIComponent(url1);}// #ifdef H5window.location.href = this.webURL;// #endifconsole.log('url: ' + url1, this.webURL);},onShow() {},methods: {}
};
</script><style lang="scss" scoped></style>

2.在需跳转h5的页面上

 goJump(data,index) {//#ifdef MP/* type:1 内部  2外部 */if (data.type == 2) {//跳转外部链接let url1=data.url+"?token="+this.tokenuni.navigateTo({url: '../../web-view/web-view?webURL=' + encodeURIComponent(url1)});
// encodeURIComponent(url) 函数
//把字符串作为 URI 组件进行编码。
// encodeURIComponent(URIstring)// URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。//返回值 // URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。说明 // 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~* ' ( ) 。 //其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。} else {if(index==2){console.log("hjjj")let shopIndex=1uni.setStorageSync("shopIndex",shopIndex)console.log("shopIndex: " + JSON.stringify(shopIndex));uni.switchTab({url:data.url})}uni.navigateTo({url: data.url});}//#endif//#ifdef H5/* type:1 内部  2外部 */if (data.type == 2) {let url = '';//跳转外部链接if (/m/.test(window.location.href)) {//判断是否为正式环境url = 'https://m.*******.cn/' + data.url+"?token="+this.token;} else {url = 'https://test.*******.cn/' + data.url+"?token="+this.token;}window.open(url);} else {uni.navigateTo({url: data.url});}//#endif

WebView 微信小程序跳转h5项目，h5项目拿到token相关推荐

微信小程序跳转到第三方H5网页
我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:web-view 1.首先得通过微信公众平台配置业务域名,配置业务域名需要将校验文件上传到网站服务器 ...
微信小程序跳转公众号h5页面
小程序提供了web- view组件进行用来内嵌网页根据限制说明准备域名即可,开发阶断可以使用http的域名,在开发者工具中勾选不验证https证书即可,发布上线时必须使用https的域名. 同时需要 ...
微信小程序跳转h5链接(web-view)
微信小程序跳转h5链接通常使用web-view当容器,来打开h5链接 1.了解web-view以及功能支持能力: web-view是从基础库 1.6.4 开始支持,低版本需做兼容处理.web-vie ...
微信小程序跳转第三方H5的方法
使用web-view标签进行跳转首先建立一个新的页面,这个页面就是为了第三方H5页面准备的. 在index.wxml中,写以下代码 <web-view src="{{h5url}}& ...
微信小程序跳转到H5网页
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现 ...
【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
关于微信小程序跳转到H5，然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
uni-app开发h5点击跳转到h5，微信小程序跳转到h5
<imageclass="tvcBu"@click="toUrl"mode="aspectFit"src="../../st ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...

WebView 微信小程序跳转h5项目，h5项目拿到token

WebView 微信小程序跳转h5项目，h5项目拿到token相关推荐

最新文章

热门文章