码迷,mamicode.com
首页 > 微信 > 详细

微信分享 JSSDK的使用

时间:2017-11-07 22:19:19      阅读:447      评论:0      收藏:0      [点我收藏+]

标签:tle   https   elf   标题   his   detail   const   app   default   

我现在做过的在微信中运行的项目,基本上都有微信分享功能,所以,会使用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);

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

微信分享 JSSDK的使用

标签:tle   https   elf   标题   his   detail   const   app   default   

原文地址:http://www.cnblogs.com/sebastian-tyd/p/7800919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!