H5与小程序通信

coderMrcc

已于 2024-07-17 16:42:01 修改

阅读量1.4k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序微信小程序 html5

于 2024-07-17 14:40:57 首次发布

本文链接：https://blog.youkuaiyun.com/coderMrcc/article/details/140494139

一、H5中引入js

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

二、H5给小程序发送信号

// 退回上一步（目的是保证触发小程序可以收到H5的消息）
window.wx.miniProgram.navigateBack({
   
   delta:

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coderMrcc

关注关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序与H5通信：web-view内嵌页交互方案

小程序开发

06-01

1877

微信小程序凭借“无需安装、即点即用”的特性成为移动开发的热门平台，但某些复杂功能（如动态表单、可视化图表）仍需依赖H5的灵活性。微信提供的web-view教会你如何让小程序（宿主）与H5（内嵌页）像“邻居聊天”一样顺畅通信，覆盖单向消息传递、双向数据同步、事件响应等常见场景。本文将按照“概念→原理→实战→场景”的逻辑展开：先通过生活案例理解通信需求，再拆解web-view的通信机制，接着用代码实现双向交互，最后结合实际场景总结最佳实践。web-view组件。

微信小程序如何主动与H5通信？

王铁柱666的博客

01-28

1511

虽然微信官方提供了通信方式，但有时为了更灵活地实现通信，开发者可能会选择使用第三方库，如WebViewJavascriptBridge，来在WebView和JavaScript之间建立通信桥梁。JSSDK是微信提供的一种JavaScript库，允许在网页中调用小程序的能力。通过在H5页面中引入JSSDK，并配置合法的请求域名，可以实现与小程序的交互。URL Scheme是一种链接协议，通过在H5页面中设置特定格式的链接，可以实现跳转到小程序的功能，并携带参数进行交互。方法，用于从小程序向H5页面发送消息。

参与评论您还未登录，请先登录后发表或查看评论

小程序和h5页面之间的互相跳转传参

刺心的博客

04-28

7061

小程序跳转到 h5 页面 小程序代码： <web-view src="{{url}}" bindmessage="handlePostMessage"></web-view> onLoad: function (options) { this.setData({ url: decodeURIComponent(options.url), }); }, //...

记一次微信小程序与webviewH5通信

m0_70914870的博客

05-26

4833

微信小程序与H5通信是在日常开发中总会遇到的场景，我第一次接触的时候，由于没有经验，走了不少弯路，所以在这里分享一下自己的经验，希望能帮助到正在学习的同学，如有不妥，也欢迎同学们或者大佬批判指正。

h5和小程序通信

Hero_rong的博客

12-07

1531

相信大部分人可能都会遇到要在微信小程序里面嵌入h5，这个时候h5和小程序之间的通信就成了不可避免的一环，不用紧张，其实很简单。首先我们按照文档上的指示，在需要向小程序传递参数的页面引入。

小程序和h5通信

zhangqling的博客

07-25

6543

随着HTML5兴起，其独特的新特性，完全能够满足app开发需求，并且，相比于原生更容易入门，缩短开发周期，现在很少有纯原生的APP。

在 H5 页面和 uniapp 小程序之间进行数据通信

qq_69892545的博客

04-28

1908

在 H5 页面中使用 localStorage 来存储需要传递的数据，然后在小程序中使用 uni.getStorageSync() 或者 uni.setStorageSync() 来获取或设置 localStorage 中的数据。在 H5 页面中使用 URL 参数来传递数据，然后在小程序中使用 uni.getLaunchOptionsSync() 或者 onLaunch/onShow 生命周期函数来获取 URL 参数中的数据。（未完待续.....后面补上）

小程序和H5 之间的通信

weixin_39975379的博客

12-27

1766

H5能力跳转页面、特定时机向小程序发送消息、获取当前环境部分 jssdk 的接口分享时获得当前 h5 的url 判断是否在 小程序环境中 小程序向H5传参只能通过 url 链接带参数使用&来附加参数，并在网页中解析参数修改传参刷新页面 ...

复杂场景下的h5与小程序通信

厦门在乎科技

09-03

658

复杂场景下的h5与小程序通信一、背景在套壳小程序盛行的当下， h5调用小程序能力来打破业务边界已成为家常便饭，h5与小程序的结合，极大地拓展了h5的能力边界，丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。但在套壳小程序中，h5与小程序通信存在以下几个问题：注入小程序全局变量的时机不确定，可能调用的时候不存在小程序变量。和全局变量my相关的判断满天飞，每个使用的地方都需要判断是否已注入变量，否则就要创建监听。 小程序处理后的返回结果可能有多种，h5需要在具体使用

uniapp 小程序端与H5(非uniapp写的)之间的通信

01-28

在开发过程中，实现uniapp小程序端与H5端之间的通信是一个常见的需求。这一过程涉及的技术点和实现方式对于保证不同平台用户体验的连贯性和高效性至关重要。下面将详细介绍实现这两端通信需要关注的知识点。首先，...

微信小程序webview与h5通过postMessage实现实时通讯的实现

10-16

主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

详解小程序中h5页面onShow实现及跨页面通信方案

01-03

h5跳转小程序native页面（如：调用小程序地址选择能力，然后返回对应的地址信息给h5页面） h5跳转己方业务线的h5页面（内部页面交互，方式比较多样） h5跳转其它业务线的h5页面（如：交易流程，相关页面可能有...

微信小程序Webview与H5通信

qq_32430463的博客

11-26

2363

微信小程序中频繁传递数据到H5进行渲染，且需要保证页面不刷新，此方法验证有效

uniapp 微信小程序webview 和 h5数据通信

weixin_43073383的博客

12-08

3660

项目是uniapp编写，因为是先开发了h5和app，小程序是突然要用的，做兼容开发已经来不及，由于微信小程序webview载入h5 因为通信必须要特殊限制（网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。），不能满足使用，所以搞了一套特别low的通信机制，缺点是通信时候会有一个loading的过渡页面业务逻辑大致为： 1、微信小程序

H5小程序不同页面之间通讯解决方案

weixin_34380948的博客

11-24

444

小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同tab页面之间的数据交互等等。于是做了以下总结打开新的页面可以通过 navigator 组件来实现，通过url传参来实现，例如 <navigator url="../search/search?id=123" open-type="re...

微信小程序跳转H5页面以及彼此之间通信

wzb的博客

12-20

2963

微信小程序打开H5页面需要用到标签web-view，具体属性可见官方文档，这里记录一下两者之间的跳转和通信方法。

h5 和微信小程序web-view通信

qq_42038997的博客

06-30

873

【代码】h5 和微信小程序web-view通信。

uniapp微信小程序使用webview嵌套uniappH5，并实现通信

最新发布

03-18

<think>好的，我现在需要回答用户关于UniApp小程序如何与H5页面进行通信的问题。用户还希望有方法示例。首先，我得回忆一下UniApp的文档和相关技术点。根据用户提供的引用，UniApp和H5通信主要有两种方式：UniApp向H5发送数据，以及H5向UniApp发送消息。我记得UniApp使用WebView组件加载H5页面，而通信通常依赖于JavaScript的API。比如，UniApp可以通过WebView的API向H5传递数据，而H5可以通过uni.postMessage方法发送消息到UniApp。接下来，我需要考虑具体的实现步骤。首先，UniApp向H5发送数据可能是在WebView加载时通过URL参数传递，或者在加载完成后通过evalJS执行JavaScript代码。例如，在onReady事件中调用evalJS来修改H5页面的全局变量。这需要确保WebView已经加载完毕，否则evalJS可能不生效。然后是H5向UniApp发送消息。H5页面可以通过uni的SDK调用postMessage，而UniApp端需要监听@message事件来处理接收到的数据。需要注意的是，H5页面必须引入uni-webview-js库，否则无法使用uni.postMessage方法。这一点很重要，用户可能会忽略导致通信失败。用户可能遇到的常见问题包括：通信方法不生效，可能是因为没有正确引入库，或者事件监听没有正确绑定。例如，在UniApp的WebView组件中，必须添加@message监听器，而H5页面需要引入uni-webview-js的脚本。此外，跨域问题也可能影响通信，但通常在WebView中同源策略较为宽松，不过仍需注意。另外，引用中提到的H5返回App页面时可能需要通信，这时候可能需要通过H5发送消息触发UniApp的路由跳转。比如，在H5的表单提交成功后，调用uni.postMessage通知UniApp跳转到指定页面。在写示例代码时，需要确保UniApp的template部分有正确的WebView标签，并绑定load事件和message事件。H5页面的示例代码要展示如何引入uni-webview-js，并调用postMessage方法。同时，要提醒用户注意生命周期的问题，比如在WebView的onReady后再调用evalJS。最后，应该总结一下步骤，强调关键点，比如引入库、事件监听、数据格式等。可能还需要提到调试方法，比如在H5中使用console.log检查是否成功发送消息，或者在UniApp中打印接收到的数据来排查问题。</think>### UniApp小程序与H5页面通信方法及示例 UniApp通过`<web-view>`组件加载H5页面时，可通过以下两种方式实现双向通信： #### 一、UniApp向H5发送数据 1. **URL参数传递** 在加载H5页面时直接通过URL传参： ```html <web-view :src="`https://h5-domain.com/page.html?token=${token}``"></web-view> ``` H5页面通过`window.location.search`解析参数[^1]。 2. **evalJS方法注入** 通过WebView组件的`evalJS`执行H5页面的JavaScript代码： ```html <web-view ref="webview" @onPostMessage="handleH5Message" @load="onWebViewLoad"></web-view> ``` ```javascript onWebViewLoad() { this.$refs.webview.evalJS(`window.setUniAppData('${JSON.stringify(data)}')`); } ``` #### 二、H5向UniApp发送数据 1. **uni.postMessage API** H5页面引入`uni-webview-js`库后调用： ```html <script src="https://gitee.com/dcloud/uni-webview-js/raw/master/dist/uni.webview.1.5.4.js"></script> <script> uni.postMessage({ action: 'submit', data: { status: 'success' } }); </script> ``` UniApp监听`@message`事件接收数据： ```javascript handleH5Message(event) { const message = event.detail.data[0]; if (message.action === 'submit') { uni.navigateBack({ delta: 1 }); // 根据H5指令控制路由 } } ``` #### 完整示例 **UniApp端代码**： ```html <template> <web-view src="/hybrid/html/index.html" @message="handleH5Message" @load="onWebViewReady" ></web-view> </template> <script> export default { methods: { onWebViewReady() { // 向H5注入初始化数据 this.$refs.webview.evalJS(`window.uniAppToken = 'UNIAPP_123'`); }, handleH5Message(e) { const msg = e.detail.data[0]; if (msg.type === 'route') { uni.switchTab({ url: msg.target }); } } } } </script> ``` **H5页面代码**： ```html <!DOCTYPE html> <html> <head> <script src="https://gitee.com/dcloud/uni-webview-js/raw/master/dist/uni.webview.1.5.4.js"></script> </head> <body> <button onclick="sendToUniApp()">返回首页</button> <script> function sendToUniApp() { uni.postMessage({ type: 'route', target: '/pages/home/index' }); } </script> </body> </html> ``` #### 注意事项 1. **安全校验**：建议对H5发送的消息进行来源验证 2. **生命周期**：需等待WebView加载完成（`@load`事件触发后）再调用`evalJS` 3. **数据格式**：通信数据需为可序列化的JSON对象[^2]