微信小程序原生与 H5 交互方式

在微信小程序中,原生与 H5 页面(即 WebView 页面)之间的交互通常有以下几种方式:

1. 使用 postMessage 进行通信

微信小程序的 WebView 页面和原生小程序页面可以通过 postMessage 来进行数据传递。

WebView 页面向原生小程序发送消息: 在 WebView 页面中,使用 window.postMessage() 发送消息给原生小程序:

javascript 复制代码
window.postMessage({ data: 'Hello from H5!' });

原生小程序接收 WebView 消息: 在原生小程序的 WebView 组件中,使用 bindmessage 事件来接收消息:

javascript 复制代码
<web-view src="https://your-h5-url" bindmessage="onMessage"></web-view>

Page({
  onMessage(e) {
    console.log(e.detail.data); // 'Hello from H5!'
  }
});

原生小程序向 WebView 页面发送消息: 使用 web-view 组件的 postMessage 方法:

javascript 复制代码
this.selectComponent("#webview").postMessage({
  data: "Hello from Mini Program!"
});

2. 使用 wx.postMessage 发送消息

如果你在 WebView 中嵌入了 H5 页面,你还可以使用 wx.postMessage API,在小程序与 H5 页面之间进行通信。

原生小程序发送消息给 H5 页面:

javascript 复制代码
wx.createSelectorQuery().select('#webview').context(res => {
  const webview = res.context;
  webview.postMessage({ data: 'Hello from Mini Program!' });
}).exec();

H5 页面接收消息:

javascript 复制代码
H5 页面中使用 window.addEventListener('message', callback) 来接收消息:window.addEventListener('message', function (e) {
  console.log(e.data); // 'Hello from Mini Program!'
});

3. 使用 URL 参数

另一种常见的方式是通过 WebView 的 URL 传递参数。原生小程序可以在打开 WebView 页面时将数据附加在 URL 中,H5 页面通过 window.location 或 URL 解析来接收参数。

javascript 复制代码
<web-view src="https://your-h5-url?data=Hello"></web-view>

在 H5 页面中,可以通过 window.location.search 获取参数:

javascript 复制代码
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get('data'); // 'Hello'

4. 调用原生 API

微信小程序可以调用 wx.navigateToMiniProgram 来打开另一个小程序,实现与 H5 页面之间的间接交互。

总结

postMessage 是原生小程序和 H5 页面之间最常用的交互方式。也可以通过 URL 参数 传递数据,适用于简单的数据传递。需要注意的是,H5 页面和小程序之间的通信在安全性上会有所限制,确保数据交换时的安全性和可靠性。根据你的需求,可以选择合适的方式进行原生小程序与 H5 页面之间的交互。

相关推荐
2501_915918412 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长4 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq4 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞5 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长6 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue7 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
三脚猫的喵10 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
2501_9151063211 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬11 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
开发加微信:hedian11613 小时前
微信推客小程序系统开发技术实践
微信·小程序