微信分享 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);

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

上一篇:[轉載]史上最强php生成pdf文件,html转pdf文件方法


下一篇:50个js技巧(分享)