1、下載weixin-js-sdk 的依賴
cnpm install weixin-js-sdk --save
2研侣、在需要分享的文件中引入
import wx from 'weixin-js-sdk'
3球碉、分享及相關的前端代碼
mounted:function () {
let urlStr = location.href.split('#')[0];
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
//獲取簽名串
this.$http.post(BaseConfig.url+'/wechat/getSignature',
{"urlStr":urlStr}
).then((res) => {
// 請求成功的回調
var result = res.data;
if(result.code==1){
let data = JSON.parse(result.data);
wx.config({
debug : false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開达布，參數信息會通過log打出，僅在pc端時才會打印逾冬。
appId : data.appId, // 必填黍聂，公眾號的唯一標識
timestamp : data.timestamp, // 必填，生成簽名的時間戳
nonceStr : data.nonceStr, // 必填身腻，生成簽名的隨機串
signature : data.signature,// 必填产还，簽名，見附錄1
jsApiList: [? //必填嘀趟，需要使用的JS接口列表
'onMenuShareTimeline',
'onMenuShareAppMessage',
'hideMenuItems',
'showMenuItems'
]
});
let title = "分享的標題";
let desc = "分享的副標題";
let link = "分享的鏈接脐区，域名要跟微信公眾號配置的安全域名一致";
let imgUrl = "分享圖片的url";
wx.ready(function() {
//批量顯示菜單項
wx.showMenuItems({
menuList: [
"menuItem:share:appMessage",
"menuItem:share:timeline"
], // 要顯示的菜單項
success: function (res) {},
fail: function (res) {}
});
// 批量隱藏菜單項
wx.hideMenuItems({
menuList: [
'menuItem:share:qq', //分享到QQ
'menuItem:share:weiboApp', // 分享到Weibo
'menuItem:favorite', // 收藏
'menuItem:share:QZone', // 分享到 QQ 空間
'menuItem:copyUrl', // 復制鏈接
'menuItem:openWithQQBrowser', // 在QQ瀏覽器中打開
'menuItem:openWithSafari', // 在Safari中打開
'menuItem:share:email', // 郵件
'menuItem:readMode', // 閱讀模式
'menuItem:originPage' // 原網頁
] ,
success: function (res) {},
fail: function (res) {}
});
//分享給朋友
wx.onMenuShareAppMessage({
title : title,// 分享標題
desc : desc,// 分享描述
link : link,// 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl : imgUrl, // 分享圖標
type : 'link', // 分享類型,music她按、video或link牛隅，不填默認為link
dataUrl : '', // 如果type是music或video炕柔，則要提供數據鏈接，默認為空
success : function() {},
cancel : function() {}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title : title,// 分享標題
link : link,// 分享鏈接媒佣，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl : imgUrl, // 分享圖標
success : function() {},
cancel : function() {}
});
});
wx.error(function(res) {
// config信息驗證失敗會執(zhí)行error函數匕累，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看默伍，也可以在返回的res參數中查看哩罪，對于SPA可以在這里更新簽名。
alert("error==" + res.errMsg);
});
}else{
wx.hideOptionMenu();
}
},? (err) => {
// 請求失敗的回調
console.log("獲取簽名串出錯巡验！"+err);
}
);
}
}
4际插、后端獲取簽名串參考代碼
public String getSignature(String urlStr) { logger.info("urlStr:"+urlStr); MapmodelMap = new HashMap();
String timestamp = System.currentTimeMillis()/1000+"";//時間戳? 單位是秒
String nonceStr = "";//隨機字符串
String jsapi_ticket = null;//調用接口獲取
try {
jsapi_ticket = "請求微信服務器獲取jsapi_ticket，可參考api";
logger.info("jsapi_ticket:"+jsapi_ticket);
String signValue = "jsapi_ticket="+jsapi_ticket+"&noncestr="+nonceStr+"×tamp="+timestamp+"&url="+urlStr;
logger.info("signValue:"+signValue);
String signature = getSha1(signValue);
logger.info("signature:"+signature);
modelMap.put("timestamp", timestamp);//生成簽名的時間戳
modelMap.put("nonceStr", nonceStr);//生成簽名的隨機串
modelMap.put("appId","APPID");//公眾號的唯一標識
modelMap.put("signature",signature );//簽名串
logger.info("json:"+StringUtil.toJson(modelMap));
return StringUtil.toJson(modelMap);
} catch (Exception e) {
e.printStackTrace();
throw new CustomException(ResultEnum.GET_JSAPI_TICKET_FAIL.getCode(),ResultEnum.GET_JSAPI_TICKET_FAIL.getMsg());
}
}
// 對密鑰進行sha1加密
public static String getSha1(String str) {
if (str == null || str.length() == 0) {
return null;
}
char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f' };
try {
MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
mdTemp.update(str.getBytes("GBK"));
byte[] md = mdTemp.digest();
int j = md.length;
char buf[] = new char[j * 2];
int k = 0;
for (int i = 0; i < j; i++) {
byte byte0 = md[i];
buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
buf[k++] = hexDigits[byte0 & 0xf];
}
return new String(buf);
} catch (Exception e) {
return null;
}
}
