微信小程序-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)},
})

效果展示

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

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Unity类银河恶魔城学习记录10-10 p98 UI health bar源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili HealthBar_UI.cs using System.Collections; using System.Collections.G…

vue2和vue3部署到服务器子目录为空白页

问题&#xff1a;今天遇到vue项目部署到服务器默认hash没问题但是hhistory为空白的问题。研究了一下找到了答案记录一下 vue项目history模式部署在子路径 项目打包后默认只能部署在服务器根路径&#xff0c;如果想 http://www.xxx.com/demo/ 这种形式 vue3vite配置方法 在 …

计算机毕业设计-基于大数据技术下的高校舆情监测与分析

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、研究背景与意义1.1背景与意义1.2 研究内容 二、舆情监测与分析的关键技术2.1 robot协议对本设计的影响2.2 爬虫2.2.1 工作原理2.2.2 工作流程2.2.3 抓取策略2.3 scrapy架构2.3.1 scrapy&#xff1a;开源爬虫架…

Lua-Lua虚拟机2

Lua虚拟机是指Lua语言的执行环境&#xff0c;它是一种轻量级的、嵌入式的脚本语言虚拟机。Lua虚拟机可以解释执行Lua脚本&#xff0c;并提供了一系列的API供开发者使用。 Lua虚拟机的主要概念包括以下几个方面&#xff1a; 解释器&#xff1a;Lua虚拟机内部包含了一个解释器&a…

AcWing 4405. 统计子矩阵(双指针,前缀和)

给定一个 N M NM NM 的矩阵 A A A&#xff0c;请你统计有多少个子矩阵 (最小 1 1 11 11&#xff0c;最大 N M NM NM) 满足子矩阵中所有数的和不超过给定的整数 K K K? 输入格式 第一行包含三个整数 N , M N,M N,M 和 K K K。 之后 N N N 行每行包含 M M M 个整数…

【LinuxWindows 10系统中设置定时关机】

Windows 10系统中设置定时关机 在Windows 10系统中设置定时关机可以通过多种方式实现&#xff0c;以下是几种常用的方法&#xff1a; 方法一&#xff1a;命令提示符或运行窗口 打开“运行”窗口&#xff0c;可以按键盘上的Win R组合键&#xff1b; 在运行窗口中输入以下命令…

【构建工具】PostCSS快速配置

1. 安装依赖包 npm i -D postscss postcss-cli npm i -D autoperfixer postcss-preset-env npm i -D stylelint stylelint-config-standard npm i -D postcss-pxtorem// 执行命令 npx postcss style.css -o dist.css postcss // PostCSS核心包postcss-cli // PostCSS命令行a…

专业无网设备如何远程运维?向日葵远程控制能源场景案例解析

清洁能源领域&#xff0c;拥有庞大的上下游产业链&#xff0c;涉及的相关工业设备门类多、技术覆盖全、行业应用广。在这一领域内&#xff0c;相关专业设备的供应商的核心竞争力除了本身产品的技术能力之外&#xff0c;服务也是重要的一环。 某企业作为致力于节能环保方向的气…

由浅到深认识C语言(7)

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…

云仓酒庄东莞分公司2024年日常沙龙:葡萄酒文化与品鉴之旅

原标题&#xff1a;云仓酒庄东莞分公司日常沙龙&#xff1a;葡萄酒文化与品鉴之旅&#xff0c;招商新机遇共融 在东莞这座充满活力的城市&#xff0c;云仓酒庄分公司近日举办了一场别开生面的日常沙龙活动。此次活动以葡萄酒文化与品鉴为主题&#xff0c;旨在让参与者深入体验…

Typecho CMS 反序列化漏洞(CVE-2018-18753)复现

1.环境搭建 项目地址&#xff1a;Release Typecho 1.0(14.10.10) typecho/typecho GitHub 安装&#xff1a; 创建数据库typecho create database typecho; 再进入安装程序&#xff0c;输入数据库密码&#xff0c;设置登录密码即可 直接使用即可 2.漏洞分析 install.php文…

[善用佳软]推荐掌握小工具:Json解析的命令行工具jq

前言&#xff1a; 我们在各种生产环境或者开发测试环境中&#xff0c;一定遇到有很多信息都是使用JSON串或者文本文件作为输入的。在没有JQ命令行工具之前&#xff0c;我们要从中获取真正的输入&#xff0c;大都把它复制到文本里头&#xff0c;然后使用文本编辑器进行加工整理…

PytorchAPI的使用及在GPU的使用和优化

API 调用API&#xff1a;和手动实现的思路是一样的。#1&#xff0c;#2这两个步骤是通用的步骤&#xff0c;相当于建立一个模型&#xff0c;之后你具体的数据直接丢进去就行了。只需要按着这样的样式打代码就行&#xff0c;死的东西&#xff0c;不需要你自己创造。 import torc…

【博士每天一篇文献-综述】Communication dynamics in complex brain networks

阅读时间&#xff1a;2023-11-30 1 介绍 年份&#xff1a;2018 作者&#xff1a;Andrea Avena-Koenigsberger&#xff0c;印第安纳大学心理与脑科学系&#xff1b;Bratislav Misic 蒙特利尔神经学研究所&#xff0c;麦吉尔大学 期刊&#xff1a; Nature reviews neuroscience…

【Linux进阶之路】HTTPS = HTTP + S

文章目录 一、概念铺垫1.Session ID2.明文与密文3.公钥与私钥4.HTTPS结构 二、加密方式1. 对称加密2.非对称加密3.CA证书 总结尾序 一、概念铺垫 1.Session ID Session ID&#xff0c;即会话ID&#xff0c;用于标识客户端与服务端的唯一特定会话的标识符。会话&#xff0c;即客…

基于DataX迁移MySQL到OceanBase集群

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

go和rust使用protobuf通信

先下载protoc 首先下载proc程序以生成代码 https://github.com/protocolbuffers/protobuf/releases 解压&#xff0c;然后把bin目录的位置放到环境变量 测试 rust作为server&#xff0c;rpc使用tonic框架 官方教程 go作为service&#xff0c;使用grpc go语言使用grpc 效…

Xilinx LVDS ISERDESE2

ISERDESE2 7 系列 FPGA 是一款专用的串行到并行转换器,具有特定的时钟和逻辑功能,旨在促进高速源同步应用的实现。该ISERDESE2避免了在FPGA架构中设计解串器时遇到的额外时序复杂性. ISERDESE2功能包括: 1,专用解串器/串行转换器 ISERDESE2解串器可实现高速数据传输,而无需…

FPGA静态时序分析与约束(四)、时序约束

系列文章目录 FPGA静态时序分析与约束&#xff08;一&#xff09;、理解亚稳态 FPGA静态时序分析与约束&#xff08;二&#xff09;、时序分析 FPGA静态时序分析与约束&#xff08;三&#xff09;、读懂vivado时序报告 文章目录 系列文章目录前言一、什么是时序约束&#xff1…

C++/CLI学习笔记10(快速打通c++与c#相互调用的桥梁)

1:理解局部和全局作用域 函数体中定义的局部变量的作用域:它们在函数执行期间创建,在函数结束时自动销毁。这意味着不同函数中的同名变量不会冲突。 还可在所有函数外部声明全局变量。全局变量在之后的所有函数定义中可见。可利用这种变量在多个函数之间共享信息。 全局变…