当前位置: 首页 > news >正文

微信小程序-webview分享

项目背景

最近有个讨论区项目需要补充分享功能,希望可以支持在微信小程序进行分享,讨论区是基于react的h5项目,在小程序中是使用we-view进行承载的

可行性

目标是在打开web-view的页面进行分享,那就需要涉及h5和小程序的通讯问题,查看官方文档:

  1. 网页向小程序 postMessage 时,可以通过bindmessage获取post的信息
  2. 只有在特定的场景下才会触发bindmessage,例如小程序后退、组件销毁、分享、复制链接等,刚好满足分享的场景
    在这里插入图片描述
  3. h5端如何post信息
    在这里插入图片描述

基于postMessage和bindmessage进行开发

h5代码

注意:我这里是为了方便演示,所以点击按钮才post内容,可以结合自身需求,也可以在加载成功就post数据

  1. 环境区分:通过判断是否在小程序环境navigator.userAgent.includes(“miniProgram”)
  2. 动态判断是否有miniProgram:if (!window[“wx”] || !window[“wx”].miniProgram) { return }
  3. post信息
import React from "react"
import "./WebView.less"const shareData = {title: "测试h5分享",path: "https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html",imageUrl: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
}const WebView = () => {const handleSetShareOptions = () => {// 判断是否再微信小程序环境const userAgent = navigator.userAgentconst isInMiniProgram =  userAgent.includes("miniProgram")if (!isInMiniProgram) { return }if (!window["wx"] || !window["wx"].miniProgram) { return }window["wx"].miniProgram.postMessage({data: shareData,});}return <div className="web-view-page"><div className="title">我是h5页面</div><div className="share-content"><div className="content"><div className="content-title">分享内容:</div><div className="main"><div className="item">分享标题:{shareData.title}</div><div className="item">分享路径:微信webView文档:{shareData.path}</div><div className="item">分享封面图:<img src={shareData.imageUrl} alt='' className='icon-btn' /></div></div></div></div><div onClick={handleSetShareOptions} className="share-container"><img src={require("./icon-share.png").default} alt='' className='icon-btn' /><span>点击设置分享</span></div></div>
}export default WebView

小程序代码

  1. 这个newPage是用于承载所有的h5页面的,url应该都是读路由的数据,这里为了方便样式,直接给url赋默认值
  2. 动态读取url:在onLoad时候,获取options的url,并进行赋值
  3. 获取h5 post的信息,有两个点需要注意
    • e.detail.data是一个数组,post的数据会保存在该数组中,所以需要取data的最后一个数据处理展示
    • 分享url的拼接:需要注意的是,我们分享出去的是小程序,并不是h5,所以用户点击进来的肯定还是小程序,所以url的拼接需要把当前的newPage路径带上,然后真正的路径通过路由参数拼接,最终在onLoad通过options获取,也就是上面的第二步
      • path: /pages/newPage/newPage?url=${path},
  4. 特别注意,这时候在h5页面点了分享按钮,其实也是不会响应,还记得bingmessage的触发时机吗,只有我们点击了分享按钮,才会触发bingmessage获取信息,记得一定要点击分享按钮
<web-view src="{{url}}" bindmessage="handleGetMessage" />
Page({data: {url: 'http://localhost:3001/64/html5-bbs/web-view',isOverShare: true,shareOptions: {title: "",path: "/pages/index/index",imageUrl: ""},},onLoad(options = {}) {if (!options.url) { return }this.setData({ url: options.url})},onShareAppMessage() {return this.data.shareOptions},handleGetMessage(e) {let data = e.detail.data || []if (!data.length) { return }const { title, path, imageUrl } = data[data.length - 1]this.setData({shareOptions: {title,path: `/pages/newPage/newPage?url=${path}`,imageUrl,}})console.log('%c [  ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', this.data.shareOptions)},
})

效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

相关文章:

微信小程序-webview分享

项目背景 最近有个讨论区项目需要补充分享功能&#xff0c;希望可以支持在微信小程序进行分享&#xff0c;讨论区是基于react的h5项目&#xff0c;在小程序中是使用we-view进行承载的 可行性 目标是在打开web-view的页面进行分享&#xff0c;那就需要涉及h5和小程序的通讯问…...

webpack5零基础入门-8清空前次打包文件与处理图标字体资源

1.配置output中的clean属性为true output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, dist),//所有文件的输出目录/**文件名 */filename: static/js/dist.js,//入口文件输出文件名clean: true,//在打包前将path整个目录内…...

中国首个基于区块链的分布式算力网络上线

随着美国人工智能公司OpenAI近期发布的Sora视频模型&#xff0c;全球对高性能算力的需求突破了历史新高。Sora的创新在于它能够以超长生成时间、多角度镜头捕捉&#xff0c;理解物理世界的能力&#xff0c;这不仅是技术的一大突破&#xff0c;更是对算力需求的一大挑战。在这样…...

cesiumlab中shp转3dtiles白模效果一

安装cesiumlab 如果没有安装cesiumlab&#xff0c;去官网下载安装一个即可 http://www.cesiumlab.com/cesiumlab.html 效果 步骤 1、准备shp面数据 2、打开cesiumlab软件转换 选择shp面数据 设置高度&#xff0c;如果shp面中有高度字段&#xff0c;可以用高度字段&#xff…...

照片生成数字人技术重塑虚拟主播生态

随着数字技术的飞速发展&#xff0c;虚拟主播已成为现代传媒领域的一股新势力。然而&#xff0c;传统虚拟主播形象制作周期长、成本高的问题&#xff0c;限制了其在多个场景下的广泛应用。美摄科技&#xff0c;作为业界领先的数字内容创新者&#xff0c;针对这一痛点&#xff0…...

前端和后端权限控制【笔记】

前端权限设置【笔记】 前言版权推荐前端权限设置需求效果实现资源 后端权限控制1.给所有前端请求都携带token2.添加拦截器3.配置到WebMvcConfiguration4.更多的权限验证 最后 前言 2024-3-15 18:27:26 以下内容源自《【笔记】》 仅供学习交流使用 版权 禁止其他平台发布时删…...

老电脑装什么系统流畅

对于一些老旧电脑来说&#xff0c;重装系统是提升电脑性能的最佳选择。那么&#xff0c;老电脑装什么系统流畅呢&#xff1f;推荐Windows 7系统&#xff0c;它对硬件的需求相对较低。配置较低的电脑运行Windows 7可以更好地利用系统资源&#xff0c;提高电脑的运行速度和响应能…...

厉害了!机器视觉在农业中的应用

机器视觉是一门涉及模式识别、神经生物学、计算机科学、人工智能、图像处理、心理物理学等诸多领域的交叉学科。主要是通过计算机对人类某些视觉方面的智能行为的模拟和再现,再处理并理解从客观事物的图像中提取到的信息,最终达到在实际检测和控制中应用的目的。近年来,随着…...

简述从浏览器发出请求到数据返回的全过程

下面是我结合经验概述的从浏览器发出请求到数据返回的全过程。 一、用户请求 1、用户在浏览器输入URL&#xff0c;或通过功能发起请求&#xff1b; 2、解析URL&#xff0c;提取协议(http,https等)&#xff0c;IP&#xff0c;端口&#xff0c;域名&#xff0c;路径等信息&#x…...

MongoDB性能最佳实践:硬件和操作系统配置

欢迎阅读有关MongoDB性能最佳实践的系列博文。在往期文章中&#xff0c;我们已经讨论过查询模式和性能分析、事务和读/写关注等实现大规模性能的关键考虑因素。在本篇文章中&#xff0c;我们将讨论硬件和操作系统配置。 如果您在阿里云上部署MongoDB&#xff0c;那么阿里云会为…...

mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询,只能使用全表扫描,是真的吗???

不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询&#xff0c;只能使用全表扫描。 刚入行时我也是这么认为的&#xff0c;还奉为真理&#xff01; 但是时间工作中你会发现还是走索引…...

使用IDEA2023创建传统的JavaWeb项目并运行与调试

日期:2024-0312 作者:dusuanyun 文档环境说明: OS:Deepin 20.9(Linux) JDK: OpenJDK21 Tomcat:10.1.19 IDEA: 2023.3.4 (Ultimate Edition) 本文档默认已经安装JDK及环境变量的配置。 关键词…...

【快捷部署】002_Flink(1.17.2)

&#x1f4e3;【快捷部署系列】002期信息 编号选型版本操作系统部署形式部署模式002Flink1.17.2CentOS 7.Xtgz包单机 &#x1f449; 演示视频 Flink一键安装&#xff08;本地模式&#xff09; install-flink.sh 脚本内容 #!/bin/bash ####变量 ###执行脚本的当前目录 mydir$…...

智慧公厕建设,助力打造宜居、韧性、可持续的智慧城市

公共厕所作为智慧城市的重要组成部分&#xff0c;对于城市的高质量发展起着至关重要的作用。智慧公厕建设旨在通过全面监测、控制和管理公共厕所&#xff0c;实现多方面功能&#xff0c;包括公共厕所环境监测与调控、厕位占用监测与引导、消耗品监测与缺失提示、安全防范与管理…...

[Django 0-1] Core.Cache模块

Caching 源码分析 Django 的 cache 缓存机制&#xff0c;包含了一些代理设计模式(代理了但没完全代理&#xff0c;多此一举)。 通过实现一个CacheHandler的manager类&#xff0c;来实现多缓存后端的统一管理和调用&#xff0c;避免到处实例使用。 缓存的目的 缓存的目的就是…...

spy分析文件另存为弹框【selenium】

有时需要下载多个文件&#xff0c;但是不想保存在同一个目录下&#xff0c;需要做两步 selenium设置浏览器默认下载路径&#xff0c;这个路径需要是个不存在的路径操作文件另存为弹框 文章目录 selenium设置浏览器默认下载路径操作文件另存为弹框 selenium设置浏览器默认下载路…...

分布式与集群,二者区别是什么?

&#x1f413;分布式 分布式系统是由多个独立的计算机节点组成的系统&#xff0c;这些节点通过网络协作完成任务。每个节点都有自己的独立计算能力和存储能力&#xff0c;可以独立运行。分布式系统的目标是提高系统的可靠性、可扩展性和性能。 分布式服务包含的技术和理论 负…...

(done) 什么是词嵌入技术?word embedding ?(这里没有介绍词嵌入算法)(没有提到嵌入矩阵如何得到)

参考视频&#xff1a;https://www.bilibili.com/video/BV1sw411S7i1/?spm_id_from333.788&vd_source7a1a0bc74158c6993c7355c5490fc600 词嵌入&#xff08;word embedding&#xff09;&#xff1a;把词汇表中的词或短语 -------- 映射 ----> 固定长度向量 我们可以把 …...

C++静态成员函数和非静态成员函数之间的相互调用

C静态成员函数和非静态成员函数之间的相互调用 一直对C静态成员函数和非静态成员函数之间的相互调用记不住&#xff0c;都是死记硬背&#xff0c;今天突然醍醐灌顶&#xff1b; 1、静态成员函数不能调用非静态成员函数&#xff0c;因为静态成员函数属于类&#xff0c;没有this…...

最好用的流程编辑器bpmn-js系列之基本使用

BPMN&#xff08;Business Process Modeling Notation&#xff09;是由业务流程管理倡议组织BPMI&#xff08;The Business Process Management Initiative&#xff09;开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号&#xff0c;这些符号作…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...