uniapp开发 App和h5通信

一个平平无奇的小高

已于 2023-02-01 17:36:13 修改

阅读量1.1k

点赞数

分类专栏：小程序 uniapp 文章标签： uni-app uniapp App开发 App和h5通信

于 2023-02-01 16:45:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44646343/article/details/128733870

版权

小程序同时被 2 个专栏收录

19 篇文章

订阅专栏

uniapp

5 篇文章

订阅专栏

在uniapp开发中，遇到支付模块选择了惠市宝支付方式。当前端接收到后台返回的H5支付页面链接并在webview展示时，需实现H5与App的通信。通过引入uni.webview.1.5.4.js，使用uni.webView.postMessage方法，H5页面可以在支付完成后向App发送消息，从而实现支付结果页的跳转。例如，H5页面根据用户操作发送不同页面的标识，App接收到消息后跳转至相应页面（如首页或订单列表页）。

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

需求： 最近在用uniapp开发APP，碰到一个需求，在支付模块我们选择的支付方式是惠市宝，调用后台接口，会返回给前端一个h5的链接，即惠市宝支付台链接，前端拿到链接之后，把这个h5链接放在webview里面，用户在支付完成后，返回到app的支付结果页，这个时候就需要用到h5向app通信，传送消息

代码：

下载uni.webview.1.5.4.js到本地，在main.js中引入，在h5页面调用uni.webView.postMessage向app传参；

// #ifdef H5
// 引入uni.webview.1.5.4.js
import '@/utils/webview/uni.webview.1.5.4.js';
// #endif

通过后端接口，拿到惠市宝的h5支付台链接，并跳转到webView页面；

let params = res.dataObj.htmlStr.split('?');
this.$routers.push('/pages/webView/webView', {
	"url": params[0],
	"param": params[1]
});

webview页面中，在<web-view> 的 message 事件回调event.detail.data中接收H5发送给App的信息；

<web-view :src="url" @message="handleMessage"></web-view>

【示例】：这里拿到h5页面传递的参数，根据传参跳转不同的页面；

// 接收h5传递的消息
handleMessage(e) {
	console.log("触发handleMessage了", e, "----------------------");
	if(e.detail.data[0].page == 'index'){ //首页
		this.$routers.switchTab("/pages/index/main");
	}else if(e.detail.data[0].page == 'order'){ //订单列表
		this.$routers.replace("/pages/order/index/main");
	}
}

在相应的H5页面通过postMessage来发送信息；
【示例】：在当前h5页面，点击首页和查看订单分别回到APP的首页和订单列表页；

<view class="successButton">
	<view class="left" @click="goIndex()">首页</view>
	<view class="right" @click="goOrderList()">查看订单</view>
</view>

goIndex() {
	// #ifdef H5
	// h5向app传参 去首页
	uni.webView.postMessage({
		data: {
			page: 'index'
		}
	});
	// #endif	
},
goOrderList() {
	// #ifdef H5
	// h5向app传参 去订单列表
	uni.webView.postMessage({
		data: {
			page: 'order'
		}
	});
    // #endif
}