我现在做过的在微信中运行的项目，基本上都有微信分享功能，所以，会使用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);
有了上面的这些代码之后，下一次再遇到这类需求时，我就更得心应手了。
时间： 2024-10-08 12:44:24