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


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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
可以将word转成html的js代码
Apr 11 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
webpack多页面开发实践
2017/12/18 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
JSF界面控制层技术
2013/06/17 面试题
党委班子剖析材料
2014/08/21 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP