微信小程序通过保存图片分享到朋友圈功能


Posted in Javascript onMay 24, 2018

说明

首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用,基本都是这种实现方式。

准备阶段

1.通过服务器获取小程序码

这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。

注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不存在,将会生成失败。这点也很蛋疼,很不方便调试。

wx.getImageInfo({            
  src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

1.通过canvas绘制所需信息

准备好所有的图片之后就可以通过canvas绘制了,然后再将canvas导出为图片。关于绘制这块,可以参考微信的canvas api,下面的基本都是查着api的方法走的。

其中需要注意的有几点。

1.是不知道绘出来的文字长度,所以不知道文字到底什么时候该换行,所以针对商品标题,可能多行的数据固定了一行18个字符。

2.是关于绘制图片的导出,按照官方api的说法应该在draw()完成的回调中执行,但是通过

canvasCtx.draw(false,function(res){
});

这种方式,一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: '正在生成图片...',
    mask: true,
  });
  //y方向的偏移量,因为是从上往下绘制的,所以y一直向下偏移,不断增大。
  let yOffset = 20;
  const goodsTitle = this.data.orderDetail.paltProduct.name1;
  let goodsTitleArray = [];
  //为了防止标题过长,分割字符串,每行18个
  for (let i = 0; i < goodsTitle.length / 18; i++) {
    if (i > 2) {
      break;
    }
    goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
  }
  const price = this.data.orderDetail.price;
  const marketPrice = this.data.orderDetail.marketPrice;
  const title1 = '您的好友邀请您一起分享精品好货';
  const title2 = '立即打开看看吧';
  const codeText = '长按识别小程序码查看详情';
  const imgWidth = 780;
  const imgHeight = 1600;

  const canvasCtx = wx.createCanvasContext('shareCanvas');
  //绘制背景
  canvasCtx.setFillStyle('white');
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(title1, 195, 40);
  //绘制分享的第二行标题文字
  canvasCtx.fillText(title2, 195, 70);
  //绘制商品图片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //绘制商品标题
  yOffset = 490;
  goodsTitleArray.forEach(function (value) {
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle('#333333');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('¥', 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#999999');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle('#999999');
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(codeText, 195, 780);
  //绘制二维码
  canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
  canvasCtx.draw();
  //绘制之后加一个延时去生成图片,如果直接生成可能没有绘制完成,导出图片会有问题。
  setTimeout(function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 390,
      height: 800,
      destWidth: 390,
      destHeight: 800,
      canvasId: 'shareCanvas',
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

最后看下绘制出来的效果图。

微信小程序通过保存图片分享到朋友圈功能

生成图片之后就可以提示用户去保存分享了。

总结

以上所述是小编给大家介绍的微信小程序通过保存图片分享到朋友圈,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
js实现右键自定义菜单
Dec 03 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 #Javascript
react实现点击选中的li高亮的示例代码
May 24 #Javascript
浅谈Webpack 是如何加载模块的
May 24 #Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
详解javascript中的变量提升和函数提升
May 24 #Javascript
JavaScript轮播停留效果的实现思路
May 24 #Javascript
vue2单元测试环境搭建
May 24 #Javascript
You might like
PHP常用编译参数中文说明
2014/09/27 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python 反向输出字符串的方法
2018/07/16 Python
python 生成图形验证码的方法示例
2018/11/11 Python
如何理解Python中包的引入
2020/05/29 Python
Python logging模块handlers用法详解
2020/08/14 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
中专毕业自我鉴定
2013/10/16 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
单位实习介绍信
2015/05/05 职场文书