我先描述一下該h5的業務場景： 想實現微信中的h5頁面分享給好友或者是朋友圈時有自定義的標題，描述，分享圖片；而不是...如下圖
前提條件：
1、請確認公衆號已經認證，只有認證的公衆號才具有分享相關接口權限
2、登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。(需要調用微信接口的h5域名)
3、配置IP白名單，基本配置-公衆號開發信息-IP白名單。(調用後臺接口的域名)
h5實現具體步驟如下：（只有前端部分，別問爲啥，因爲後端我不會···淚目）
1.頁面引入JS-SDK文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2.調用後端接口，獲取微信api需要的參數
3.拿到後端返回的參數去配置微信api
下面是源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title class="webTitle">微信h5分享</title>
<link rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/flexible.debug.js"></script>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div class="container">
<div class="newsContent">
<div class="title"></div>
<div class="newsDate"></div>
<div class="newsText"></div>
</div>
</div>
<script>
$(document).ready(function () {
var ua = navigator.userAgent.toLowerCase();
var isWx = false
if (ua.match(/MicroMessenger/i)) { //判斷是否在微信打開
isWx = true;
} else {
isWx = false;
}
getAppUserInfo();
if (isWx) {
var winUrl = window.location.href.split("&")[0];
var link = '...'// 後端接口地址
if(winUrl !== window.location.href){
window.location.href = winUrl
}
var des = '';
var title = '';
var id = GetUrlParam('id')
var img = '...' // 微信分享圖片
$.ajax({
type: "GET",
url: link + "/activityTwo/cover"+'?id='+id,
crossDomain: true,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (res) {
wx.config({
debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
appId: res.params.appId, // 必填，公衆號的唯一標識
timestamp: res.params.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.params.noncestr, // 必填，生成簽名的隨機串
signature: res.params.signature, // 必填，簽名，見附錄1
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.ready(function () {
title = $('.newsContent .title').html()
var str1 = $(".newsContent .newsText").html();
var content1 = str1.replace(/>/gi, '>');
content1 = content1.replace(/</gi, '<');
var contents1 = content1.replace(/<[^>]+>/g, '').replace(/<style[^>]*?>[\\s\\S]*?<\/style>/g,'').replace(/<img[^bai>]+>|<\s*\/>/gi,'');
contents1 = contents1.replace(/ /ig, "");
des = replaceQuote(contents1.substr(0, 40))
//分享到微信朋友
wx.updateAppMessageShareData({
title: title, // 分享標題
desc: des, // 分享描述
link: winUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: img, // 分享圖標
success: function () {
// alert.log('已分享');
},
cancel: function () {
// alert.log('已取消');
},
fail:function(res){
alert(JSON.stringify(res))
}
});
//分享給微信朋友圈
wx.updateTimelineShareData({
title: title, // 分享標題
link: winUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: img, // 分享圖標
success: function () {
// alert('已分享');
},
cancel: function () {
// alert.log('已取消');
},
fail:function(res){
alert(JSON.stringify(res))
}
});
wx.error(function (res) {
console.log("res:", res)
})
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error" + errorThrown);
}
});
}
})
function getAppUserInfo() {
var id = GetUrlParam('id')
var link = '...'// 後臺接口地址
getNews(id,link);
}
function getNews(id,linkStr){
$.ajax({
url: linkStr+'/activity/appInfoListWeiXin?infoId='+id,
type:'GET',
async:false,
success: function(data){
if(data.content){
$('.newsContent .title').text(data.title);
$('.webTitle').text(data.webTitle);
var d = new Date(data.CreateDate);
var dataStr = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
$('.newsContent .newsDate').text(dataStr);
var str = data.content;
var content = str.replace(/>/gi, '>');
content = content.replace(/</gi, '<');
$('.newsContent .newsText').html(content);
}
},
error: function(e){
console.log(e);
}
});
}
function getDate(ns) {
var time = new Date(ns);
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+Modification(m)+'-'+Modification(d)+" "+Modification(h)+':'+Modification(mm)+':'+Modification(s);
};
// 得到中文字符串
function replaceQuote(input) {
for(var begin = input.indexOf('\''), end = input.lastIndexOf('\''); begin!=-1&&end!=-1&&begin<=end; begin = input.indexOf('\'', begin+1), end = input.lastIndexOf('\'', end-1)){
input = setCharAt(input,begin, '\u2018');
input = setCharAt(input,end, '\u2019');
}
for(var begin = input.indexOf('"'), end = input.lastIndexOf('"'); begin!=-1&&end!=-1&&begin<=end; begin = input.indexOf('"', begin+1), end = input.lastIndexOf('"', end-1)){
input = setCharAt(input,begin, '\u201c');
input = setCharAt(input,end, '\u201d');
}
return input.toString();
}
function setCharAt(myStr,i,c){
myStr = myStr.split('');
myStr[i] = c;
myStr = myStr.join('');
return myStr;
}
// 路徑取參數
function GetUrlParam(paraName) {
var url = document.location.toString();
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
}
function Modification(m){
return m<10?'0'+m:m
};
</script>
</body>
<script type="text/javascript" src="js/jquery.base64.min.js" ></script>
</html>
我總結一下我遇到的問題：
1.h5怎麼調試？
答： 在微信開發者工具中調試，微信開發者工具的Console中，可以看到jssdk調用是否成功，我遇到了如右圖中的錯誤，這一般情況下後端返回的簽名有問題，具體開發中可以和後端同事一起聯調，排查一下。
2.自定義標題，描述，分享圖片相關問題
答：因爲我實現的這個h5是資訊詳情頁，它的內容都是動態變化的，所以在分享的時候不可以寫死標題和描述。我是這樣實現的：ajax請求資訊詳情接口的時候，我把請求設置爲了同步請求，當接口返回數據並渲染到頁面上時，我再去請求後端的獲取微信配置信息的接口，這時候在去取頁面上對應的內容賦值給標題和描述，這樣就是動態的了。（源碼都放在上面啦，還不快去瞅瞅...）。如果說分享出去的時候，標題和描述不需要動態變化，那直接寫死就好啦（產品說啥就是啥，good...）
3.還有一個注意點，微信分享的時候，微信會在分享地址上面加參數：https://.../news_s.html?id=C5...67&from=timeline &form=timeline就是微信加的，所以我們在設置分享路徑的時候要去掉&form=timeline。下面的代碼中winUrl是我要分享的鏈接，總之一句話，去掉一切不屬於分享鏈接的參數就行。
var winUrl = window.location.href.split("&")[0];
if(winUrl !== window.location.href){
window.location.href = winUrl
}
如果有什麼不太清楚的問題，可以評論哦，看到會及時回覆的