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

转载于:https://www.cnblogs.com/dongjingya/p/10291296.html

小程序webview 转发分享朋友圈相关推荐

微信小程序之生成图片分享朋友圈
通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径.小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面.但是小程序目前不支持直接分享 ...
小程序分享朋友圈_改造小程序，增加分享朋友圈代码
前几天微信小程序做了更新,开放公测分享小程序到朋友圈的代码,看了官方文档,如果要把现有的小程序分享到朋友圈还是很简单的,今天我分享一个最简单的方法."shareAppMessage" ...
微信小程序代码实现分享朋友圈
小程序现有接口无法实现像公众号一样分享朋友圈功能,那么如何实现朋友圈分享呢! 我们可以借道小程序二维码识别功能,就和以前某些智力测试疯传一样方式,将文章生成一张图片同时带小程序二维码.通过识别二维码 ...
小程序源码：朋友圈集赞万能截图生成器微信小程序源码下载
大家好这是一款朋友圈积攒截图小程序里面内涵三款样式生成,一款图文,一款分享,一款查看的样式也就是我们微信朋友圈所用到的样式就包含了里面的流量主那些可以用户自由的添加哈! 赞的数量那些可以用户自 ...
微信小程序实现转发分享功能（好友朋友圈）
微信小程序分享微信小程序已经支持分享到好友和朋友圈功能(安卓),用户在朋友圈打开分享的小程序页面,并不会真正的打开小程序,而是进入一个"小程序单页面模式"的页面: 微信小程序文档 ...
微信小程序实现“转发给朋友”、“分享到朋友圈”
Tips 1.低版本微信客户端打开时,会进入-一个升级提示页面 2.不支持在小程序页面内直接发起分享 3.自定义分享内容时不支持自定义页面路径 4.存在web-view组件的页面不支持发起分享 5.支 ...
微信小程序踩坑记录 ------- canvas 生成带小程序码的微信朋友圈分享图
最近做了一个问卷类的小程序,其中的结果页想让用户进行朋友圈分享转发,网上搜索资料,得出解决思路,用 canvas 将页面绘制生成图片,然后保存到手机相册,最终效果如下: 在这里我只写页面里关于 can ...
微信小程序点击生成朋友圈分享图
A:wxml(一定要加上image标签,如果你没有加的话,那么即使图片生成了,在页面上也是不会显示的,问过大神之后我才知道我之前一直没弄出来是因为我没加image标签) 1 <view hidd ...
后台模拟页面登陆_微信直播小程序后台，微信朋友圈可直达小程序直播了
独家了解到,微信广告正在测试直播模式,可以帮助商家将直播小程序置于多个广告流量级别,如朋友圈,公众账号和小程序. 这也意味着微信生态系统中的商家不仅可以通过小节目现场直播来运营私有域流量,而且可以利用 ...

小程序webview 转发分享朋友圈

小程序webview 转发分享朋友圈相关推荐

最新文章

热门文章

小程序webview 转发 分享朋友圈

小程序webview 转发 分享朋友圈相关推荐

最新文章

热门文章

小程序webview 转发分享朋友圈

小程序webview 转发分享朋友圈相关推荐