转战小程序 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(/
/g, "
");
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标签的点击事件，就可以保存了，但是我试了不好用，我就只能写上长按图片保存到本地啦，哈哈哈哈哈哈哈哈