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