在做自定義分享時，用到了微信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、前端使用

在需要自定義分享的界面，簡單舉個例子，以首頁為例：

if?(this.$wechat?&&?this.$wechat.isWechat())?{??
????this.$wechat.share({
????????desc:?"精選優質、有價值的好文章，轉發給身邊的人",??
????????img:?"http://img.sscai.club/click.jpeg"?
????});??
}

補充：share 方法有個 url 參數，如不指定則使用當前頁面url，具體參考 wechat.js

使用截圖如下所示：

文章最后

博客地址：https://www.cgblog.com/niceyoo

如果覺得這篇文章有丶東西，不妨關注一下我，關注是對我最大的鼓勵~

18年專科畢業后，期間一度迷茫，最近我創建了一個公眾號用來記錄自己的成長。

總結

以上是生活随笔為你收集整理的uniapp中使用微信jssdk的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。