博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序分享朋友圈
阅读量:5938 次
发布时间:2019-06-19

本文共 1886 字,大约阅读时间需要 6 分钟。

相比分享好友和群聊,分享朋友圈是比较麻烦的。那么下面就是分享朋友圈的实现方式了:

第一步:一个触发按钮,点击跳转到指定页面:

onShareFriends:function(){   wx.navigateTo({ url: '../shareFriends/shareFriends?imgurl=' + imgurl + '&nowrmb=' + nowrmb,//可根据实际情况传指定的参数去新页面 })}

第二步:用canvas画指定的图文

drawCanvas: function (e) { // 使用 wx.createContext 获取绘图上下文 context var context = wx.createCanvasContext('firstCanvas') context.drawImage(图片地址, 0, 0, 150, 100)//画图片和小程序码 context.setStrokeStyle("#00ff00") context.setLineWidth(5) context.rect(0, 0, 200, 200) context.stroke() context.setStrokeStyle("#ff0000") context.setLineWidth(2) context.moveTo(160, 100) context.arc(100, 100, 60, 0, 2 * Math.PI, true) context.moveTo(140, 100) context.arc(100, 100, 40, 0, Math.PI, false) context.moveTo(85, 80) context.arc(80, 80, 5, 0, 2 * Math.PI, true) context.moveTo(125, 80) context.arc(120, 80, 5, 0, 2 * Math.PI, true) context.stroke() context.draw() }, onload:function(){ this.drawCanvas() }

 注意:这里的小程序码是后台返回的,后台会返回小程序码的图片地址给我们;如果是前端自己生成小程序码,

就需要调用https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html,地址里面有三种方式, 第一种和三种简单,第二种需要用到scene参数,这个参数在onload中的options里面可以接受; 我个人不建议前端生成小程序码,因为我试过了,通过上面地址的接口返回的小程序码是乱码,需要解析, 而我试过Blob、ArrayBuffer、FileReader等方法,开发者工具支持,而手机显示有问题,最后经过很多测试, 还是决定后台来生成小程序码 第三步:将画好的canvas转为图片
wx.canvasToTempFilePath({  x: 100,  y: 200,  width: 50,  height: 50,  destWidth: 100,  destHeight: 100,  canvasId: 'myCanvas',  success: function(res) {    console.log(res.tempFilePath)//转化成的图片地址  } })

 第四步:预览图片

wx.previewImage({  current: '', // 当前显示图片的http链接  urls: [] // 需要预览的图片http链接列表})
第五步:将图片保存到相册
wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success(res) { wx.showModal({ title: '图片成功保存到相册了,去发圈噻~', success: function (res) { wx.navigateBack() //保存成功后跳回前一个页面 } }) } })

大概实现过程就是如此,不过这个中有很多坑,下面我就来说一下实现这个过程中的坑有哪些。

 

转载于:https://www.cnblogs.com/good-qinqin/p/9105249.html

你可能感兴趣的文章
GA操作步骤和技巧(二)——用户行为分析
查看>>
shell中while循环里使用ssh的注意事项
查看>>
SHELL获取计算机外网ip的几种写法
查看>>
博客正在搬迁中
查看>>
触发器与存储过程的区别
查看>>
我的友情链接
查看>>
centos搭建supervisor
查看>>
linux日志分割
查看>>
Samba再报安全漏洞
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
Spring学习资料之 依赖注入(一)
查看>>
linux下mysql配置文件my.cnf详解
查看>>
安装win7提示安装程序无法创建新的系统分区和定位现有系统分区
查看>>
mysql5.6配置文件详解(二)
查看>>
深度学习研究组
查看>>
博客第一天--激激动
查看>>
面向对象(一)之类和对象
查看>>
ubuntu下文件拷贝命令cp命令
查看>>
SQL 学习日志02
查看>>