自定义微信分享功能微信jssdk使用总结
需求：vue项目移动端要求用户在公众号中分享出去的链接是图片+文字+标题的形式。而不是默认的要实现的效果如图所示： 不设置时，分享的默认效果,如下图所示： 几个要注意的地方：wx.config 所有的配置项的数据都是后台返回的wx.config配置项的参数大小写一定要按照官网文档来，区分大小写，但是获取到的后台返回的字段可以自由定义，这个时候要注意后台返回的数据字段名称是否和官网的一致，在这块有个问题找了半天，结果最后发现wx.config配置项里面后台返回的res.data.noncestr中noncestr为小写，而自己没有细看一直以为也是nonceStr.导致config:fail.分享时，请求的url不能带有hash值等，所以要进行截取具体参考代码如下所示：` wxShared() { let newUrl = window.location.href.split("#")[0]; // let url = newUrl; this.$store.dispatch("GetTicketJSAPI", url).then(res => { let params = { debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: "wx3dab174110e5f840", // 必填，企业微信的corpID timestamp: res.data.timestamp, // 必填，生成签名的时间戳*************** nonceStr: res.data.noncestr, // 必填，生成签名的随机串 必填，生成签名的随机串*************** signature: res.data.signature, // 必填，签名*************** jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"] }; wx.config(params); //通过config接口注入权限验证配置 wx.ready(function() { // config信息验证成功后会执行ready方法 //通过ready接口处理成功验证 wx.onMenuShareAppMessage({ // 分享给朋友 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", // 分享描述 link: res.data.str, // 分享链接 imgUrl: "http://www.shengdongyushang.com/upload/asserts/sdys_logo1.png", // 分享图标 type: "", // 分享类型,music、video或link，不填默认为link dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ //分享朋友圈 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", link: res.data.str, imgUrl: "https://qccdata.qichacha.com/AutoImage/052236e320f34be80991ce01fd8cd138.jpg?x-oss-process=image/resize,w_120", // 分享图标 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); }); });},`如果对你有所帮助，麻烦点个赞再走吧 ^_^