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

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

前言

微信小程序提供了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'
  })
})

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/951932.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ORB-SALM3配置流程及问题记录

目录 前言 一、OPB-SLAM3基本配置流程 1.下载编译Pangolin 二、ORB-SLAM3配置 1.下载源码 2.创建ROS工作空间并编译ORB-SLAM3-ROS源码 3.尝试编译 三、运行测试 一、OPB-SLAM3基本配置流程 ORB-SLAM3是一个支持视觉、视觉加惯导、混合地图的SLAM&#xff08;Simultane…

RabbitMQ介绍与使用

RabbitMQ官网 RabbitMQ 介绍 RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;基于 AMQP&#xff08;高级消息队列协议&#xff09;标准&#xff0c;使用 Erlang 编程语言构建。它是消息队列&#xff08;MQ&#xff09;的一种&#xff0c;广泛应用于分布式系统中&#x…

自然语言处理之jieba分词和TF-IDF分析

jieba分词和TF-IDF分析 目录 jieba分词和TF-IDF分析1 jieba1.1 简介1.2 终端下载1.3 基本语法 2 TF-IDF分析2.1 什么是语料库2.2 TF2.3 IDF2.4 TF-IDF2.5 函数导入2.6 方法 3 实际测试3.1 问题解析3.2 代码测试 1 jieba 1.1 简介 结巴分词&#xff08;Jieba&#xff09;是一个…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

Opencv查找、绘制轮廓、圆形矩形轮廓和近似轮廓

查找、绘制轮廓、圆形矩形轮廓和近似轮廓 目录 查找、绘制轮廓、圆形矩形轮廓和近似轮廓1 轮廓查找和绘制1.1 轮廓查找1.1.1 函数和参数1.1.2 返回值 1.2 轮廓绘制1.2.1 函数和参数 1.3 步骤1.4 实际测试绘制轮廓 2 绘制近似轮廓2.1 函数和参数2.2 查找特定轮廓2.3 近似轮廓测试…

K8s Pod OOMKilled,监控却显示内存资源并未打满

1. 问题现象 pod一直重启&#xff0c;通过grafana查看&#xff0c;发现内存使用率并没有100%。 2. 排查过程 2.1 describe查看pod最新一次的状态 可以明显看到&#xff0c;最近一次的重启就是因为内存不足导致的。 2.2 describe 查看node节点状态 找到原因了&#xff0c;原来…

Knowledge Editing through Chain-of-Thought

题目 通过思路链进行知识编辑 论文地址&#xff1a;https://arxiv.org/abs/2412.17727 摘要 大型语言模型 (LLM) 在广泛的自然语言处理 (NLP) 任务中表现出卓越的能力。然而&#xff0c;由于频繁重新训练的成本很高&#xff0c;让这些模型与不断发展的世界知识保持同步仍然是一…

C语言Day14(c程序设计小红书+pta)

目录 &#xff08;一&#xff09;求总天数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;二&#xff09;十进制整数转换成R进制数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;三&#xff09;…

G1原理—3.G1是如何提升垃圾回收效率

大纲 1.G1为了提升GC的效率设计了哪些核心机制 2.G1中的记忆集是什么 3.G1中的位图和卡表 4.记忆集和卡表有什么关系 5.RSet记忆集是怎么更新的 6.DCQ机制的底层原理是怎样的 7.DCQS机制及GC线程对DCQ的处理 提升G1垃圾回收器GC效率的黑科技 G1设计了一套TLAB机制 快速…

算法(二)——一维差分、等差数列差分

文章目录 一维差分、等差数列差分一维差分例题&#xff1a;航班预订统计 等差数列差分例题&#xff1a;三步必杀例题&#xff1a;Lycanthropy 一维差分、等差数列差分 一维差分 差分解决的是 区间修改&#xff08;更新&#xff09;问题&#xff0c;特别是多次区间修改问题&…

nexus搭建maven私服

说到maven私服每个公司都有&#xff0c;比如我上一篇文章介绍的自定义日志starter&#xff0c;就可以上传到maven私服供大家使用&#xff0c;每次更新只需deploy一下就行&#xff0c;以下就是本人搭建私服的步骤 使用docker安装nexus #拉取镜像 docker pull sonatype/nexus3:…

StarRocks Awards 2024 年度贡献人物

在过去一年&#xff0c;StarRocks 在 Lakehouse 与 AI 等关键领域取得了显著进步&#xff0c;其卓越的产品功能极大地简化和提升了数据分析的效率&#xff0c;使得"One Data&#xff0c;All Analytics" 的愿景变得更加触手可及。 虽然实现这一目标的道路充满挑战且漫…

安卓app抓包总结(精)

前言 这里简单记录一下相关抓包工具证书的安装 burp证书安装 安装证书到移动设备(安卓7以后必须上传到设备系统根证书上) 导出证书 openssl x509 -inform DER -in cacert.der -out cacert.pem 转换格式 openssl x509 -inform PEM -subject_hash_old -in cacert.pem …

Nginx代理同域名前后端分离项目的完整步骤

前后端分离项目&#xff0c;前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue php 项目为例。直接上 server 模块的 nginx 配置。 server{ listen 80; #listen [::]:80 default_server ipv6onlyon; server_name demo.com;#二配置项目域名 index index.ht…

嵌入式C语言:二维数组

目录 一、二维数组的定义 二、内存布局 2.1. 内存布局特点 2.2. 内存布局示例 2.2.1. 数组元素地址 2.2.2. 内存布局图&#xff08;简化表示&#xff09; 2.3. 初始化对内存布局的影响 三、访问二维数组元素 3.1. 常规下标访问方式 3.2. 通过指针访问 3.2.1. 指向数…

Google发布图像生成新工具Whisk:无需复杂提示词,使用图像和人工智能将想法可视化并重新混合

Whisk 是 Google Labs 的一项新实验&#xff0c;可使用图像进行快速而有趣的创作过程。Whisk不会生成带有长篇详细文本提示的图像&#xff0c;而是使用图像进行提示。只需拖入图像&#xff0c;即可开始创建。 whisk总结如下&#xff1a; Whisk 是 Google 实验室最新的生成图像实…

Linux下jar包脚本工具

Jar包启动、停止、重启 文章目录 Jar包启动、停止、重启1、 新建脚本2、启动服务脚本代码3、停止服务脚本代码4、重启服务脚本5、赋予脚本可执行权利 1、 新建脚本 vim 脚本明字.sh2、启动服务脚本代码 #!/bin/bash# 设置Java应用的名称&#xff08;可根据实际情况修改&#…

相机和激光雷达的外参标定 - 无标定板版本

1. 实现的效果 通过本软件实现求解相机和LiDAR的外参&#xff0c;即2个传感器之间的三维平移[x, y, z]和三维旋转[roll, pitch, yaw]。完成标定后&#xff0c;可将点云投影到图像&#xff0c;效果图如下&#xff1a; 本软件的优势&#xff1a;&#xff08;1&#xff09;无需特…

Github出现复杂问题 无法合并 分支冲突太多 如何复原

目录 问题再现 解决思路 当然我所指的是在 main 分支开一个新的分支 删除本地文件夹 重新克隆 开一个新分支 切换分支 下载远程分支 文件覆盖 合并到主分支 ​​​​​​​问题再现 太复杂了 无法更改 编译器现状 全部崩溃了 无法更改 即使创建一个新的分支也无济于…

uniapp使用chooseLocation安卓篇

本文章全部以高德地图为例 代码 <view class"bottom"><button click"choose">定位</button> </view> choose() {uni.chooseLocation({success: function(res) {console.log(位置名称&#xff1a; res.name);console.log(详细地…