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


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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
js propertychange和oninput事件
Sep 28 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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相关资料
2006/10/09 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
JS交换变量的方法
2015/01/21 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
js轮播图的插件化封装详解
2017/07/17 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python super用法及原理详解
2020/01/20 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python 字符串池化的前提
2020/07/03 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android