当前位置:网站首页>uniapp H5 H5 在小程序中展示, 与微信小程序互相跳转

uniapp H5 H5 在小程序中展示, 与微信小程序互相跳转

2022-11-24 21:35:56zrong180106

1. 在public中的根目录index.html中引入

https://res.wx.qq.com/open/js/jweixin-1.3.2.js

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		 <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
	</body>

</html>

2. 并且记得在 mainfest.json 中设置

![image.png](https://img-blog.csdnimg.cn/img_convert/cb9f13a3e0345ad6612a5639ef2ffc2e.png#clientId=u4999da4d-96e1-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=327&id=ua121b07c&margin=[object Object]&name=image.png&originHeight=360&originWidth=1358&originalType=binary&ratio=1&rotation=0&showTitle=false&size=44179&status=done&style=none&taskId=u78d872ad-d7ed-4ff2-91b8-d9aebbccb08&title=&width=1234.545427787403)

3. 直接调用即可

在需要跳转到小程序的地方使用
跳转地址?变量名=xxx是携带的变量,在小程序中接收

jWeixin.miniProgram.navigateTo({
    
  url:'/pages/index/index?videoUrl=' + this.videoUrl
})

4. 在小程序中接收从H5携带过来的变量

小程序中,index.js


onLoad(options) {
    
  let that = this
  console.log('打开了小程序页面:options.videoUrl', options.videoUrl)
  this.setData({
    // 把从H5页面获取到的属性值赋给,供页面使用
    videoUrl:options.videoUrl
  })
  console.log('that.data.videoUrl:', that.data.videoUrl)
},

5. 小程序通过webview跳转H5

<web-view src='https://xxxxxxx.com'></web-view>
原网站

版权声明
本文为[zrong180106]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_44830060/article/details/127804527

随机推荐