小程序webview 转发分享朋友圈

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

小程序webview 转发 分享朋友圈

小程序webview 转发分享朋友圈