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


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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JavaScript实现点击自制菜单效果
Feb 02 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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
Oracle 常见问题解答
2006/10/09 PHP
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
如何运行Python程序的方法
2013/04/21 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
浅析使用Python操作文件
2017/07/31 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
iPython pylab模式启动方式
2020/04/24 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
体育系毕业生求职自荐信
2014/04/16 职场文书
班风学风建设方案
2014/05/06 职场文书
前台岗位职责范本
2015/04/16 职场文书
校车司机安全责任书
2015/05/11 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
linux下安装redis图文详细步骤
2021/12/04 Redis