最近做微信方面的H5應(yīng)用比較多，很多情況下需要定制頁面的分享內(nèi)容，例如標題、描述、分享的圖片等，這時候就需要用到微信的JSSDK。
在開發(fā)的過程中遇到了一些不大不小的坑，今天在下面總結(jié)一下，以備將來之需。
坑一：朋友圈鏈接不刷新
最近做了一個需要動態(tài)改變分享圖片的項目，A和B處于關(guān)注狀態(tài)，當A把項目分享到朋友圈后，B從朋友圈中打開鏈接，并再次執(zhí)行頁面程序，當再次分享到朋友圈時，發(fā)現(xiàn)分享出去的圖片仍是A分享出去的圖片。
最開始是以為代碼的問題，但是經(jīng)過調(diào)試，排除了代碼bug。
然后考慮可能是分享機制問題，遂除了用jssdk方式分享外，還加入了jsBridge方式，但是問題仍沒有解決。
接著想到也許是服務(wù)器緩存造成的，但發(fā)現(xiàn)程序執(zhí)行后的結(jié)果每次都是新的，所以排除了這種情況。
后來考慮是APP緩存的問題，一度因此打算改變項目策略，但發(fā)現(xiàn)類似的一個項目卻沒有出現(xiàn)這個問題，而且發(fā)現(xiàn)每次程序執(zhí)行完后分享給朋友時圖片是新的，只有從朋友圈里打開的鏈接不能讓程序結(jié)果更新。
最后想到可能是頁面沒有刷新，所以給分享鏈接加了隨機查詢參數(shù)，以強制刷新。沒料到，還真是！
所以如果你的項目中需要動態(tài)地改變分享出去的內(nèi)容，最好在分享URL后面加入隨機查詢參數(shù)，這樣在朋友圈里的鏈接地址都會不一樣，不同的人打開同一個鏈接會強制刷新。
坑二：分享png圖片黑底
還是上面那個例子，當程序生成png圖片后預(yù)覽時是沒有問題的，但分享出去后只能看到一張黑色的圖。
看到這個現(xiàn)象，馬上想到可能是png圖片不被微信支持。
但是轉(zhuǎn)而就否定了這個觀點，微信的瀏覽器再差也不可能不支持png圖片吧！
于是想到可能是微信自動把png圖片轉(zhuǎn)了其他格式，至于什么格式，不知道。如果真是這樣，那就無解了。
接著想也許是圖片合成的原因，遂測試了幾張不同背景和前景的圖片，發(fā)現(xiàn)：如果背景是透明的，前景字體是紅色的，則合成后的圖片分享后能看到黑底紅字；如果背景是白色，前景是紅色，則分享后能看到白底紅字。
所以能得出結(jié)論：如果微信分享出去的圖片是透明背景png圖片，則會看到黑底；如果是不透明的則不會看到黑底。
這樣我只要生成不透明的背景的圖片就行了，測試了幾下，問題解決。
坑三：canvas跨域
其實這不能算是微信的坑，而是canvas的坑。因為在這個項目中出現(xiàn)了，一并提一下。
還是接著上面的坑說，為生成不透明的png圖片，我選擇預(yù)先給canvas寫入圖像。
首先我們定義一個函數(shù)：
/**
* @param _src 要載入的圖像地址
* @param _canvasContext canvasContext對象
* @param _scale 要寫入的尺寸數(shù)組[width,height]
*/
function loadImg2Canvas(_src,_canvasContext,_scale){
var img = new Image();
img.src = _src;
if(img.complete){
_canvasContext.drawImage(img, 0, 0,_scale[0],_scale[1]);
}else{
img.onload = function(){
_canvasContext.drawImage(img, 0, 0,_scale[0],_scale[1]);
};
img.onerror = function(){
window.alert('load failed');
};
}
}
然后我們給canvas對象載入圖像地址：
var canvas = document.getElementById("thecanvas");
var canvas_bg = "http://www.example.com/canvas_bg.jpg";
loadImg2Canvas(canvas_bg,ctx,[canvas.width,canvas.height]);
但是這個過程中出現(xiàn)了跨域錯誤：
從網(wǎng)上查找，很多文章會建議你給圖片所在的域的響應(yīng)頭中附加上
Access-Control-Allow-Origin: * 字段，并且給要加載的圖像加上img.crossOrigin = "",或img.crossOrigin = "anonymous"，于是我們的函數(shù)就變成了：
/**
* @param _src 要載入的圖像地址
* @param _canvasContext canvasContext對象
* @param _scale 要寫入的尺寸數(shù)組[width,height]
*/
function loadImg2Canvas(_src,_canvasContext,_scale){
var img = new Image();
img.src = _src;
img.crossOrigin = '';
if(img.complete){
_canvasContext.drawImage(img, 0, 0,_scale[0],_scale[1]);
}else{
img.onload = function(){
_canvasContext.drawImage(img, 0, 0,_scale[0],_scale[1]);
};
img.onerror = function(){
window.alert('load failed');
};
}
}
但是問題來了，很多情況下我們要加載的圖片是從資源庫或者CDN來的，這些圖片服務(wù)器可能無法加上Access-Control-Allow-Origin: * 字段，所以這種情況下就無能為力了。
最終我只能把圖像跟代碼放到同一個域上，這樣就不存在跨域的問題了。
期待有其他可能的解決辦法！
