微信小程序和H5之间互相跳转互相传值

Posted 2023-04-05 三个木马人

最近又开始写小程序了，刚好遇到微信小程序和内嵌 H5 之间来回跳转，来回交互；这里记录一下微信小程序和 H5 之间交互的实现；（我的小程序是通过 un-app 框架来写的，内部代码基本都是 vue）

文章目录

• • • • 一、微信小程序跳转 H5
      • • 1、web-view
      • 二、H5跳微信小程序
      • • 1、H5 直接跳到微信小程序
        • 2、内嵌H5跳转到微信小程序
      • 三、微信小程序传值给内嵌H5
      • • 1、路径传参
      • 四、内嵌H5传值给微信小程序
      • • 1、用 postMessage
        • 2、路径传参

一、微信小程序跳转 H5

1、web-view

微信小程序官方提供了 web-view 组件来实现微信小程序跳转到 H5 页面，实现的方式也很简单，具体实现方式如下：
1、新建一个页面用来单独存放 web-view 组件，并且所有的内嵌 H5 都可以通过这个页面来实现跳转；

//web-view
<web-view :src="url"></web-view>
export default
	data()
		return
			url:''
		
	,
	onLoad(option)
		this.url = option.url
	

其他小程序页面跳转只需要将 H5 的地址拼接在路径上；

//其他小程序页面
let url = 'xxxx';
uni.navigateTo(
	url: `/pages/webview/webview?url=$url`
)

二、H5跳微信小程序

H5 往微信小程序跳转需要借助微信 JS-SDK（官方文档），官方提供的是引入 js 文件的方式来使用微信 JS-SDK；当然在 vue 的项目里我们还可以以依赖的方式来安装：weixin-js-sdk；

1、H5 直接跳到微信小程序

可以借助微信 sdk 里面的标签（ wx-open-launch-weapp）直接跳转；不过这种方式需要申请配置：

1. 已认证的服务号（公众号），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn  padding: 12px </style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>

这种方式可以跳转到任何小程序，不过需要用户的点击操作才能跳转，跳转的同时，H5页面可以把需要传递的参数通过 path 路径拼接的方式将参数传递过去；
可参考：开发标签说明文档

2、内嵌H5跳转到微信小程序

这种不需要配置，直接就可以通过微信 sdk 提供的方法来实现跳转；注意：只能跳转回当前小程序；

wx.miniProgram.navigateTo(url:'')
wx.miniProgram.navigateBack(url:'')
wx.miniProgram.switchTab(url:'')
wx.miniProgram.reLaunch(url:'')
wx.miniProgram.redirectTo(url:'')

完整的操作应该是：

//先判断当前环境是小程序环境
wx.miniProgram.getEnv(function(res)
	if(res.miniprogram)
		//跳转到小程序页面
		wx.miniProgram.navigateTo(
			url:"/pages/xxx"
		)
	
)

三、微信小程序传值给内嵌H5

1、路径传参

小程序直接通过修改 web-view 的 src 属性就行了，将需要传递的参数拼接在路径上，H5 页面之间通过 query 来拿参数；

//其他小程序页面
let url = 'xxxx?name=xxx&number=123';
uni.navigateTo(
	url: `/pages/webview/webview?url=$url`
)

四、内嵌H5传值给微信小程序

以下两种方式都需要在 H5 的 index.html 页面引入下面 js：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

1、用 postMessage

在 web-view 组件上有一个属性 bindmessage ，网页向小程序 postMessage 时会触发并接收消息；

//web-view
<web-view :src="url" @message="getMessage"></web-view>
export default
	data()
		return
			url:''
		
	,
	onLoad(option)
		this.url = option.url
	
	methods:
		getMessage(e)
			//接收参数，也可以跳转到小程序其他页面将参数传递过去
			console.log(e.detail)
		
	

//H5页面
wx.miniProgram.postMessage( data: name: 'xxx' )

2、路径传参

调用微信 wx.miniProgram API 跳转到小程序页面时，通过路径拼接把参数传递过去；

wx.miniProgram.navigateTo(
  url："/pages/xxx/xxx/xxx?name=xxx"
);

小程序与H5如何互相跳转

参考技术A 需要用到小程序的web-view， 官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：

注：当在微信开发中工具里返回“"base_resp":"ret":-1”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”

因为外部h5无法跳转到小程序，因此需要把h5内嵌到小程序的web-view中。
一：首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5：

二：然后在内嵌的网页里引入js，调用wx.miniProgram.navigateTo跳转小程序方法，可在url后拼接要传的参数：

三：小程序接受参数的页面：
index.wxml:

index.js

这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数

原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流