h5連結分享微信朋友圈,壓縮圖示題內容設定
阿新 • • 發佈:2019-01-02
前些天,接到h5動態頁面分享到微信朋友圈推廣的需求,之前沒接觸過這塊,在網上查了不少資料,走了不少彎路。整理了一下,以便後續使用,對剛接觸這塊的有所幫助。
用。
1. 微信公眾號appid,secret獲取
3.配置訪問域名(公眾號設定→功能設定→JS介面安全域名),根據指示,下載檔案到相應域名根目錄下。 例如: mobile.huashengwed.com域名,mobile.huashengwed.com/MP_verify_mZhiNRkgzQxEZVxd.txt 進行訪問。
4.後臺根據appid,secret ,通過http已get的形式傳送請求獲得 access_token (介面令牌),access_token時效 7200秒,一天上限請求2000次,建議使用快取儲存。
5.後臺根據access_token 獲得介面許可證 api_ticket,時效7200秒,建議使用快取儲存。
6.後臺手動生成16位隨機數noncestr和10位時間數值timestamp ,當前請求路徑url,結合api_ticket ,拼接成字串str1,通過對str1,進行SHA1編碼方法,獲得簽名signature。
/* * 產生隨機字串 * */
private static Random strGen = new Random();
private static char[] numbersAndLetters = ("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ").toCharArray();
public static final String randomString(int length) {
if (length < 1) {
return null;
}
char[] randBuffer = new char[length];
for (int i = 0; i < randBuffer.length; i++) {
randBuffer[i] = numbersAndLetters[strGen.nextInt(61)];
}
return new String(randBuffer);
}
/* * 產生時間數值 * */
long timestamp = System.currentTimeMillis()/1000;
/* * 產生字串str和簽名signature * */
String str = "jsapi_ticket=" + ticket +
"&noncestr=" + noncestr +
"×tamp=" + timestamp +
"&url=" + url;
String signature = SHA1(str);
/* * 進行sha1加密 * */
public static String SHA1(String str) {
try {
MessageDigest digest = java.security.MessageDigest
.getInstance("SHA-1"); //如果是SHA加密只需要將"SHA-1"改成"SHA"即可
digest.update(str.getBytes());
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexStr = new StringBuffer();
// 位元組陣列轉換為 十六進位制 數
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexStr.append(0);
}
hexStr.append(shaHex);
}
return hexStr.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return null;
}
7.前端引入微信js檔案
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
8.前端動態獲取當前url,通過ajax請求獲取簽名時間、簽名隨機數和簽名。
提示config:ok ,表示配置成功,可以成功調取微信js介面,通過wx物件調取。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var firstImg ='';
var theurl = location.href.split('#')[0];
//alert(theurl);
var theappId ='';
var thetimestamp = '';
var theNonceStr = '';
var thesignature = '';
$.ajax({
url : "",
type : "POST",
dataType : "json",
data : {"url" : encodeURIComponent(theurl)},
success : function(data) {
theappId = data.msg.appId;
thetimestamp = data.msg.timestamp;
theNonceStr = data.msg.theNonceStr;
thesignature = data.msg.signature;
wx.config({
debug: true, //調式模式,設定為ture後會直接在網頁上彈出除錯資訊,用於排查問題
appId: theappId,
timestamp: thetimestamp,
nonceStr: theNonceStr,
signature: thesignature,
jsApiList: [ //需要使用的網頁服務介面
'checkJsApi', //判斷當前客戶端版本是否支援指定JS介面
'onMenuShareTimeline', //分享給好友
'onMenuShareAppMessage', //分享到朋友圈
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo' //分享到微博
]
});
wx.ready(function () { //ready函式用於呼叫API,如果你的網頁在載入後就需要自定義分享和回撥功能,需要在此呼叫分享函式。//如果是微信遊戲結束後,需要點選按鈕觸發得到分值後分享,這裡就不需要呼叫API了,可以在按鈕上繫結事件直接呼叫。因此,微信遊戲由於大多需要使用者先觸發獲取分值,此處請不要填寫如下所示的分享API
wx.onMenuShareTimeline({ //例如分享到朋友圈的API
title: '', // 分享標題
link: theurl,
imgUrl: firstImg, // 分享圖示
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
});
wx.error(function (res) {
alert(res.errMsg); //列印錯誤訊息。及把 debug:false,設定為debug:ture就可以直接在網頁上看到彈出的錯誤提示
});
},
error : function(data) {
// alert("操作失敗, 請重新整理後再重新操作!");
}
});
</script>