我現在做過的在微信中運行的項目，基本上都有微信分享功能，所以，會使用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，兄弟，好久不見！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頁面中使用。
<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，兄弟，好久不見！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中。
<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);
有了上面的這些代碼之后，下一次再遇到這類需求時，我就更得心應手了。
