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


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+thickbox仿校内登录注册框
Jun 07 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
使用js画图之画切线
Jan 12 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
Sea.JS知识总结
May 05 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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解析url并得到url参数方法总结
2018/10/11 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
财务情况说明书范文
2014/05/06 职场文书
工作建议书范文
2014/05/13 职场文书
商场促销活动策划方案
2014/08/18 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL