微信分享 JSSDK的使用

我现在做过的在微信中运行的项目，基本上都有微信分享功能，所以，会使用JSSDK分享页面是非常重要的。
分享功能的代码一般会放在beforeCreate或mounted钩子中，代码如下：

 this.$http.get("group/identity")
        .then(({data:{code, content, jssdk, msg}}) => {
             if (code == 0) {
                  this.group_id = content.group_id;
                  if(this.group_id){
                       this.isSignUpBtn = false;
                       this.isMyBtn = true;
 
                       // 这里放分享功能的代码 
 
                  }
             } else {
                  MessageBox('提示', msg)
            }
     }, ({data:{msg}}) => {
           MessageBox('提示', msg);
 });

假如下面是我们请求接口的数据：

 {
   "code": 0,
   "msg": "请求成功的消息",
   "content": "这里放数据",
   "is_mobile_user": true,
   "jssdk": {
     "appId": "wxec4d172a4f73ee6f",
     "timestamp": "1487756879",
     "nonceStr": "58ad5e4f70226",
     "signature": "418034b044c61eef9375ada45a1dc373a5e4b7db"
   }
 }

一切准备就绪之后，我们来根据不同页面的使用方式一一分解：

先说引入的问题：
// 首先，在index.html页面先引入JSSDK文件

 <script type="text/javascript">
     var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
     document.write(decodeURI("%3Cscript src='" + _bdhmProtocol + "res.wx.qq.com/open/js/jweixin-1.0.0.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 
 // 当然，你也可以用最简单的方式引入
 <script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
 
 // 我个人比较喜欢第一种。

下面就开始使用了，先来一个代码初级版本的方式：
// 方式一，所有代码直接写在页面里面上，分享出去后，用户直接点击分享的链接就回到当前这个页，不需要拼接 link，有动态参数

 // 获取jssdk需要的数据
 let jssdk = data.jssdk;
 // 配置功能
 wx.config({
     debug: false,
     appId: jssdk.appId,
     timestamp: parseInt(jssdk.timestamp),
     nonceStr: jssdk.nonceStr,
     signature: jssdk.signature,
     jsApiList: [
         "onMenuShareTimeline",
         "onMenuShareAppMessage"
     ]
 });
 wx.ready(function () {
     wx.onMenuShareTimeline({
         title: "我们的战场我们的团，快来为" + self.headerData.class + "王者而战！", // 分享标题
         desc: "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！",
         link: location.href, // 分享链接
         imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
         success: function () {
             // alert("成功");
         },
         cancel: function () {
             // alert("失败")
         }
     });
     wx.onMenuShareAppMessage({
         title: "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！", // 分享标题
         desc: "哥们儿，咱很没一起排位了，Hey兄弟们！咱该怒砍一血了！",
         link: location.href, // 分享链接
         imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
         success: function () {
             // alert("成功");
         },
         cancel: function () {
             // alert("失败")
         }
     });
 });
 //  self.headerData.class 为需要动态传入的参数，获取数据的时候直接取出来就行。

// 方式二，所有代码直接写在页面里面上，需要拼接link，一般放在首页或对外分享的主页面，没有动态参数

 // 获取jssdk需要的数据
 let jssdk = data.jssdk;
 // 配置功能
 wx.config({
     debug: false,
     appId: jssdk.appId,
     timestamp: parseInt(jssdk.timestamp),
     nonceStr: jssdk.nonceStr,
     signature: jssdk.signature,
     jsApiList: [
         "onMenuShareTimeline",
         "onMenuShareAppMessage"
     ]
 });
 var hostName = 'https://wx.chuangyejia.com/';
 var pathName = 'fe-sport/#/home';
 wx.ready(function() {
     wx.onMenuShareTimeline({
         title: "王者荣耀正在招团长，快来一战成名！", // 分享标题
         desc: "Hey，兄弟，好久不见！11月7日，王者战场见。",
         link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接
         imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
         success: function() {
             // alert("成功");
         },
         cancel: function() {
             // alert("失败")
         }
     });
 
     wx.onMenuShareAppMessage({
         title: "王者荣耀正在招团长，快来一战成名！", // 分享标题
         desc: "Hey，兄弟，好久不见！11月7日，王者战场见。",
         link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接
         imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
         success: function() {
             // alert("成功");
         },
         cancel: function() {
             // alert("失败")
         }
     });
 });

// 方式三，将分享的代码单独剥离出来成一个js文件，然后在需要的地方引入这个js文件。（推荐）
// utils.js文件中有如下代码

 const shareJs = function(jssdk, options) {
     wx.config({
         debug: false,
         appId: jssdk.appId,
         timestamp: parseInt(jssdk.timestamp),
         nonceStr: jssdk.nonceStr,
         signature: jssdk.signature,
         jsApiList: [
             "onMenuShareTimeline",
             "onMenuShareAppMessage"
         ]
     });
     var defaults = {
         title: "分享的标题",
         desc: "分享的描述",
         link: location.href, //分享页面地址,不能为空
         imgUrl: 'https://tup.iheima.com/sport.png', //分享是封面图片，不能为空
         success: function() {}, //分享成功触发
         cancel: function() {} //分享取消触发，需要时可以调用
     }
     options = Object.assign({}, defaults, options);
     wx.ready(function() {
         var thatopts = options;
         wx.onMenuShareTimeline({
             title: thatopts.title, // 分享标题
             desc: thatopts.desc, // 分享描述
             link: thatopts.link, // 分享链接
             imgUrl: thatopts.imgUrl, // 分享图标
             success: function() {
                 // alert("成功");
             },
             cancel: function() {
                 // alert("失败")
             }
         });
         wx.onMenuShareAppMessage({
             title: thatopts.title, // 分享标题
             desc: thatopts.desc, // 分享描述
             link: thatopts.link, // 分享链接
             imgUrl: thatopts.imgUrl, // 分享图标
             success: function() {
                 // alert("成功");
             },
             cancel: function() {
                 // alert("失败")
             }
         });
     });
 }
 
 module.exports = {
     shareJs
 };

// 在home.vue页面中使用

 <script type="text/ecmascript-6">
 import { shareJs } from './../utils';  // 引入分享功能的js文件
 // 需要拼接地址的地方
 let jssdk = data.jssdk;
 var hostName = 'https://wx.chuangyejia.com/';
 var pathName = 'fe-sport/#/home';
 let optionData = {
     title: "王者荣耀正在招团长，快来一战成名！",
     desc: "Hey，兄弟，好久不见！11月7日，王者战场见。",
     link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName,
     imgUrl: "https://tup.iheima.com/sport.png"
 };
 shareJs(jssdk, optionData);
 
 // 不需要拼接地址的地方
 let jssdk = data.jssdk;
 // 准备好要传入到utils.js文件中的参数。
 let optionData = {
     title: "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！",
     desc: "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！",
     link: location.href,
     imgUrl: "https://tup.iheima.com/sport.png"
 };
 // 将jssdk和分享后展示的参数传入
 shareJs(jssdk, optionData);
 
 //  self.headerData.class 为需要动态传入的参数，获取数据的时候直接取出来就行。

// 或者还可以像下面这样写，先将分享的内容准备后，然后以更简洁的方式赋值给专入到utils.js中

 <script>
 let fromPath = '';
 beforeRouteEnter (to, from, next) {
       fromPath = from.path;
       next();
 },
 // 获取fromPath
 </script>

 let toLink = location.href;
 let titleDetail = "我们的战场我们的团，快来为" + self.headerData.class + "王者荣誉而战！";
 let destDetail = "哥们儿，咱很久没一起排位了，Hey兄弟们！咱该怒砍一血了！";
 // 根据不同的情况来修改分享后显示的文案。
 if(fromPath.substr(-1) == "/"){
       toLink = "http://wx.chuangyejia.com/mobile/sport/whoami";
       titleDetail = "商场王者，快来测试你是王者荣耀里的谁？";
       destDetail = "王者荣耀开幕在即，众多神装大佬已整装待发，速来测试你的王者基因，你更适合加入哪支王者战队？"
 }
 
 let myJssdk = jssdk;
 let optionData = {
       title: titleDetail,
       desc: destDetail,
       link: toLink,
       imgUrl: "https://tup.iheima.com/sport.png"
 };
 shareJs(myJssdk, optionData);

有了上面的这些代码之后，下一次再遇到这类需求时，我就更得心应手了。