小程序——分享二维码报告

Posted Y.anCy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序——分享二维码报告相关的知识,希望对你有一定的参考价值。

小程序分享报告(图片+二维码): 

小程序页面生成图片:请用canvas,页面简单用canvas,页面复杂也用canvas。

 

踩过的坑: 思路:html  ->  html2canvas  ->  canvas||image/png; 最后涉及到小程序与H5页面项目连接问题(web-view &分享页面),还是用canvas老老实实画的

Bug1:小程序,不支持js获取Dom操作,

解决1:单独写https的一个H5页面来操作Dom。     <web-view  src=\'https:xxxxxx….\' >  </web-view>会覆盖调分享按钮的btn

Bug2:小程序,不支持 new Image(), 不能自定义定义src,也就不能直接转为canvas或者直接引用分享;

解决2:把图片转为base64,传给后台服务器生成图片。(src=\'banse64\' 只能显示)。

Bug3:小程序,canvas中图片背景空白,不支持https连接获取,只支持本地缓存或者base64

解决3A.wepy框架,使用路径获取(2M大小内);

            B. getWXImg(){
             let _this = this;
             wx.getImageInfo({
                 src: \'https://cdn.xxxxxxxxxx.com/\'+wx.getStorageSync("WxImg"),
                 success (res) {
                     _this.wxImg = res.path;
                     _this.$apply();
                 }
             })
        };

Bug4:报告测试项模板不重置。

解决4:循环赋值前,重置为0,或者原始定义的值;

Bug5:引入二维码||条行码。

//生成二维码

import QR from \'../../common/qrcode.js\'

createQrCode(url, canvasId, cavW, cavH) {        

  wx.showLoading({title: \'努力生成中...\'})  

  //调用插件中的draw方法,绘制二维码图片  

  QR.api.draw(url, canvasId, cavW, cavH);  

};

最后:

wx.canvasToTempFilePath({});//生成分享图;

wx.saveImageToPhotosAlbum({});//保存到相册,注意:生产环境时 记得这里要加入获取相册授权的代码;

 

附录

c# base64转译图片保存服务器:

 

 

 

 public GeneralResponse Post(ExportImageFromBase64 req)         {            

  var resp = new GeneralResponse();

  var path = AppConfig.RootDirectory + "Base64/";            

  if (!Directory.Exists(path))             {                

    Directory.CreateDirectory(path);            

  }

  byte[] stream = Convert.FromBase64String(req.Base64);            

  var random = new Random(BabyBusUtilities.Utils.Utilities.GetRandomSeed());            

  var imageName = $"Base64{random.Next()}.jpeg";                        

  using (var imageFile = new FileStream(path + imageName, FileMode.Create))             {                

    imageFile.Write(stream, 0, stream.Length);                               

    imageFile.Flush();            

  }            

resp.Attach = imageName;                           

return resp;        

}

 

参考:

 

小程序中如何将页面生成图片?

基于html2canvas实现网页保存为图片及图片清晰度优化

html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

 

 

以上是关于小程序——分享二维码报告的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序分享小程序码的生成(带参数)以及参数的获取

小程序-将页面生成一个小程序码分享出去

微信小程序生态图谱

微信小程序 之 分享给朋友 以及二维码传参及接收

微信小程序如何本地测试太阳码(二维码)分享功能

小程序webview 转发 分享朋友圈