uniapp微信公众号H5分享

如果项目文件node_modules中没有weixin-js-sdk文件,则直接使用本文章提供的;

如果不生效,则在template.h5.html中引入

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

首先引入weixin-js-sdk

<script>import * as weixin from 'weixin-js-sdk'import * as UserApi from '@/api/user'export default {data() {return {}},onLoad(options) {this.weixinShareInfo();},methods: {weixinShareInfo(){var that = this;//获取当前url然后传递给后台获取授权和签名信息var urls = window.location.href.split('#')[0]; //当前网页的URL,不包含#及其后面部分console.log('888:',window.location.href.split('#')[0]);var data = {urls:urls}//获取到微信分享相关配置UserApi.fenxiang(data, { load: true }).then(res => {if(res.data && res.data.signData){console.log('res.data.signData:',res.data.signData);weixin.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: res.data.signData.appId, // 必填,公众号的唯一标识timestamp: res.data.signData.timestamp, // 必填,生成签名的时间戳nonceStr: res.data.signData.nonceStr, // 必填,生成签名的随机串signature: res.data.signData.signature,// 必填,签名jsApiList: ["onMenuShareTimeline","onMenuShareQQ","onMenuShareAppMessage","updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表});weixin.ready(function(){console.log(999999999998888888888);weixin.checkJsApi({jsApiList: ['updateAppMessageShareData',"updateTimelineShareData"], // 需要检测的JS接口列表,所有JS接口列表见附录2,success: function(res2) {// 以键值对的形式返回,可用的api值true,不可用为false// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。weixin.updateAppMessageShareData({ title: '测试标题', // 分享标题desc: res.data.signData.intro, // 分享描述link: res.data.signData.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: res.data.signData.fximg, // 分享图标success: function () {// 设置成功console.log('===分享===');}})weixin.updateTimelineShareData({title: '测试标题', // 分享标题desc: res.data.signData.intro, // 分享描述link: res.data.signData.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: res.data.signData.fximg, // 分享图标success: function () {// 设置成功console.log('===分享===');}})},fail: function(err){console.log('checkJsApi:',err);}});})weixin.error(function(err){console.log('err:',err);// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。})}}).catch(err => {})},}}
</script>

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

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

相关文章

vue3框架组件自动导入unplugin-vue-components

1.安装 npm i unplugin-vue-components -save-dev 2.配置 我这里用的是Vue CLI&#xff0c;所以要在vue.config.js文件中添加配置&#xff0c;官网中有写不同打包工具的配置写法 框架我使用的是Element Plus&#xff0c;使用前去官网查看自己的框架是否支持&#xff0c;主流…

LLM之RAG实战(二十七)| 如何评估RAG系统

有没有想过今天的一些应用程序是如何看起来几乎神奇地智能的&#xff1f;这种魔力很大一部分来自于一种叫做RAG和LLM的东西。把RAG&#xff08;Retrieval Augmented Generation&#xff09;想象成人工智能世界里聪明的书呆子&#xff0c;它会挖掘大量信息&#xff0c;准确地找到…

电脑黑屏什么都不显示怎么办 电脑开机黑屏不显示任何东西的4种解决办法

相信有很多网友都有经历电脑开机黑屏不显示任何东西&#xff0c;找了很多方法都没处理好&#xff0c;其实关于这个的问题&#xff0c;首先还是要了解清楚开机黑屏的原因&#xff0c;才能够对症下药&#xff0c;下面大家可以跟小编一起来看看怎么解决吧 电脑开机黑屏不显示任何…

【无刷电机学习】基础概念及原理介绍(持续更新中...)

目录&#xff08;2024.02.22版&#xff09; 1 定义 2 各种电机优势比较 2.1 有刷与无刷比较 2.2 交流与直流比较 2.3 内转子与外转子比较 2.4 低压BLDC的一些优点 3 基本原理 3.1 单相无刷电机 3.2 三相无刷电机 4 驱动方法 4.1 六步换相控制 4.1.1 基本原理 4…

突发!AI独角兽「竹间智能」被曝停工停产6个月

大家好我是二狗。 今天早上起来刷朋友圈&#xff0c;看到一张截图——AI创企竹间智能&#xff0c;宣称因为公司所处的经营环境艰难&#xff0c;部分部门和岗位将从即日起停工停产6个月。 图源&#xff1a;&#xff08;企服科学&#xff09; 下面是文字版&#xff1a; 由于公司…

Web服务器基础介绍

目录 Web服务器基础介绍 一、HTML是什么&#xff1f; 二、静态网页和动态网页 1、静态网页 2、动态网页 3、动态网页语言 PHP JSP Python Ruby 三、HTTP协议 1、HTTP协议是什么&#xff1f; 2、HTTP请求访问的方法 3、GET与POST比较 GET&#xff1a; POST&…

Linux网络编程(三-UDP协议)

目录 一、UDP概述 二、UDP的首部格式 三、UDP缓冲区 四、基于UDP的应用层协议 五、常见问题 一、UDP概述 UDP(User Datagram Protocol&#xff0c;用户数据协议报)是传输层协议&#xff0c;提供不可靠服务&#xff0c;其特点包括&#xff1a; 无连接&#xff1a;知道对端…

CSP-202309-3-梯度求解

CSP-202309-3-梯度求解 作为一个算法小白&#xff0c;本人第一次接触大模拟的题&#xff0c;本题的算法参考自&#xff1a;【CSP】202309-3 梯度求解 解题思路 1.输入处理 getchar();&#xff1a;从标准输入读取一个字符。这里它的作用可能是用来“吃掉”&#xff08;消耗&a…

Kafka_04_Topic和日志

Kafka_04_Topic和日志 Topic/PartitionTopicPartition 日志存储存储格式日志清理删除压缩 Topic/Partition Topic/Partition: Kafka中消息管理的基础单位 Topic和Partition并不实际存在(仅逻辑上的概念) 如: Topic和Partition关系 // 每个日志文件可对应多个日志分段, 其还可…

缓存篇—缓存击穿

在很多场景下&#xff0c;我们的业务通常会有几个数据会被频繁地访问&#xff0c;比如秒杀活动&#xff0c;这类被频地访问的数据被称为热点数据。 如果缓存中的某个热点数据过期了&#xff0c;此时大量的请求访问了该热点数据&#xff0c;就无法从缓存中读取&#xff0c;直接…

《UE5_C++多人TPS完整教程》学习笔记22 ——《P23 记录加入的玩家(Couting Incoming Players)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P23 记录加入的玩家&#xff08;Couting Incoming Players&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff…

前端面试问题(jwt/布局/vue数组下标/扁平化/菜单树形/url api/新版本)

前端面试问题(jwt/布局/vue数组下标/扁平化/菜单树形/url api/新版本) 1. jwt鉴权逻辑 前端 JWT 鉴权逻辑通常涉及在发起请求时携带 JWT&#xff0c;并在接收到响应后处理可能的授权问题。 1. 用户登录&#xff1a; 用户提供凭证&#xff1a; 用户在登录界面输入用户名和密码…

如何使用Docker部署MongoDB并结合内网穿透实现远程访问本地数据库

文章目录 前言1. 安装Docker2. 使用Docker拉取MongoDB镜像3. 创建并启动MongoDB容器4. 本地连接测试5. 公网远程访问本地MongoDB容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 …

2024最佳住宅代理IP服务商有哪些?

跨境出海已成为了近几年的最热趋势&#xff0c;大批量的企业开始开拓海外市场&#xff0c;而海外电商领域则是最受欢迎的切入口。新兴的tiktok、Temu&#xff0c;老牌的Amazon、Ebay&#xff0c;热门的Etsy、Mecari等等都是蓝海一片。跨境入门并不难&#xff0c;前期的准备中不…

深入理解文件查看命令:cat、more、less、tail、head

在Linux系统中&#xff0c;有许多命令用于查看文件的内容&#xff0c;其中包括cat、more、less、tail和head。这些命令提供了不同的方式来浏览文本文件&#xff0c;适用于各种查看需求。在本篇博客中&#xff0c;我们将深入介绍这些命令&#xff0c;并通过示例演示它们的用法。…

Spring Boot打war包部署到Tomcat,访问页面404 !!!

水善利万物而不争&#xff0c;处众人之所恶&#xff0c;故几于道&#x1f4a6; 文章目录 Spring Boot打war包部署到Tomcat&#xff0c;访问页面404 &#xff01;&#xff01;&#xff01;解决办法&#xff1a;检查Tomcat版本和Jdk的对应关系&#xff0c;我的Tomcat是6.x&#x…

Sping基础篇----掌握Sping的控制反转/依赖注入的概念【实战案例总结】

作为一名对技术充满热情的学习者&#xff0c;我一直以来都深刻地体会到知识的广度和深度。在这个不断演变的数字时代&#xff0c;我远非专家&#xff0c;而是一位不断追求进步的旅行者。通过这篇博客&#xff0c;我想分享我在某个领域的学习经验&#xff0c;与大家共同探讨、共…

SMMU介绍

SMMU&#xff08;System Memory Management Unit&#xff09;是一种硬件设备&#xff0c;其作用是在虚拟地址空间和物理地址空间之间提供地址转换的功能。它通常用于处理虚拟化环境中的 I/O 设备&#xff0c;例如虚拟机中的设备访问或者容器环境中的设备隔离。 SMMU 的主要作用…

KVM虚拟机的克隆方式

话不多说&#xff0c;直接上操作 首先确定我们要克隆的模板机器&#xff0c;这样可以方便我们后续克隆许多机器 IP获取最好就是dhcp模式&#xff0c;这样克隆出来的机器就不需要自己再去改ip了 确定需要克隆的模板机以后&#xff0c;先关机再执行克隆操作 virsh shutdown ser…

【SiamFC】《Fully-Convolutional Siamese Networks for Object Tracking》

ECCV 2016 Workshops 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 The OTB-13 benchmark5.3 The VOT benchmarks5.4 Dataset size 6 Conclusion&#xff08;own&#xff09;/ Future wo…