這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在vue項(xiàng)目中利用微信JS-SDK實(shí)現(xiàn)一個(gè)分享功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比巴林左旗網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式巴林左旗網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋巴林左旗地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

1.綁定域名

微信公眾號(hào)開發(fā)測(cè)試帳號(hào)：  http://mp.weixin.qq.com/debug ...  ，需要填寫接口配置，一個(gè)公網(wǎng)能訪問的域名，推薦用natapp/路由俠。填寫JS接口安全域名 ，設(shè)置JS接口安全域后，通過關(guān)注該測(cè)試號(hào)，開發(fā)者即可在該域名下調(diào)用微信開放的JS接口，請(qǐng)閱讀 微信JSSDK開發(fā)文檔

1）這里使用路由俠，實(shí)現(xiàn)內(nèi)網(wǎng)穿透  http://www.luyouxia.com/   ，下載安裝后，配置相應(yīng)的內(nèi)網(wǎng)映射地址

2）設(shè)置JS接口安全域

2.引入JS文件

通過npm安裝微信的js-sdk，或者在index.html頁面中直接加script標(biāo)簽來引用，這里采用npm安裝，

npm install weixin-js-sdk

在需要分享的頁面中引入

import wx from 'weixin-js-sdk'

3.java實(shí)現(xiàn)js-sdk權(quán)限簽名算法

1)jsapi_ticket

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號(hào)用于調(diào)用微信JS接口的臨時(shí)票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會(huì)導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket。

2）獲取access_token（有效期7200秒，開發(fā)者必須在自己的服務(wù)全局緩存access_token）

access_token是公眾號(hào)的全局唯一接口調(diào)用憑據(jù)，公眾號(hào)調(diào)用各接口時(shí)都需使用access_token，官方文檔：

https://mp.weixin.qq.com/wiki ...

@RequestMapping(value = "/get_access_token", method = RequestMethod.GET)
public String getAssessToken() {
  String url = "https://api.weixin.qq.com/cgi-bin/token";
  String str = HttpClientUtil.sendGet(url, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID);
  JSONObject jsonObject = JSONObject.fromObject(str);
  return jsonObject.toString();
}

3）獲取access_token后，采用http GET方式請(qǐng)求獲得jsapi_ticket

@RequestMapping(value = "/get_ticket", method = RequestMethod.GET)
public String getTicket() {
  String urlToken = "https://api.weixin.qq.com/cgi-bin/token";
  String tokenObj = HttpClientUtil.sendGet(urlToken, "grant_type=" + Constants.GRANTTYPE + "&secret=" + Constants.APPSECRET + "&appid=" + Constants.APPID);
  JSONObject jsonToken = JSONObject.fromObject(tokenObj);
  String access_token = jsonToken.getString("access_token");

  String urlTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
  String strTicket = HttpClientUtil.sendGet(urlTicket, "type=jsapi" + "&access_token=" + access_token);
  JSONObject jsonTicket = JSONObject.fromObject(strTicket); 
  return jsonTicket.toString();
}

4）簽名算法

簽名生成規(guī)則如下：參與簽名的字段包括noncestr（隨機(jī)字符串）, 有效的jsapi_ticket, timestamp（時(shí)間戳）, url（當(dāng)前網(wǎng)頁的URL，不包含#及其后面部分） 。對(duì)所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對(duì)的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。對(duì)string1作sha1加密，字段名和字段值都采用原始值，不進(jìn)行URL 轉(zhuǎn)義。

//主要代碼
 @RequestMapping(value = "/get_signature", method = RequestMethod.GET)
public Map getSignature(String url) {
  Map ret = new HashMap();

  String wxTicket = getWxApiTicket();
  String nonce_str = create_nonce_str();
  String timestamp = create_timestamp();
  String str;
  String signature = "";
  //注意這里參數(shù)名必須全部小寫，且必須有序
  str = "jsapi_ticket=" + wxTicket +
      "&noncestr=" + nonce_str +
      "×tamp=" + timestamp +
      "&url=" + url;
  logger.info(str);

  try {
    MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    crypt.reset();
    crypt.update(str.getBytes("UTF-8"));
    signature = byteToHex(crypt.digest());
  } catch (NoSuchAlgorithmException e) {
    e.printStackTrace();
  } catch (UnsupportedEncodingException e) {
    e.printStackTrace();
  }

  ret.put("url", url);
  ret.put("jsapi_ticket", wxTicket);
  ret.put("nonceStr", nonce_str);
  ret.put("timestamp", timestamp);
  ret.put("signature", signature);
  ret.put("appId", Constants.APPID);
  return ret;
}

簽名接口返回信息

{
  "signature":"4021b3f502e6bd15798a0433af33c4ef1be4ff83",
  "appId":"wx618f45e4948c3889",
  "jsapi_ticket":"sM4AOVdWfPE4DxkXGEs8VOxnOWlkG3Q1qP1pwA8mBLNgkCewNOfFiU8EmlnAx8_Fe0Zh-rGS03Nu8BQZB0a4-g",
  "url":null,
  "nonceStr":"ab5d0e96-429b-4a86-bd88-dc1276dcf76f",
  "timestamp":"1566527616"
}

注意事項(xiàng)

1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

2.簽名用的url必須是調(diào)用JS接口頁面的完整URL。

3.出于安全考慮，開發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

4.通過config接口注入權(quán)限驗(yàn)證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會(huì)導(dǎo)致簽名失敗，此問題會(huì)在Android6.2中修復(fù)）。

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

config配置里面的參數(shù)appid, timestamp, nonceStr, signature都是要后臺(tái)接口返回的，前端可以通過axios發(fā)送接口請(qǐng)求獲取

this.axios.get('/wx/get_signature?url=' + encodeURIComponent(location.href.split('#')[0])).then((res) => {
 wx.config({
  debug: true, // 開啟調(diào)試模式
  appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
  nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
  signature: res.data.signature,// 必填，簽名
  jsApiList: [
   "updateAppMessageShareData",//自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
   "updateTimelineShareData",//自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容
   "onMenuShareWeibo",//獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
  ] // 必填，需要使用的JS接口列表
 })
}).catch((error) => {
 console.log(error)
});

//通過ready接口處理成功驗(yàn)證
wx.ready(function(){
  this.wxShareTimeline();
  this.wxShareAppMessage();
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

wx.error(function(res){
//config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});

5.實(shí)現(xiàn)自定義分享朋友/朋友圈

wxShareTimeline() {// 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
  wx.updateAppMessageShareData({
   title: '世界那么大，我想去看看-微信test', // 分享標(biāo)題
   desc: '世界那么大，我想去看看-微信test', // 分享描述
   link: location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
   imgUrl: 'http://www.baidu.com/FpEhdOqBzM8EzgFz3ULByxatSacH', // 分享圖標(biāo)
   success: () => {
   }
  })
 },
 wxShareAppMessage() {//自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容
  wx.updateTimelineShareData({
   title: '世界那么大，我想去看看-微信test2', // 分享標(biāo)題
   desc: '世界那么大，我想去看看-微信test2', // 分享描述
   link: location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
   imgUrl: require('./logo.jpg'), // 分享圖標(biāo)(不能賦相對(duì)路徑，一定要是絕對(duì)路徑)
   success: () => {
   }
  })
 }

6.遇到問題

1）invalid signature

獲取的簽名錯(cuò)誤，原因可能是公眾號(hào)平臺(tái)配置有問題或者是后臺(tái)返回簽名接口的算法有問題

2）invalid url domain

當(dāng)前頁面所在域名與使用的appid沒有綁定，請(qǐng)確認(rèn)正確填寫綁定的域名，僅支持80（http）和443（https）兩個(gè)端口，因此不需要填寫端口號(hào)。

3）自定義的縮略圖不顯示

路徑錯(cuò)誤導(dǎo)致的，不能使用相對(duì)路徑，一定要是絕對(duì)路徑，另外一個(gè)原因就是圖片尺寸和類型問題，推薦使用jpg格式

4）二次分享導(dǎo)致不能調(diào)用自定義的接口

url進(jìn)行編碼之后傳給后臺(tái)獲取的簽名才不會(huì)計(jì)算錯(cuò)，因?yàn)槲⑿艜?huì)在分享后的鏈接后面加from=singlemessage&isappinstalled=0這串字符串。

7.全局緩存公眾號(hào)access_token 和jsapi_ticket

1）通過數(shù)據(jù)庫保存

做法是獲取access_token的時(shí)候把當(dāng)前系統(tǒng)時(shí)間和access_token保存到數(shù)據(jù)表中，當(dāng)再次獲取時(shí)，查詢上次獲取的時(shí)間與當(dāng)前系統(tǒng)時(shí)間比較，看看時(shí)間是否大于2個(gè)小時(shí)（7200s）。如果超過這個(gè)時(shí)間限制，再獲取一個(gè)access_token，然后更新數(shù)據(jù)表的accessToken和getTime。

2）通過物理磁盤創(chuàng)建txt文件保存

3）通過servlet啟動(dòng)線程，讓線程定時(shí)執(zhí)行獲取

上述就是小編為大家分享的怎么在vue項(xiàng)目中利用微信JS-SDK實(shí)現(xiàn)一個(gè)分享功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。