轉戰小程序 webview H5頁面 的轉發分享朋友圈功能
先說 小程序分享朋友圈的 功能實現
在小程序內部做分享，尚且需要用畫布畫出帶有二維碼的圖片，在H5頁面上更不用說了，根本就碰不着小程序的自己的api。老老實實畫畫布吧。
做的過程中發現以下幾個問題：
1. IOS白屏打不開webview 頁面。
2. 調用獲取二維碼接口，code 已經200，但是不進回調，並且后台報錯。
3. 二維碼接口調回來是二進制流，或者后台處理成base64，都無法畫到畫布上。
4.將畫布圖片保存到本地。
以下是我的解決方案：
1. webview 中的路徑含有中文，傳輸中編解碼錯誤，導致IOS打不開含有中文的路徑。不多說上代碼：
wxml 中代碼
onLoad: function (options) {
let name = this.Base64encode (options.name);
let pdf = this.Base64encode (options.url);
var src = 'http://172.22.5.12:8083/puhuicrm/js/applet/pdfWater.html?name=' + name + '&phone=' + options.phone + '&pdf=' + pdf;
this.setData({
src: src
})
},
// public method for encoding
Base64encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = this._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this.data._keyStr.charAt(enc1) + this.data._keyStr.charAt(enc2) +
this.data._keyStr.charAt(enc3) + this.data._keyStr.charAt(enc4);
}
return output;
},
// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
H5中代碼，解碼
var phoneString = GetQueryString("phone");
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
2. 第一個問題解決開始第二個問題，真是一步一坑哇
獲取小程序碼是這樣的流程，我調我們后台java的接口，后台調微信的接口，不知道為什么時而進success回調，時而不進回調，還不報錯，控制台打的200，
車到山前必有路，忽然想到，還有個complete回調，看它返回什么出來，果然，有我想要的東西：
function getqCode(id) {
var that = this;
$.ajax({
url:'http://172.22.5.12:8083/puhuicrm/applet/getWXACodeUnlimit',
type:'post',
dataType:'json',
data:{
page:"pages/newsDetail/newsDetail",
scene: id,
},
success:function(json){
},
complete:function (e) {
console.log("獲取二維碼完成但是不一定成功");
var result = e.responseText; //這個就是我想要的結果
drawCavas();
}
})
}
3. 第三個問題，很坑，本來用小程序的api ,直接把二進制流轉成客戶端本地圖片，然后拿到路徑：
let manager = wx.getFileSystemManager();
var savedFilePath = wx.env.USER_DATA_PATH + '/code.png';
manager.writeFile({
filePath: savedFilePath,
encoding: 'base64',
data: res.data,
sucess: function (res) {
console.log("writeFilesucess res:", res);
},
fail: function (err) {
console.log("writeFile fail err:", err)
}
});
但是我換成H5頁面的話，用了blob,二進制流，base64，Arrarybuffer,寫到本地，怎么都無法生成圖片文件，返給我路徑，如果有哪位大佬能解決的，希望能交流一下，我目前的處理方法，就是后台java轉圖片，放到自己的服務器上，這造成服務器壓力很大，於是后台再加個定時清除的任務，因為我們前端用這個圖的路徑，總共不到1s就畫到畫布上了，然后這個圖就沒用了，所以只要及時清除，就沒有問題。
這樣路徑問題就解決了，但是路徑在服務器上就還有一個問題，接口調回來二維碼圖片，馬上畫到畫布上，是畫不出來的，因為圖片資源比js慢，於是我的解決思路是，頁面加載的時候去請求圖片，等點擊分享的時候，調用畫布，問題就解決了
4. 第四個問題，借鑒其他博友的文章，思路大家基本都是，創建一個a標簽，放上要下載的路徑，模擬a標簽的點擊事件，就可以保存了，但是我試了不好用，我就只能寫上長按圖片保存到本地啦，哈哈哈哈哈哈哈哈