在做自定義分享時，用到了微信jssdk，記錄一下。
聲明：本文演示uniapp中使用jssdk，示例為網頁自定義分享
npm方式使用下方指令進行安裝，正文部分為非npm方式。
npm install jweixin-module --save
1、下載導入jssdk文件
下載鏈接：https://www.lanzous.com/i8ujkvi
下載后放在項目中，具體放置位置可自行選擇，比如直接放在根目錄，或者放在 components 目錄，如下是我的參考截圖：
2、在項目中引用
為了方便使用，我們單獨出一個微信相關的 js 文件，進行相關的初始化等操作。
wechat.js 「該文件我放置在項目根目錄，可以根據自己情況選擇」
// 自己封裝的 uni.request 工具類
var request = require("./jsTools/request.js");
var jweixin = require('./components/jweixin-module/index.js');
export default {
//判斷是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
// console.log('是微信客戶端')
return true;
} else {
// console.log('不是微信客戶端')
return false;
}
},
//初始化sdk配置
initJssdkShare: function(callback, url) {
console.log("init Url : "+url)
// 這是我這邊封裝的 request 請求工具，實際就是 uni.request 方法。
request.post(
'http://127.0.0.1:8080/mptask/api/getSignPackage',
{
url: url
},
"form",
function(res){
let success = res["success"];
let result = res["result"];
if(success){
jweixin.config({
debug: false,
appId: result.appId,
timestamp: result.timestamp,
nonceStr: result.nonceStr,
signature: result.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
//配置完成后，再執行分享等功能
if (callback) {
callback(result);
}
}
}
);
},
//在需要自定義分享的頁面中調用
share: function(data, url) {
url = url ? url : window.location.href;
console.log("url:"+url)
if (!this.isWechat()) {
return;
}
//每次都需要重新初始化配置，才可以進行分享
this.initJssdkShare(function(signData) {
jweixin.ready(function() {
var shareData = {
title: data && data.title ? data.title : signData.site_name,
desc: data && data.desc ? data.desc : signData.site_description,
link: url,
imgUrl: data && data.img ? data.img : signData.site_logo,
success: function(res) {
// 分享后的一些操作,比如分享統計等等
},
cancel: function(res) {}
};
//分享給朋友接口
jweixin.onMenuShareAppMessage(shareData);
//分享到朋友圈接口
jweixin.onMenuShareTimeline(shareData);
});
}, url);
},
}
簡單說一這里面的方法：
- isWechat：判斷當前是否是微信環境
- initJssdkShare：請求后台接口數據，初始化sdk
- share：本次使用的自定義分享的方法
main.js 中引用：
將上方的 wechat.js 定義為為 vue 全局屬性，方便后面使用。
import wechat from './wechat.js'
if(wechat.isWechat()){
Vue.prototype.$wechat =wechat;
}
3、后台方法（Java）「簽名方法」
基於 WxJava 開源SDK
/**
* 獲取jssdk簽名
* @return
*/
@RequestMapping(value = "/getSignPackage", method = RequestMethod.POST)
public Result<Object> getSignPackage(String url) throws WxErrorException {
return new ResultUtil<Object>().setData(wxMpService.createJsapiSignature(url));
}
補充：關於 WxJava 的使用可以參考上一篇 微信h5非內部瀏覽器支付，該方法接收一個 url 參數，即前端用來分享的 url。
如下是詳細的實現：
public WxJsapiSignature createJsapiSignature(String url) throws WxErrorException {
long timestamp = System.currentTimeMillis() / 1000L;
String randomStr = RandomUtils.getRandomStr();
String jsapiTicket = this.getJsapiTicket(false);
String signature = SHA1.genWithAmple(new String[]{"jsapi_ticket=" + jsapiTicket, "noncestr=" + randomStr, "timestamp=" + timestamp, "url=" + url});
WxJsapiSignature jsapiSignature = new WxJsapiSignature();
jsapiSignature.setAppId(this.getWxMpConfigStorage().getAppId());
jsapiSignature.setTimestamp(timestamp);
jsapiSignature.setNonceStr(randomStr);
jsapiSignature.setUrl(url);
jsapiSignature.setSignature(signature);
return jsapiSignature;
}
4、前端使用
在需要自定義分享的界面，簡單舉個例子，以首頁為例，將下方在代碼放在 onload 或 onshow 中：
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({
desc: "精選優質、有價值的好文章，轉發給身邊的人",
img: "http://img.sscai.club/click.jpeg"
});
}
補充：share 方法有個 url 參數，如不指定則使用當前頁面url，具體參考 wechat.js
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({
desc: "精選優質、有價值的好文章，轉發給身邊的人",
img: "http://img.sscai.club/click.jpeg"
},"http://mp.sscai.club/#/history/history");
}
使用截圖如下所示：
文章最后
博客地址：https://www.cgblog.com/niceyoo
如果覺得這篇文章有丶東西，不妨關注一下我，關注是對我最大的鼓勵~
18年專科畢業后，期間一度迷茫，最近我創建了一個公眾號用來記錄自己的成長。
