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


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 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
layui插件表单验证提交触发提交的例子
Sep 09 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项目应该注意的几点事项分享
2013/12/20 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python新手学习标准库模块命名
2020/05/29 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
促销活动方案模板
2014/02/24 职场文书
大学军训感言1500字
2014/03/09 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
法律意见书范文
2015/06/04 职场文书
户外拓展训练感想
2015/08/07 职场文书
执行力心得体会范文
2016/01/11 职场文书