vue使用微信JS-SDK實(shí)現(xiàn)分享功能
最近開發(fā)微信公眾號內(nèi)嵌H5頁面,使用vue搭建的項(xiàng)目,由于業(yè)務(wù)需求,需要實(shí)現(xiàn)微信自定義分享功能,所以項(xiàng)目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK,網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。
1.綁定域名
微信公眾號開發(fā)測試帳號: http://mp.weixin.qq.com/debug ... ,需要填寫接口配置,一個公網(wǎng)能訪問的域名,推薦用natapp/路由俠。填寫JS接口安全域名 ,設(shè)置JS接口安全域后,通過關(guān)注該測試號,開發(fā)者即可在該域名下調(diào)用微信開放的JS接口,請閱讀 微信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是公眾號用于調(diào)用微信JS接口的臨時票據(jù)。正常情況下,jsapi_ticket的有效期為7200秒,通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限,頻繁刷新jsapi_ticket會導(dǎo)致api調(diào)用受限,影響自身業(yè)務(wù),開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket。
2)獲取access_token(有效期7200秒,開發(fā)者必須在自己的服務(wù)全局緩存access_token)
access_token是公眾號的全局唯一接口調(diào)用憑據(jù),公眾號調(diào)用各接口時都需使用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方式請求獲得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(時間戳), url(當(dāng)前網(wǎng)頁的URL,不包含#及其后面部分) 。對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序(字典序)后,使用URL鍵值對的格式(即key1=value1&key2=value2…)
拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。對string1作sha1加密,字段名和字段值都采用原始值,不進(jìn)行URL 轉(zhuǎn)義。
//主要代碼 @RequestMapping(value = "/get_signature", method = RequestMethod.GET) public Map<String, String> getSignature(String url) { Map<String, String> ret = new HashMap<String, String>(); 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)用(同一個url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實(shí)現(xiàn)web app的頁面會導(dǎo)致簽名失敗,此問題會在Android6.2中修復(fù))。
wx.config({ debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId: '', // 必填,公眾號的唯一標(biāo)識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機(jī)串 signature: '',// 必填,簽名 jsApiList: [] // 必填,需要使用的JS接口列表 });
config配置里面的參數(shù)appid, timestamp, nonceStr, signature都是要后臺接口返回的,前端可以通過axios發(fā)送接口請求獲取
this.axios.get('/wx/get_signature?url=' + encodeURIComponent(location.href.split('#')[0])).then((res) => { wx.config({ debug: true, // 開啟調(diào)試模式 appId: res.data.appId, // 必填,公眾號的唯一標(biāo)識 timestamp: res.data.timestamp, // 必填,生成簽名的時間戳 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)證后會執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。 }); wx.error(function(res){ //config信息驗(yàn)證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗(yàn)證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。 });
5.實(shí)現(xiàn)自定義分享朋友/朋友圈
wxShareTimeline() {// 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容 wx.updateAppMessageShareData({ title: '世界那么大,我想去看看-微信test', // 分享標(biāo)題 desc: '世界那么大,我想去看看-微信test', // 分享描述 link: location.href.split('#')[0], // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號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)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: require('./logo.jpg'), // 分享圖標(biāo)(不能賦相對路徑,一定要是絕對路徑) success: () => { } }) }
6.遇到問題
1)invalid signature
獲取的簽名錯誤,原因可能是公眾號平臺配置有問題或者是后臺返回簽名接口的算法有問題
2)invalid url domain
當(dāng)前頁面所在域名與使用的appid沒有綁定,請確認(rèn)正確填寫綁定的域名,僅支持80(http)和443(https)兩個端口,因此不需要填寫端口號。
3)自定義的縮略圖不顯示
路徑錯誤導(dǎo)致的,不能使用相對路徑,一定要是絕對路徑,另外一個原因就是圖片尺寸和類型問題,推薦使用jpg格式
4)二次分享導(dǎo)致不能調(diào)用自定義的接口
url進(jìn)行編碼之后傳給后臺獲取的簽名才不會計(jì)算錯,因?yàn)槲⑿艜诜窒砗蟮逆溄雍竺婕?code>from=singlemessage&isappinstalled=0這串字符串。
7.全局緩存公眾號access_token 和jsapi_ticket
1)通過數(shù)據(jù)庫保存
做法是獲取access_token的時候把當(dāng)前系統(tǒng)時間和access_token保存到數(shù)據(jù)表中,當(dāng)再次獲取時,查詢上次獲取的時間與當(dāng)前系統(tǒng)時間比較,看看時間是否大于2個小時(7200s)。如果超過這個時間限制,再獲取一個access_token,然后更新數(shù)據(jù)表的accessToken和getTime。
2)通過物理磁盤創(chuàng)建txt文件保存
3)通過servlet啟動線程,讓線程定時執(zhí)行獲取
可以參考 https://blog.csdn.net/guobinh ...
以上便是這次調(diào)用微信js-sdk總結(jié),想要了解更多可以閱讀微信JS-SDK說明文檔 https://mp.weixin.qq.com/wiki.. .
總結(jié)
以上所述是小編給大家介紹的vue使用微信JS-SDK實(shí)現(xiàn)分享功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
本文主要介紹了vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03