首页 > 编程语言 >小程序与内嵌网页的数据通信

小程序与内嵌网页的数据通信

时间:2025-01-07 15:04:15浏览次数:3  
标签:postMessage 内嵌 网页 数据通信 程序 H5 miniProgram wx

小程序与内嵌网页的数据通信

前言

微信小程序提供了web-view组件,允许开发者在小程序中嵌入网页。然而,由于小程序和网页运行在不同的环境中,它们之间的通信就需要依赖特定的机制来实现。然而我们日常的需求中,很多的时候都涉及到小程序内嵌网页和小程序之间进行数据通信的情况。这篇文章是我自己总结的微信小程序与内嵌web-view中网页通信的一些方法。

小程序向内嵌网页传递数据

通过修改web-view的src属性:可以在src中附加参数,然后在网页中解析这些参数(这种方式的操作类似于在网页中嵌入 iframe)。例如

<web-view src="{{url}}"></web-view>

url: https://www.a.com?id=123&name=456

或者在小程序中设置url时,可以附加参数:

this.setData({
  url: `${this.data.url}?param=value`
});

网页向小程序传递数据

使用wx.miniProgram.postMessage:在H5页面中,可以使用wx.miniProgram.postMessage向小程序发送消息。例如:

wx.miniProgram.postMessage({
  data: { message: 'Hello from H5' }
});

在小程序中,需要在web-view组件上绑定bindmessage事件来接收消息:

<web-view bindmessage="getMessage"></web-view>

小程序的JavaScript中处理消息:

Page({
  getMessage(e) {
    console.log(e.detail.data); // 获取到的消息数组
  }
});

注意,消息只有在特定时机(如小程序后退、组件销毁、分享等)才会被触发。比如说:

  1. H5刷新本页:wx.miniProgram.redirectTo
  2. H5 页面跳转:wx.miniProgram.navigateTo
  3. H5回退页面:wx.miniProgram.navigateBack

如果不加这些具体的操作,我们在微信开发者工具端会收到这样的一个信息

invokeAppService postMessage {message: "Hello from H5"} 2

并没有收到相对应的message事件打印的内容,然后我们修改代码:

wx.miniProgram.postMessage({
  data: { message: 'Hello from H5' }
});
wx.miniProgram.navigateBack();

不出意外的话会得到我们想要的结果,但是有些时候还是会出意外?就是当我们添加了当前带 web-view 的页面为编译页面的时候,使用了 wx.miniProgram.navigateBack();依旧会的得到invokeAppService postMessage {message: "Hello from H5"} 2这样的结果。

我们只需要略微调整即可:

const $button = document.getElementById('btn')
$button.addEventListener('click', () => {
  wx.miniProgram.postMessage({
    data: { message: 'Hello from H5' }
  });
  wx.miniProgram.redirectTo({
    url: '/pages/Test/WorkWebView/WorkWebView'
  })
})

或者移除编译选项也是能够得到我们想要的结果的。

标签:postMessage,内嵌,网页,数据通信,程序,H5,miniProgram,wx
From: https://blog.csdn.net/caosiyuan1991/article/details/144985080

相关文章

  • 前端实现xlsx文件的读取并网页编辑,结合exceljs和x-data-spreadsheet,参考
    1.安装依赖确保你已经安装了x-data-spreadsheet和exceljs,以及中文语言包:npminstallx-data-spreadsheetexceljs或者yarnaddx-data-spreadsheetexceljs2.导入和配置x-data-spreadsheet在你的Vue组件中,正确导入x-data-spreadsheet和中文语言包,并设置语言为中......
  • Window迷你网页服务器MyWebServer v3.8.195支持php
    前言全局说明Window迷你网页服务器MyWebServerv3.8.195支持php一、说明1.1老版本说明、历史版本下载、php下载:https://www.cnblogs.com/wutou/p/18655971二、MyWebServerv3.8.195支持php2.12.2免责声明:本号所涉及内容仅供安全研究与教学使用,如出现其他风险......
  • 网页元素的属性
    目录1.简介2.全局属性2.1id2.2class2.3title2.4tabindex2.5accesskey2.6style2.7hidden2.8lang,dir2.9translate2.10contenteditable2.11spellcheck2.12data-属性2.13事件处理属性1.简介网页元素的属性(attribute)可以定制元素的行为,不同的属性会......
  • uniapp - 详解使用高德地图在地图上实现绘制边界/点聚合/行政区域高亮等功能,Uniapp高
    效果图在uni-app手机h5网页网站/支付宝微信小程序/安卓app/苹果app/nvue等(全平台兼容)开发中,实现各端都兼容的“安装使用高德地图并实现点聚合/地图绘制边界部分高亮显示”,高德地图点聚合标记及高德地图绘制行政边界等,标点窗体信息展示,在高德地图上标点及卡片气泡框面板......
  • 如何解决服务器密码修改后内部网页访问报错问题
    问题描述: 在修改了服务器密码之后,网站系统和内部网页访问出现了报错。这种情况不仅影响了日常的工作效率,还可能导致数据无法正常访问或更新。用户希望了解具体的排查步骤,并确保问题能够得到彻底解决。解决方案: 当您修改了服务器密码后,如果遇到内部网页访问报错的问题,首先需要检......
  • C# 内嵌数据库 SQLite
    最近,看到一个软件,软件是使用的内嵌数据库。我对这个东西没有实践过,今天突然想亲手做一做!。关于SQLIte的资料我就不多说了,网上都有。我自己也整理了一部分,基本上可以对SQLite有个全面的了解了。我这里就不废话了,直接上我自己的代码。1:首先要先下载一个SQLite的C#开发的支持的东西......
  • htmlcss网页设计与制作———快乐星猫(HTML+CSS)4页
             一、......
  • 142. Web前端网页案例——【Bootstrap框架家居装饰公司响应式自适应网页(13页)】 大学生
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐♬♬♬欢迎光临我的CSDN!这里是Web前端网页案例大集汇,有各行各业的前端网页案例,每天会持续更新!如果你对Web前端......
  • 211. 大学生HTML5期末大作业 ―【 可爱的宠物狗主题网页(22页)】 Web前端网页制作 html5
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页!Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等,更多优质博客文章......
  • 1. 大学生HTML5期末大作业 ―【香港旅游主题网页(4页)】 Web前端网页制作 html5+css3+
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐一、网页概述本实例应用html5+css3+js:div+css、图片轮翻、搜索等,代码精简。本网页支持如Dreamweaver、HBuild......