最近開發微信公眾號內嵌H5頁面,使用vue搭建的項目,由于業務需求,需要實現微信自定義分享功能,所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗。
1.綁定域名
微信公眾號開發測試帳號: http://mp.weixin.qq.com/debug ... ,需要填寫接口配置,一個公網能訪問的域名,推薦用natapp/路由俠。填寫JS接口安全域名 ,設置JS接口安全域后,通過關注該測試號,開發者即可在該域名下調用微信開放的JS接口,請閱讀 微信JSSDK開發文檔
1)這里使用路由俠,實現內網穿透 http://www.luyouxia.com/ ,下載安裝后,配置相應的內網映射地址

2)設置JS接口安全域

2.引入JS文件
通過npm安裝微信的js-sdk,或者在index.html頁面中直接加script標簽來引用,這里采用npm安裝,
npm install weixin-js-sdk
在需要分享的頁面中引入
import wx from 'weixin-js-sdk'
3.java實現js-sdk權限簽名算法
1)jsapi_ticket
生成簽名之前必須先了解一下jsapi_ticket,jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下,jsapi_ticket的有效期為7200秒,通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限,頻繁刷新jsapi_ticket會導致api調用受限,影響自身業務,開發者必須在自己的服務全局緩存jsapi_ticket。
2)獲取access_token(有效期7200秒,開發者必須在自己的服務全局緩存access_token)
access_token是公眾號的全局唯一接口調用憑據,公眾號調用各接口時都需使用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();}
新聞熱點
疑難解答