微信小程序开放能力web-view使用之h5页面与小程序页面交互传值

article/2025/11/10 13:34:31

 功能需求是:点击图一(图一是使用web-view内嵌的h5网页)的按钮,跳转小程序中的一个页面,其中第二个页面的所有数据都是从图一传过来的。

这个问题,首先我是看的官方文档,官方文档是这样写的:

但是看了之后有点不明白是什么意思,在什么情况下用,然后我就去百度,百度:web-view如何从h5页面传值给小程序 ,又或者微信小程序与h5页面交互传值等等等等,百度了好多,但大多数告诉我的都是使用这个bindmessage和postmessage,使用方法就是在h5页面postmessage,h5页面:

在小程序中如下:

然后就是在index.js中:

 

这样做了之后确实是能传过来,但是每次都要先点一次转发,才能接收到值,而且还不是实时的,那这样的话怎么用? 我总不能要求我的用户每次使用功能之前都点转发?????

————————————————————————————————————————————————————————以上全是坑,可能这个bindmessage并不是这样用的,但是说实话以我这个小白的水平暂时还不知道他的真正用处是什么。废话不说了,其实实现这个传值只需要使用最传统的url传参就可以了。以下是实现这个传值的正确做法:

 这里传值和接收时都使用了JSON的两个方法,是因为我的参数是对象数组,不是用的话接收时候全部是object

 小程序:

 

下面这个是h5页面接收小程序的参数:

 

OK,现在h5和小程序双向交互传值就实现了,希望对大家有帮助。 


http://chatgpt.dhexx.cn/article/07kjRoGo.shtml

相关文章

小程序 与 App 与 H5 之间的区别

小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C 实现的 web 转桌面应用&…

小程序webview与H5通信

文章目录 官方介绍注意事项H5和webview的通信webview到H5H5到webview内嵌H5缓存问题小程序关闭,H5音频仍然在播放问题 小程序内怎么调试web-viewtips 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 注意事项 网页内iframe的…

微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师 小程序简介 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 需求 微信小程序 H5 混合开发就是 在一个小程序中,采用部分小程序原生页面,部分…

微信小程序与webview H5交互(内嵌H5跳转原生页面)

在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互。下面介绍下实现微信小程序与webview H5交互的方法。 web-view功能描述 承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序…

Python:下载安装包

示例1:安装jieba包 1.全自动安装包 WindowsR:输入cmd pip install jieba / pip3 install jieba 由于下载总出现错误,故选择其他方法进行安装包的下载。 2.半自动安装 1)下载安装包的官方网站:jieba PyPI 网盘下…

Python和PyCharm的下载和安装(详细教程)

一.Python的下载和安装 1.点击下方链接进入Python官网: https://www.python.org/downloads 2.根据自己的需求选择python的版本,点击【Download】 3.等待下载完成 4.双击进行安装,勾选添加环境,点击自定义安装 5.勾选后点击【Ne…

Python的下载与安装

一.下载 1.直接下载:有安装包的话可直接下载并安装 2.官网下载:在浏览器的导航栏输入python.org后回车进入官网 (官网界面) (1)点击Downloads后选择相应的系统下载python,Windows系统选择Win…

电脑上如何安装python

第一步:下载Python安装包 在Python的官网 www.python.org 中找到最新版本的Python安装包,点击进行下载,请注意,当你的电脑是32位的机器,请选择32位的安装包,如果是64位的,请选择64位的安装包&a…

Python的下载和安装教程

今天学习python以及pycharm的下载和安装,参考了好几个博客,在此总结一下安装过程。 注意:在这里说明一下,如果要用pycharm进行python的开发,是要分别下载pycharm和python的,不要只安装pycharm就结束了。 …

怎么在python官网下载python,python的官方网址是什么

python的安装包怎么下载 下载python安装包的方法:1、访问python的官网地址“”2、点击Download下面的Latest后面的python版本3、在跳转后的页面用鼠标滑到最下面,显示的就是python的所有系统的安装包了更多Python知识,请关注:Pyt…

怎么在python官网下载python,官网python怎么下载安装

python怎么安装 在Python官网下载Python安装包,双击打开Python软件。勾选add Python 3.8 to PATH,点击install Now。 安装完成后,点击Close.打开电脑命令提示符,输入Python,按回车键运行。出现版本号,就说…

python官网下载安装教程

1.进入官网,选择自己所需要的版本 官网地址:https://www.python.org/downloads/ 2.选择对应系统的安装包下载 3.下载完成,点击安装包进行安装、配置 不建议安装在C盘 4.确认python是否安装成功 cmd输入命令python,返回安装的pyt…

python官方下载安装教程,python官方下载网站

python下载安装教程 python下载安装教程:自定义安装目录,点击install进行安装,打开cmd窗口,输入python,显示python的版本,安装成功。 Python语言更适合初学者,Python语言并不会让初学者感到晦…

python电脑上怎么下载-Python下载和安装图文教程[超详细]

如今python语言非常火,很多小伙伴都开学习python,但是很多小伙伴在安装python的时候遇到问题,下面我们就想详细介绍介绍python下载和安装的方法。 1、 打开python下载链接https://www.python.org/downloads/,点击自己想要的版本。…

Python的下载安装教程(很详细,初学者也能懂)

文章目录 Python的下载安装配置环境变量可提供远程搭建运行服务点击获取项目源码 Python的下载安装 1.进入Python的官网, http://www.python.org/download/ ,这里以下载Windows的Python为例 2.选择下载的版本是3.9.9,双击下载,注…

python软件下载安装教程,如何下载和安装python

python下载安装教程 首先打开浏览器,百度搜索【python】。出现搜索结果后,再进入下图所示的官网中。进入官网后,鼠标移至【download】再选择自己的系统。进入下载页面后,再选择python的版本。 下载完成后,再点击打开…

初入Python —— Python下载

Python是一个较为高级的编程语言。那要怎么使用它呢? 所以,我们要知道如何下载Python。 目录 前言 一、Python下载 1.下载方法(一) 2.下载方法(2) 3.下载方法(3)——Windows版本…

2021:Python的下载安装教程(很详细,初学者也能懂)

文章目录 Python的下载安装配置环境变量喜欢技术的,一起进群交流学习吧!!! Python的下载安装 1.进入Python的官网, http://www.python.org/download/ ,这里以下载Windows的Python为例 2.选择下载的版本是…

Python的下载安装(手把手教学)

程序员养成日记第一天:从自主下载安装软件开始~~~ 目录 windows版本 MacOS版本 windows版本 1、进入Python官网 https://www.python.org/downloads/ 2、点击Downloads中的Windows版本 3、进入Windows版本,进行Python版本的挑选,建议P…

BI数据分析从业者从零开始学习财务知识?有哪些入门书籍推荐

商业智能BI项目的特点是面向全行业、全领域的,并且大部分的商业智能BI分析是直接支撑到集团高层管理决策。支撑管理决策的经营分析又离不开财务分析,所以基本上每个商业智能BI项目都会涉及到财务分析相关的内容。 但财务又是一个非常专业的领域&#xf…