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