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


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 maxlength文本字数限制插件
Apr 16 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
React中的refs的使用教程
Feb 13 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 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 正则 过滤html 的超链接
2009/06/02 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
js简单抽奖代码
2015/01/16 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
科学发展观活动总结
2014/08/28 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
天河观后感
2015/06/11 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers