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


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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
js模拟微博发布消息
Feb 23 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
JS原形与原型链深入详解
May 09 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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 定义404页面的实现代码
2012/11/19 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Javascript变量函数浅析
2011/09/02 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python作用域用法实例详解
2016/03/15 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
合作协议书格式
2014/08/19 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技