微信 App 右上角自带分享功能 -- 不论是微信公众号还是微信小程序或者是用微信打开的别的链接, 用户都可以进行微信分享出去, 对于自定义微信分享功能会和默认分享存在一些样式区别. 这就是为什么还要自定义微信分享功能.
首先说一下要注意的事项:
一: 必须要用公司的公众号设置的 appID 和密钥进行配置参数, 之前听别人说过用个人的也可以, 但是我做的时候个人的没有获取到微信分享的权限.
二: 关于分享出去的图片链接也页面的链接, 必须和当前页的域名一致, 而且此域名必须要配置在公司公众号的 IP 白名单上, 否则分享不成功.
三: 我在分享的时候做了一个蠢事, 就是本来应该分享成功的但是写错了分享的事件所以当时怎么都测不出来问题, 找了老半天.(注意一下事件不要用错, 毕竟都很像)
四: 微信分享要引入 wx.JS, 此 JS 文件必须是低版本的 wx.JS 的低版本, 最新版本的 1.4.0 的版本没有分享功能, 之前这个也琢磨了很久, 搜了半天都没有找到这个也是个问题, 也没有看到前人博客的关于这个 JS 文件版本的指点.
五: 要注意分享功能的签名 signature 必须要在后台获取, 如果前端的话会暴露 appID 和密钥, 这样的话非常不安全, 微信也不建议这么做.
六: 注意开启微信分享调试功能, debug:true; 这样在 console 后台可以看到报错, 而且要注意的是微信分享或者微信的其他功能在浏览器的手机模拟端时是不会显示效果的, 必须要使用微信开发者工具, 当数据获取成功的时候回提示 errMsg:'config:ok', 刚开始看到是 errMsg 我还以为这不是成功的提示而是失败的提示呢, 其实并不然. 当一切都完成的时候, 要把 alert 测试信息去掉, 不然苹果手机会莫名的出现弹框.
剩下的就是业务逻辑了, 这个就非常简单了
直接上代码
首先要请求, 后端的接口, 获取签名等数据
- // 分享功能请求接口获取签名等数据
- $.Ajax({
url: 请求的接口,
type: 请求的方式,
data: 传入的参数,
- success:function (res) {
- wx.config({
- debug: false,
- appId: res.retData.appId,
- timestamp: res.retData.timestamp,
- nonceStr: res.retData.nonceStr,
- signature: res.retData.signature,
- jsApiList: [
- 'onMenuShareAppMessage','onMenuShareTimeline'
- ]
- });
- }
- })
- // 点击分享按钮进行分享事件
- wx.ready(function () {
- // 2.2 监听 "分享到朋友圈" 按钮点击, 自定义分享内容及分享结果接口
- document.querySelector(点击的按钮).onclick = function () {
- document.getElementById(蒙版层).style.display='block';
- // 分享到朋友圈
- wx.onMenuShareTimeline({
title: 分享标题,
desc: 分享描述,
link: 分享链接,
imgUrl: 分享图片的链接,
- trigger: function (res) {
- alert(res) ///// 注意苹果手机分享的时候要去掉 alert 事件, 不然会出现莫名的弹框
- },
- success: function (res) {
- alert(res)
- },
- cancel: function (res) {
- },
- fail: function (res) {
- }
- });
- // 分享给朋友
- wx.onMenuShareAppMessage({
title: 分享标题,
desc: 分享描述,
link: 分享链接,
imgUrl: 分享图片的链接,
- trigger: function (res) {
- },
- success: function (res) {
- },
- cancel: function (res) {
- },
- fail: function (res) {
- }
- });
- };
- })
来源: https://www.cnblogs.com/wangyali-0402/p/11043979.html