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


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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
vue实现购物车列表
Jun 30 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 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 中的一些经验积累
2006/10/09 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
js 走马灯简单实例
2013/11/21 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python 列表理解及使用方法
2017/10/27 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
几道PHP面试题
2013/04/14 面试题
出纳会计岗位职责
2014/03/12 职场文书
优秀学生评语大全
2014/04/25 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
警示教育片观后感
2015/06/17 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
python flappy bird小游戏分步实现流程
2022/02/15 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL