jssdk分享设置_微信分享 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文件。

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"));

// 当然，你也可以用最简单的方式引入

// 我个人比较喜欢第一种。

下面就开始使用了，先来一个代码初级版本的方式：

// 方式一，所有代码直接写在页面里面上，分享出去后，用户直接点击分享的链接就回到当前这个页，不需要拼接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，兄弟，好久不见！3月25日，黑马校友运动会，北京见。",

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，兄弟，好久不见！3月25日，黑马校友运动会，北京见。",

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页面中使用。

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，兄弟，好久不见！3月25日，黑马校友运动会，北京见。",

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中。

let fromPath = '';

beforeRouteEnter (to, from, next) {

fromPath = from.path;

next();

},

// 获取fromPath

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);

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