我现在做过的在微信中运行的项目，基本上都有微信分享功能，所以，会使用JSSDK分享页面是非常重要的。
分享功能的代码一般会放在beforeCreate或mounted钩子中，代码如下：
1 this.$http.get("group/identity") 2 .then(({data:{code, content, jssdk, msg}}) => { 3 if (code == 0) { 4 this.group_id = content.group_id; 5 if(this.group_id){ 6 this.isSignUpBtn = false; 7 this.isMyBtn = true; 8 9 // 这里放分享功能的代码 10 11 } 12 } else { 13 MessageBox('提示', msg) 14 } 15 }, ({data:{msg}}) => { 16 MessageBox('提示', msg); 17 });
假如下面是我们请求接口的数据：
1 { 2 "code": 0, 3 "msg": "请求成功的消息", 4 "content": "这里放数据", 5 "is_mobile_user": true, 6 "jssdk": { 7 "appId": "wxec4d172a4f73ee6f", 8 "timestamp": "1487756879", 9 "nonceStr": "58ad5e4f70226", 10 "signature": "418034b044c61eef9375ada45a1dc373a5e4b7db" 11 } 12 }
一切准备就绪之后，我们来根据不同页面的使用方式一一分解：
先说引入的问题：
// 首先，在index.html页面先引入JSSDK文件
1 <script type="text/javascript"> 2 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); 3 document.write(decodeURI("%3Cscript src='" + _bdhmProtocol + "res.wx.qq.com/open/js/jweixin-1.0.0.js' type='text/javascript'%3E%3C/script%3E")); 4 </script> 5 6 // 当然，你也可以用最简单的方式引入 7 <script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script> 8 9 // 我个人比较喜欢第一种。
下面就开始使用了，先来一个代码初级版本的方式：
// 方式一，所有代码直接写在页面里面上，分享出去后，用户直接点击分享的链接就回到当前这个页，不需要拼接 link，有动态参数
1 // 获取jssdk需要的数据 2 let jssdk = data.jssdk; 3 // 配置功能 4 wx.config({ 5 debug: false, 6 appId: jssdk.appId, 7 timestamp: parseInt(jssdk.timestamp), 8 nonceStr: jssdk.nonceStr, 9 signature: jssdk.signature, 10 jsApiList: [ 11 "onMenuShareTimeline", 12 "onMenuShareAppMessage" 13 ] 14 }); 15 wx.ready(function () { 16 wx.onMenuShareTimeline({ 17 title: "我们的战场我们的团，快来为" + self.headerData.class + "王者而战！", // 分享标题 18 desc: "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！", 19 link: location.href, // 分享链接 20 imgUrl: "https://tup.iheima.com/sport.png", // 分享图标 21 success: function () { 22 // alert("成功"); 23 }, 24 cancel: function () { 25 // alert("失败") 26 } 27 }); 28 wx.onMenuShareAppMessage({ 29 title: "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！", // 分享标题 30 desc: "哥们儿，咱很没一起排位了，Hey兄弟们！咱该怒砍一血了！", 31 link: location.href, // 分享链接 32 imgUrl: "https://tup.iheima.com/sport.png", // 分享图标 33 success: function () { 34 // alert("成功"); 35 }, 36 cancel: function () { 37 // alert("失败") 38 } 39 }); 40 }); 41 // self.headerData.class 为需要动态传入的参数，获取数据的时候直接取出来就行。
// 方式二，所有代码直接写在页面里面上，需要拼接link，一般放在首页或对外分享的主页面，没有动态参数
1 // 获取jssdk需要的数据 2 let jssdk = data.jssdk; 3 // 配置功能 4 wx.config({ 5 debug: false, 6 appId: jssdk.appId, 7 timestamp: parseInt(jssdk.timestamp), 8 nonceStr: jssdk.nonceStr, 9 signature: jssdk.signature, 10 jsApiList: [ 11 "onMenuShareTimeline", 12 "onMenuShareAppMessage" 13 ] 14 }); 15 var hostName = 'https://wx.chuangyejia.com/'; 16 var pathName = 'fe-sport/#/home'; 17 wx.ready(function() { 18 wx.onMenuShareTimeline({ 19 title: "王者荣耀正在招团长，快来一战成名！", // 分享标题 20 desc: "Hey，兄弟，好久不见！11月7日，王者战场见。", 21 link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接 22 imgUrl: "https://tup.iheima.com/sport.png", // 分享图标 23 success: function() { 24 // alert("成功"); 25 }, 26 cancel: function() { 27 // alert("失败") 28 } 29 }); 30 31 wx.onMenuShareAppMessage({ 32 title: "王者荣耀正在招团长，快来一战成名！", // 分享标题 33 desc: "Hey，兄弟，好久不见！11月7日，王者战场见。", 34 link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接 35 imgUrl: "https://tup.iheima.com/sport.png", // 分享图标 36 success: function() { 37 // alert("成功"); 38 }, 39 cancel: function() { 40 // alert("失败") 41 } 42 }); 43 });
// 方式三，将分享的代码单独剥离出来成一个js文件，然后在需要的地方引入这个js文件。（推荐）
// utils.js文件中有如下代码
1 const shareJs = function(jssdk, options) { 2 wx.config({ 3 debug: false, 4 appId: jssdk.appId, 5 timestamp: parseInt(jssdk.timestamp), 6 nonceStr: jssdk.nonceStr, 7 signature: jssdk.signature, 8 jsApiList: [ 9 "onMenuShareTimeline", 10 "onMenuShareAppMessage" 11 ] 12 }); 13 var defaults = { 14 title: "分享的标题", 15 desc: "分享的描述", 16 link: location.href, //分享页面地址,不能为空 17 imgUrl: 'https://tup.iheima.com/sport.png', //分享是封面图片，不能为空 18 success: function() {}, //分享成功触发 19 cancel: function() {} //分享取消触发，需要时可以调用 20 } 21 options = Object.assign({}, defaults, options); 22 wx.ready(function() { 23 var thatopts = options; 24 wx.onMenuShareTimeline({ 25 title: thatopts.title, // 分享标题 26 desc: thatopts.desc, // 分享描述 27 link: thatopts.link, // 分享链接 28 imgUrl: thatopts.imgUrl, // 分享图标 29 success: function() { 30 // alert("成功"); 31 }, 32 cancel: function() { 33 // alert("失败") 34 } 35 }); 36 wx.onMenuShareAppMessage({ 37 title: thatopts.title, // 分享标题 38 desc: thatopts.desc, // 分享描述 39 link: thatopts.link, // 分享链接 40 imgUrl: thatopts.imgUrl, // 分享图标 41 success: function() { 42 // alert("成功"); 43 }, 44 cancel: function() { 45 // alert("失败") 46 } 47 }); 48 }); 49 } 50 51 52 module.exports = { 53 shareJs 54 };
// 在home.vue页面中使用
1 <script type="text/ecmascript-6"> 2 import { shareJs } from './../utils'; // 引入分享功能的js文件 3 // 需要拼接地址的地方 4 let jssdk = data.jssdk; 5 var hostName = 'https://wx.chuangyejia.com/'; 6 var pathName = 'fe-sport/#/home'; 7 let optionData = { 8 title: "王者荣耀正在招团长，快来一战成名！", 9 desc: "Hey，兄弟，好久不见！11月7日，王者战场见。", 10 link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, 11 imgUrl: "https://tup.iheima.com/sport.png" 12 }; 13 shareJs(jssdk, optionData); 14 15 16 // 不需要拼接地址的地方 17 let jssdk = data.jssdk; 18 // 准备好要传入到utils.js文件中的参数。 19 let optionData = { 20 title: "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！", 21 desc: "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！", 22 link: location.href, 23 imgUrl: "https://tup.iheima.com/sport.png" 24 }; 25 // 将jssdk和分享后展示的参数传入 26 shareJs(jssdk, optionData); 27 28 // self.headerData.class 为需要动态传入的参数，获取数据的时候直接取出来就行。
// 或者还可以像下面这样写，先将分享的内容准备后，然后以更简洁的方式赋值给专入到utils.js中
1 <script> 2 let fromPath = ''; 3 beforeRouteEnter (to, from, next) { 4 fromPath = from.path; 5 next(); 6 }, 7 // 获取fromPath 8 </script>
1 let toLink = location.href; 2 let titleDetail = "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！"; 3 let destDetail = "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！"; 4 // 根据不同的情况来修改分享后显示的文案。 5 if(fromPath.substr(-1) == "/"){ 6 toLink = "http://wx.chuangyejia.com/mobile/sport/whoami"; 7 titleDetail = "商场王者，快来测试你是王者荣耀里的谁？"; 8 destDetail = "王者荣耀开幕在即，众多神装大佬已整装待发，速来测试你的王者基因，你更适合加入哪支王者战队？" 9 } 10 11 let myJssdk = jssdk; 12 let optionData = { 13 title: titleDetail, 14 desc: destDetail, 15 link: toLink, 16 imgUrl: "https://tup.iheima.com/sport.png" 17 }; 18 shareJs(myJssdk, optionData);
有了上面的这些代码之后，下一次再遇到这类需求时，我就更得心应手了。