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


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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 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启用zlib压缩文件的配置方法
2013/06/12 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
如何实现删除numpy.array中的行或列
2018/05/08 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python flask安装和命令详解
2019/04/02 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python sublime安装及配置过程详解
2020/06/29 Python
python中_del_还原数据的方法
2020/12/09 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
先进个人推荐材料
2014/12/29 职场文书
实习计划书范文
2015/01/16 职场文书
小学推普周活动总结
2015/05/07 职场文书
大学新生入学感想
2015/08/07 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python