微信H5分享到朋友圈，转发朋友功能随记

2024-05-17 00:01:06

最近刚做了一个微信公众号H5项目，里面包含一个分享到朋友圈和分享给好友的功能。配置白名单以及公众号js安全域名这些就不赘述了，接下来简单介绍下实现这个功能的几个前端步骤

因为是微信网页开发，项目里如果有用到一些分享，音频，视频的功能就必须接入它的SDK工具包，详情可以到官方文档里看一下

第一步绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

第二步引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

我这里是用的 npm 的方式引入，npm引入方式

 npm i weixin-js-sdk -D

或者

 npm i weixin-js-sdk --save-dev

使用

 const wx = require("weixin-js-sdk");

第三步通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

使用

wx.config({// 开启调试模式,调用的所有api的返回值会在客户端alert出来，// 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。debug: true, appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表
});

这里的timestamp，nonceStr，signature参数涉及的签名算法应由后端去进行获取，再通过接口调用返回给前端。详情请看签名文档，有对获取签名算法逻辑介绍。jsApiList的接口列表在附录3

本项目是uni-app开发，所以config的方法是在生命周期onReady里调用的

第四步通过ready接口处理成功验证

这一步主要就是使用api了，我只用到了分享功能并且需要获取到分享的状态，所以jsApiList里就只添加了 “onMenuShareAppMessage”, “onMenuShareTimeline” 这两个api。虽然分享接口里这两个是属于即将弃用的api，但是"updateAppMessageShareData", “updateTimelineShareData” 无法获取状态，所以就暂时没有用。等什么时候官方停止使用 “onMenuShareAppMessage”, “onMenuShareTimeline” 了之后再替换

微信H5分享到朋友圈，转发朋友功能随记相关推荐

uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
前言如果您是纯 Vue.js 项目(或 Nuxt.js),请访问 Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享好友这篇详细教程. 目前网上大部分教程都过时了(老版本.无效),并且未对 ...
微信h5分享好友和朋友圈功能
在开发公众号H5项目时,如果想和小程序一样有分享朋友圈和好友功能时发现会不一样. 开发微信小程序时做分享有会有onShareAppMessage 这个方法.因为H5有许多限制,所以在做微信H5分享时就 ...
帝国CMS微信分文章显示缩略图、简介源码分享到朋友圈转发好友带缩略图
帝国CMS 微信分享文章显示缩略图.简介源码分享到朋友圈转发好友带缩略图资源下载地址:https://download.csdn.net/download/bobbsh/12139464 适用帝 ...
android微信朋友圈视频无法播放,微信朋友圈不能分享手机视频怎么回事？微信朋友圈大视频功能安卓不能用吗？...
微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频功能安卓不能用吗?最近微信更新,用户可以进行分享自己手机里的视频,这一举措受到很多人的喜欢.那么微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频 ...
SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤
SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤一.登录微信平台 login url:https://mp.weixin.qq.com/ name: your name ...
朋友圈转发集赞截图生成工具，以假乱真！
今天分享的是2款转发集赞截图生成工具. 我自己是做平台运营的,平时转发.集赞.拼团.秒杀等等乱七八糟活动没少策划过. 但其实对我个人来说还是很讨厌这些东西的,天天求点赞/求转发/求砍一刀,实在是烦人, ...
生成朋友圈转发点赞截图的小工具
当当当当!开工大吉! 新春虎年的第一个工作日,相信有不少的小伙伴跟TJ君一样,斗志满满的开始了新一年的工作之旅. 也肯定有不少的小伙伴还在休假,享受一年难得的相聚. 那么春节期间,大家都去了什么好玩的 ...
朋友圈转发截图生成装逼工具源码
微信朋友圈截图模拟器源码,微信朋友圈装逼生成器大全,上传服务器即可使用!装逼必备!有条件的可以打包成APP 源代码地址:朋友圈转发截图生成装逼工具源码.zip - 蓝奏云
朋友圈转发截图生成工具HTML源码
正文: 朋友圈转发截图生成工具HTML源码,微信朋友圈截图模拟器源码,微信朋友圈装逼生成器大全,上传服务器即可使用,装逼必备,有条件的可以打包成AP. 下载方式: lanzou.com/iXBIb03 ...
朋友圈转发截图生成工具源码
微信朋友圈截图模拟器源码,微信朋友圈装逼生成器大全,上传服务器即可使用!装逼必备!有条件的可以打包成APP 图片: 学习资料地址:朋友圈转发截图生成工具源码.zip - 蓝奏云

最新文章

热门文章