微信小程序实现分享到朋友圈功能


Posted in Javascript onJuly 19, 2018

截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈

我的套路:

  1. 请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便)
  2. canvas绘制文字和图片到画布
  3. 当用户点击分享到朋友圈时,给用户展示画布,画布转成图片,并将图片保存到相册
onShow: function () {
 var that = this;
 //1. 请求后端API生成小程序码
 that.getQr();

 //2. canvas绘制文字和图片
 const ctx = wx.createCanvasContext('myCanvas');
 var imgPath = '../../../image/intro.png'
 var bgImgPath = '../../../image/bgImgPath.png';
 ctx.drawImage(imgPath, 0, 0, 600, 520);

 ctx.setFillStyle('white')
 ctx.fillRect(0, 520, 600, 280);

 ctx.drawImage(imgPath, 30, 550, 60, 60);
 ctx.drawImage(bgImgPath, 30, 550, 60, 60);
 ctx.drawImage(imgPath, 410, 610, 160, 160);

 ctx.setFontSize(28)
 ctx.setFillStyle('#6F6F6F')
 ctx.fillText('妖妖灵', 110, 590)

 ctx.setFontSize(30)
 ctx.setFillStyle('#111111')
 ctx.fillText('宠友们快来围观萌宠靓照', 30, 660)
 ctx.fillText('我在萌爪幼稚园', 30, 700)

 ctx.setFontSize(24)
 ctx.fillText('长按扫码查看详情', 30, 770)
 ctx.draw()
 },
 // 3. canvas画布转成图片
 wx.canvasToTempFilePath({
 x: 0,
 y: 0,
 width: 600,
 height: 800,
 destWidth: 600,
 destHeight:800,
 canvasId: 'myCanvas',
 success: function(res) {
 console.log(res.tempFilePath);
 that.setData({
  shareImgSrc : res.tempFilePath
 })

 },
 fail:function (res) {
 console.log(res)
 }
 })
 //4. 当用户点击分享到朋友圈时,将图片保存到相册
 wx.saveImageToPhotosAlbum({
 filePath:that.data.shareImgSrc,
 success(res) {
 wx.showModal({
  title: '存图成功',
  content: '图片成功保存到相册了,去发圈噻~',
  showCancel:false,
  confirmText:'好哒',
  confirmColor:'#72B9C3',
  success: function(res) {
  if (res.confirm) {
  console.log('用户点击确定');
  }
  that.hideShareImg()
  }
 })
 }
})

canvas绘制单位为px,举个例子,屏幕宽375,绘制375的画布,保存的图片就是375px,图片像素度不够会糊掉,所以我改进了一下套路:

1.请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便)

2.canvas绘制文字和图片到画布
绘制2倍屏幕宽度的canvas画布,canvas画布必须是可见状态下,才可以被转成图片,可是他辣么大辣么丑肯定不能给用户看见,那就给他定位定个巨大的数字超出屏幕就好了

3.画布转成图片

4.当用户点击分享到朋友圈时,给用户展示图片,并将图片保存到相册

微信小程序实现分享到朋友圈功能

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
You might like
一周学会PHP(视频)Http下载
2006/12/12 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
react中使用swiper的具体方法
2018/05/15 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Vue指令指令大全
2019/02/09 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python的pycurl包用法简介
2015/11/13 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Python super()函数使用及多重继承
2020/05/06 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
高级电工工作职责
2013/11/21 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
诚信承诺书模板
2014/05/26 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
庆祝国庆节标语
2014/10/09 职场文书
应届毕业生自荐信
2015/03/04 职场文书
房屋质量投诉书
2015/07/02 职场文书