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


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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
jquery remove方法应用详解
Nov 22 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
JS写滑稽笑脸运动效果
May 28 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python实现京东秒杀功能代码
2019/05/16 Python
Django的models模型的具体使用
2019/07/15 Python
django 读取图片到页面实例
2020/03/27 Python
Python接收手机短信的代码整理
2020/08/02 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
《水乡歌》教学反思
2014/04/24 职场文书
残疾人小组计划书
2014/04/27 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Python中的套接字编程是什么?
2021/06/21 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang