微信小程序点击生成朋友圈分享图(遇到的坑)


Posted in Javascript onJune 17, 2020

上个月boss交给我个微信小程序的活,告诉我只需要负责前端页面这块,问我多久做完,于是我不知天高地厚的说 一礼拜就能完工,哈哈哈,果然,现实总是那么无情的来打脸了。。。磨磨蹭蹭一共用了将近3个礼拜才算完事。

今天就来总结下遇到的各种坑好了~~~

由于做的是仿照包你说的小程序,这里就借用包你说的截图好啦

(这个做出来是模拟器跟真机上都会显示生成的图片的,鬼知道是为啥。。)

微信小程序点击生成朋友圈分享图(遇到的坑)微信小程序点击生成朋友圈分享图(遇到的坑)

唔,不废话了,直接上代码好啦

A:wxml(一定要加上image标签,如果你没有加的话,那么即使图片生成了,在页面上也是不会显示的,问过大神之后我才知道我之前一直没弄出来是因为我没加image标签)

<view hidden="{{maskHidden}}" class="mask"></view> 
<view class='canvas-box'>
 <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
 <image src='{{imagePath}}'></image> 
</view>

B:wxss(canvas-box的样式运行出来不会受影响,就是千万别写top:0;一定要往下点,要不然会遮盖住原页面本身的东西,导致原页面button按钮全没效果)

.mask
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,1);
opacity: 0; 
display: flex;
justify-content: center; 
align-items: center;
}
 .canvas-box
 {
 position: fixed;
 top: 999999rpx;left: 0
 }

C:js重点来了(实话实说,我也是照着网上的demo改的,不懂的千万不要来找我问,跪求,本人渣渣一枚。。。)

//share.js
Page({
 data: {
 imagePath: "/images/shareimg_bg.jpg",
 imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
 imageEwm: "/images/ewm.jpg",
 maskHidden: true,
 },
 onLoad: function (options) {
 // 页面初始化 options为页面跳转所带来的参数
 var size = this.setCanvasSize();//动态设置画布大小
 // this.createNewImg();
 //创建初始化图片
 },
 //适配不同屏幕大小的canvas 生成的分享图宽高分别是 750 和940,老实讲不知道这块到底需不需要,然而。。还是放了,因为不写这块的话,模拟器上的图片大小是不对的。。。
 setCanvasSize: function () {
 var size = {};
 try {
  var res = wx.getSystemInfoSync();
  var scale = 750;//画布宽度
  var scaleH = 940 / 750;//生成图片的宽高比例
  var width = res.windowWidth;//画布宽度
  var height = res.windowWidth * scaleH;//画布的高度
  size.w = width;
  size.h = height;
 } catch (e) {
  // Do something when catch error
  console.log("获取设备信息失败" + e);
 }
 return size;
 },
 //将1绘制到canvas的固定
 settextFir: function (context) {
 let that=this;
 var size = that.setCanvasSize();
 var textFir = "发了一个红包";
 console.log(textFir);
 context.setFontSize(24);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textFir, size.w / 2, size.h * 0.25);
 context.stroke();
 },
 //将2绘制到canvas的固定
 settextSec: function (context) {
 let that = this;
 var size = that.setCanvasSize();
 var textSec = "长按识别小程序,领奖金";
 context.setFontSize(14);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textSec, size.w / 2, size.h * 0.88);
 context.stroke();
 },
 //将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
 createNewImg: function () {
 var that = this;
 var size = that.setCanvasSize();
 var context = wx.createCanvasContext('myCanvas');
 var path = "/images/shareimg_bg.jpg";
 var imageTx = that.data.imageTx;
 var imageEwm = that.data.imageEwm;
 var imageZw = "/images/xcxewm.png";
 context.drawImage(path, 0, 0, size.w, size.h);
 context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
 context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
 context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
 this.settextFir(context);
 this.settextSec(context);
 console.log(size.w, size.h)
 //绘制图片
 context.draw();
 //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
 wx.showToast({
  title: '生成中...',
  icon: 'loading',
  duration: 2000
 });
 setTimeout(function () {
  wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function (res) {
   var tempFilePath = res.tempFilePath;
   console.log(tempFilePath);
   that.setData({
   imagePath: tempFilePath,
   canvasHidden: false,
   maskHidden: true,
   });


//将生成的图片放入到《image》标签里
   var img = that.data.imagePath;
   wx.previewImage({
   current: img, // 当前显示图片的http链接
   urls: [img] // 需要预览的图片http链接列表
   })
  },
  fail: function (res) {
   console.log(res);
  }
  });
 }, 2000);
 },

})

以上,出来的效果是酱紫的 (渣渣实在不知道要怎么把头像和二维码画成圆角矩形的和圆形的了,还好产品大大不挑剔,感谢)

微信小程序点击生成朋友圈分享图(遇到的坑)

当然 ,如果有小可爱能解决这个问题的话,还望不吝指教~~~

总结

到此这篇关于微信小程序点击生成朋友圈分享图的文章就介绍到这了,更多相关小程序 朋友圈分享图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个javascript图片阅览组件
Nov 09 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
简单的渐变轮播插件
Jan 12 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue获取form表单的值示例
Oct 29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 #Javascript
vue移动端的左右滑动事件详解
Jun 17 #Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 #Javascript
vue-iview动态新增和删除的方法
Jun 17 #Javascript
vue iview实现动态新增和删除
Jun 17 #Javascript
vue如何搭建多页面多系统应用
Jun 17 #Javascript
vue2.0实现列表数据增加和删除
Jun 17 #Javascript
You might like
深入浅出php socket编程
2015/05/13 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
js树形控件脚本代码
2008/07/24 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python进阶之尾递归的用法实例
2018/01/31 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python多线程使用方法实例详解
2019/12/30 Python
keras中的backend.clip用法
2020/05/22 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
指针和引用有什么区别
2013/01/13 面试题
介绍一下OSI七层模型
2012/07/03 面试题
新闻学专业个人求职信写作
2014/02/04 职场文书
班级活动策划书
2014/02/06 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年村委会工作总结
2014/11/24 职场文书
教师个人考察材料
2014/12/16 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
开业庆典致辞
2015/08/01 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书