大概是2月份那会项目的中需求吧。分享商品详情以及拼团成功后需要分享商品链接。
大概流程是这样的
- 引入微信的 weixin-js-sdk (可以直接npm安装也可以直接引入js链接)
import wx from 'weixin-js-sdk'; - 通过sdk的config接口 注入权限验证配置(里头的appid,时间戳，随机串和签名需要后台处理后返回)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: item.AppId, // 必填，公众号的唯一标识
timestamp: item.Timestamp, // 必填，生成签名的时间戳
nonceStr: item.NonceStr, // 必填，生成签名的随机串
signature: item.Signature, // 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
- config验证成功后,通过sdk的ready函数里调用
onMenuShareTimeline(朋友圈)和onMenuShareAppMessage（微信好友）
参考下面的_initShare方法。参数分别是分享标题、分享链接、图片、描述
//设置分享
_initShare(shareTitle, url, shareImg, shareDesc) {
wx.ready(() => {
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
link: url.timeline, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareImg, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
Toast('分享成功！！！');
},
cancel: function () {
// 用户取消分享后执行的回调函数
Toast('取消分享！！！');
}
});
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
link: url.friend,
imgUrl: shareImg, // 分享图标
type: "", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
Toast('分享成功！！！');
},
cancel: function () {
// 用户取消分享后执行的回调函数
Toast('取消分享！！！');
}
});
})
}
注：上面代码只贴了核心的，有的变量啊什么的没贴全，自己稍微修改下就行了。思路对了就ok~
这里有个关于spa项目页面链接带‘#’的ios微信分享深坑～
先贴下来自官方的文档说明
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）
原来，SPA中，微信只记录了一开始进应用的第一个链接，并用它去参与生成签名，而不是用当前的URL（这个解释了为什么使用location.href首次进入页面是报错的，而换成第一个URL却是对的）；
而刷新一次，当前列表页面的链接发生了改变，变成了重定向之后的链接，结果就是对的了。
这个坑爹的问题在小程序开发工具里头一直测不出来，安卓也没问题，唯独ios.
后来就是参考网上的在首页和子页面的mounted里加上
!window.initUrl && (window.initUrl = window.location.href)
即可，即 将当前URL挂载在全局变量中
在微信初始化config请求接口的时候，所传的url参数就用window.initUrl来初始化，安卓的话还是用location.href
就这样啦～做个记录，以后有需要就能想起来。也供大家参考。之前还看到过在路由的beforeEach里头路径初始化时做处理，但是没弄成功，如果有更方便的方法，可以分享一波哈。
路过的顺便点个赞吧;-）
欢迎加微信交流(记得写备注哦)
benny.png
网友评论