当前位置: 首页 > 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;这些符号作…...

开源工具cursor-free-vip:突破Cursor API限制的无限制使用指南

开源工具cursor-free-vip&#xff1a;突破Cursor API限制的无限制使用指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached …...

如何5分钟快速部署Akagi雀魂AI助手:专业实战配置完整指南

如何5分钟快速部署Akagi雀魂AI助手&#xff1a;专业实战配置完整指南 【免费下载链接】Akagi 支持雀魂、天鳳、麻雀一番街、天月麻將&#xff0c;能夠使用自定義的AI模型實時分析對局並給出建議&#xff0c;內建Mortal AI作為示例。 Supports Majsoul, Tenhou, Riichi City, Am…...

文书妙笔专为公文写作打造,让写材料效率翻倍

不同于市面上通用型写作工具&#xff0c;文书妙笔每一项功能都为公文写作量身定制&#xff0c;真正实现“写材料效率翻倍”。作为专为公文写作打造的平台&#xff0c;平台内置40W优质公文范文库&#xff0c;每日持续更新&#xff0c;更整合了最新政策表述、基层工作案例和规范金…...

Elsevier Tracker:学术审稿状态自动化追踪解决方案

Elsevier Tracker&#xff1a;学术审稿状态自动化追踪解决方案 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker Elsevier Tracker是一款开源Chrome插件&#xff0c;专为学术研究者设计&#xff0c;提供Elsevier期刊审…...

FastBle单元测试终极指南:Mockito在Android蓝牙BLE开发中的7个实战技巧

FastBle单元测试终极指南&#xff1a;Mockito在Android蓝牙BLE开发中的7个实战技巧 【免费下载链接】FastBle Android Bluetooth Low Energy (BLE) Fast Development Framework. It uses simple ways to filter, scan, connect, read ,write, notify, readRssi, setMTU, and mu…...

ZYNQ调试别再傻等Program FPGA了!一个函数搞定PL端软复位(Vitis 2021.2)

ZYNQ高效调试&#xff1a;用软复位替代FPGA重编程的技术解析 调试ZYNQ项目时&#xff0c;最令人抓狂的莫过于每次修改代码后漫长的Program FPGA等待。作为一名长期与ZYNQ打交道的工程师&#xff0c;我深知这种重复操作不仅消耗时间&#xff0c;更会加速Flash芯片的老化。本文将…...

图像增强技术指南:让模糊图片重获新生的实用方法

图像增强技术指南&#xff1a;让模糊图片重获新生的实用方法 【免费下载链接】Real-ESRGAN-ncnn-vulkan NCNN implementation of Real-ESRGAN. Real-ESRGAN aims at developing Practical Algorithms for General Image Restoration. 项目地址: https://gitcode.com/gh_mirro…...

百考通:AI精准赋能开题报告,让学术研究全流程智能化

对于每一位学子与科研人而言&#xff0c;开题报告是学术研究的“第一粒扣子”&#xff0c;它不仅是研究方向的蓝图&#xff0c;更是顺利推进论文写作、获得导师认可的关键。然而&#xff0c;选题迷茫、文献梳理繁琐、逻辑框架搭建困难等问题&#xff0c;常常让开题之路步履维艰…...

3大阶段解决TrollInstallerX安装失败问题

3大阶段解决TrollInstallerX安装失败问题 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX TrollInstallerX作为一款专为iOS 14.0至16.6.1设备设计的TrollStore安装器&…...

ai辅助开发新思路:让快马ai为你生成一个notepad++智能编程助手插件原型

今天想和大家分享一个有趣的AI辅助开发思路——如何用InsCode(快马)平台快速构建一个Notepad智能编程助手插件的原型。这个项目特别适合想体验AI与本地编辑器联动的开发者&#xff0c;整个过程不需要复杂的配置&#xff0c;直接在网页上就能完成原型验证。 插件功能设计 这个插…...