微信自定义分享功能,微信js-sdk使用总结
需求: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() { // 用户取消分享后执行的回调函数 } }); }); }); },`
如果对你有所帮助,麻烦点个赞再走吧 ^_^
相关推荐
戴翔的技术 2020-05-18
齐天大圣数据候 2020-05-16
过时不侯的温暖 2020-05-08
浪味仙 2020-04-20
戴翔的技术 2020-03-04
zengfanpei 2020-02-20
cbao 2020-02-14
xiaonao00 2020-01-02
xiaonao00 2019-12-25
cbao 2019-12-12
浪味仙 2019-12-10
maodouhuasheng 2019-12-04
且听真言 2019-12-01
ywwazyj 2019-11-15
badroot 2019-11-18
zhichijunjun 2019-11-13
wjeymiantan 2019-11-07