小程序内嵌h5页面分享_微信小程序webview内页面分享

6ef693e7c4fd24981781739ce9c17cb5.png

因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面。

先了解一下 web-view 组件的限制,web-view 是承载网页的容器,会自动铺满整个小程序页面。目前个人类型小程序不支持使用。

src 属性里放置 webview 要打开的网页链接,需要注意的是在管理后台配置要访问网页的域名,否则生产模式无法进行访问。开发版和体验版可以通过点击小程序右上角三个点打开调试来进行访问。

小程序页面转发分享需要自身定义了一个转发的相关事件 onShareAppMessage,这个事件在设置之后可以通过点击小程序右上角的三个点来触发,也可以通过为小程序页面添加 button 标签,设置 button 的属性 open-type=”share” 来触发。

webview 是内嵌的网页,内部页面无法直接调起小程序的转发。

这个需求实现的特殊之处在于要分享的页面为 webview 中的页面,而 webview 作为一个容器,它放在了小程序的一个页面中,我们所看到的页面跳转都是在这个容器中进行的,小程序无法直接获取容器的跳转路径。

所以为了实现 webview 中的页面分享,把 h5 页面地址作为参数传输,在接收的页面中取出并赋值到当前页面 webview 中的 src 中,即可进行展示。

如何拿到 webview 中当前的页面链接,以及一些动态参数如何传递给小程序?

动态参数包括要跳转的 h5 页面地址,分享链接展示的图片这些参数需要通过 h5 页面来进行获取,然后 h5 再传输给小程序,小程序分享的时候进行携带。

查阅开发文档 webview 看到 bindmessage 属性,网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data 是多次 postMessage 的参数组成的数组。

H5 网页需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序传输参数。

webview 通过 bindmessage 定义的方法接收 h5 传输的数据,需要注意的是,每次发送数据后数据都会添加到 e.detail.data 中的数组,并不会清除掉上一次传递的数据,所以我们取数组的最后一位元素。

由此,h5 页面引入 JSSDK 1.3.2,使用 wx.miniProgram.postMessage 发送参数,小程序页面使用 webview 的 bindmessage 属性接收参数即可完成动态参数的传递。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shell shift与{}_一文掌握shell脚本中shift的用法及功能

概述今天主要介绍下shell脚本中shift的一些用法,这个命令还是相对比较少见的。一、shift介绍shift命令用于对参数的移动(左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本)。简而言之&…

redisTemplate设置key零点过期,生成自增的单号

public String getId() {String key "finance:funs:code";Long incr getIncr(key);if (incr 0) {incr getIncr(key);//从0001开始}DecimalFormat df new DecimalFormat("0000");//四位序列号String format df.format(incr);return format;}public Lo…

计算机网络基础:常见的网络传输介质

传输介质是信号传递的媒体,常用的网络传输介质包括有线介质(双绞线、同轴电缆、光纤等)和无线介质(微波、红外线、激光等)。 1、双绞线 双绞线是目前最普遍的传输介质,分为两类:屏蔽双绞线&…

java 多项式拟合最多的项数_Matlab概率统计与曲线拟合

一、二项分布二项分布来源于伯努利试验 (事件发生概率 ) :含义为独立重复N次试验后, 事件总共发生k次的概率分布函数 二项分布记为 binopdf 获得事件共发生次的概率 binocdf 为事件最多发生次的概率 binornd 将生成一个服从二项分布 规模为 的随机矩阵二项分布的数字特征…

mysql -- MAC下安装配置mysql

1:进入官网,链接是 https://dev.mysql.com/downloads/mysql/ 点击第一个dmg文件,download 2:点击 No thanks, just start my download. 3:下载到本地到dmg文件 4:安装MySQL,双击 mysql.dmg 文件,进行安装。 注意:安装…

负载均衡配置与使用

Nginx负载均衡的理解 Nginx是一个轻量级的、高性能的WebServer,他主要可以干下面两件事: 作为http服务器(和apache的效果一样) 作为反向代理服务器实现负载均衡 现在Nginx到处都可以见到,经常会看到宕机后的网页会显示…

计算机网络基础:网络分类和拓扑结构知识笔记

​​​​​​​1、计算机网络分类 城域网、广域网、局域网网对比 网络分类 缩写 分布距离 计算机分布范围 传输速率范围 局域网 LAN 10、100、1000m左右 房间、楼寓、校园 4Mb/s- 1Gb/s 城域网 MAN 10KM左右 城市 50Kb/s-100Mb/s 广域网 WAN 100KM左右 国家或…

php发送数据到视图格式_PHP-FPM的相关知识的深度解释

一、需要搞清楚几个名词概念1. CGI(Common Gateway Interface,CGI)通用网关接口, 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。CGI 应用程序能与浏览器进行交互,还可通过数据API与数据库服…

stm32超声波测距代码_干货!特斯拉Autopilot核心传感器解读超声波雷达篇

加入高工智能汽车行业群(自动驾驶行业4群,车联网智能座舱3群,智能商用车行业群),加微信:15818636852,并出示名片,仅限智能网联汽车零部件及OEM厂商。目前为止,特斯拉的Autopilot一共经历了三代硬…

计算机网络:网络设备知识笔记

网络设备是实现计算机网络实现用户通信和交互信息的硬件基础。常用的网络设备有中继器、网桥、路由器、集线器等。 1、网络传输介质互联设备 网络线路和用户节点具体衔接时,需要网络传输介质的互联设备。比如T型头(同轴电缆连接器)、收发器、…

执行git命令时提示秘钥权限太开放‘Permissions 0644 for ‘/Users/liuml/.ssh/id_rsa_tz‘ are too open.’

执行git命令时提示秘钥权限太开放‘Permissions 0644 for /Users/liuml/.ssh/id_rsa_tz are too open.’ 报错如下 这个问题是由于 权限的问题,需要文件设置权限: chmod 600 *

eclipse折叠if语句块_Python学习日志01判断 if 语句

1.条件判断语句(if语句)在python中,if语句就是用来进行判断的,语法如下:语法:If 条件表达式:代码块执行的流程:if语句在执行时,会先对条件表达式进行求值判断&#xff1b…

mysql怎么可视化连接_IDEA连接MySQL可视化工具连接操作

IDEA连接MySQL可视化工具连接操作入下所示:填写完成后,点击测试连接,连接成功如图所示点击OK即可报告错误(如图所示):[08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up. java.ne…

Windows下图文详解PHP三种运行方式(php_mod、cgi、fastcgi)

PHP能不能成功的在Apache服务器上运行,就看我们如何去配置PHP的运行方式。PHP运行目前为止主要有三种方式: a、以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache服务器,以同一个进程运行。 b、以…

计算机网络基础:ISO/OSI网络体系结构知识笔记​

❤️作者主页:IT技术分享社区 ❤️作者简介:大家好,我是IT技术分享社区的博主,从事C#、Java开发九年,对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉: 数据库领域优质创作者🏆&#x…

mac下安装redis

官网地址:https://redis.io/ 二、下载完成后解压安装 解压命令 tar zxvf redis-6.0.6.tar.gz 切换到redis目录下 cd redis-6.0.6 编译测试 sudo make test 编译安装 sudo make install sudo make test sudo make install

mysql having和where_浅谈Mysql中where和having的区别

一、误区:不要错误的认为having和group by 必须配合使用.二、where和having用法解析:1、 where和having都可以使用的场景:select goods_price,goods_name from goods where goods_price > 100select goods_price,goods_name from goods ha…

ds证据理论python实现_ALI模型理论以及Python实现

https://openreview.net/forum?idB1ElR4cgg模型结构和明天要发BiGAN模型一模一样,但是两篇论文的作者都是独立完成自己的内容的。而且从写作的风格来看emmm完全不一样ALI跟BiGAN的设计一模一样,但是就是没有加Latent regressor。虽然在ALI中也简要地谈到…

IO操作总结

1,读取文件将文件转换为二进制流 1 InputStream in new FileInputStream("C:/test.png"); 2 byte[] photo new byte[in.available()]; 3 in.read(photo); 4 in.close(); View Code2,写文件 1 Outpu…

计算机网络基础:网络标准相关知识介绍

1、常见的制定网络标准的机构 国际标准化组织、国际电信联盟、电子工业协会、电气和电子工程协会、因特网活动委员会 2、常见的网络标准 2.1 电信标准 国际电信联盟(ITU)1947年成为联合国的一个组织,包括ITU-R、ITU-T、ITU-D组成。 ITU-R:无线…