微信小程序> 小程序如何分享朋友圈-微信小程序分享朋友圈-小程序分享

小程序如何分享朋友圈-微信小程序分享朋友圈-小程序分享

浏览量:2322 时间: 来源:不求甚解bc

1.微信小程序暂时没有分享到朋友圈的功能,分享的思路是用canvas画布生成一张分享图片,保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。可参考智行火车票的助力抢票功能。

2.

3.1、wxml文件

viewclass='share'canvascanvas-id="shareCanvas"style="width:300px;height:380px"/canvas/viewviewclass='btn-box'buttonbindtap='downloadImg'分享到朋友圈/button/view

4.2、wxss样式文件(如果不想显示canvas,可以将canvas定位到可视区域外部)

page{background:#eee;}.share{width:300px;height:380px;position:fixed;left:0;right:0;top:0;bottom:100rpx;margin:auto;}.btn-box{padding:1060rpx60rpx060rpx;}button{background:darkturquoise;}

5.3、js文件

Page({data:{sharebg:'http://qiniu.jnwtv.com/H520181206092255188568494.png',//分享底部背景图shareTitle:'哈哈哈男孩从小就没有地位,看来一万个心酸哈哈哈男孩从小就没有地位,看来一万个心酸',//分享标题shareCoverImg:'http://qiniu.jnwtv.com/H520181210164154569520223.jpeg',//分享封面图shareQrImg:'http://qiniu.jnwtv.com/H520181210164146322557972.jpg',//分享小程序二维码userInfo:{headImg:'http://qiniu.jnwtv.com/H520181210164138180428653.jpg',//用户头像nickName:'打豆豆',//昵称},seeDate:'2018-12-04',//看视频日期},onLoad:function(options){},downloadImg:function(){letthat=this;//创建画布constctx=wx.createCanvasContext('shareCanvas')//白色背景ctx.setFillStyle('#fff')ctx.fillRect(0,0,300,380)ctx.draw()//下载底部背景图wx.getImageInfo({src:that.data.sharebg,success:(res1)={ctx.drawImage(res1.path,0,250,300,130)//下载视频封面图wx.getImageInfo({src:that.data.shareCoverImg,success:(res2)={ctx.drawImage(res2.path,0,0,300,168)//分享标题//ctx.setTextAlign('center')//文字居中ctx.setFillStyle('#000')//文字颜色:黑色ctx.setFontSize(20)//文字字号:20pxif(that.data.shareTitle.length=14){//不用换行ctx.fillText(that.data.shareTitle,10,200,280)}elseif(that.data.shareTitle.length=28){//两行letfirstLine=that.data.shareTitle.substring(0,14);letsecondLine=that.data.shareTitle.substring(14,27);ctx.fillText(firstLine,10,200,280)ctx.fillText(secondLine,10,224,280)}else{//超过两行letfirstLine=that.data.shareTitle.substring(0,14);letsecondLine=that.data.shareTitle.substring(14,27)+'...';ctx.fillText(firstLine,10,200,280)ctx.fillText(secondLine,10,224,280)}//下载二维码wx.getImageInfo({src:that.data.shareQrImg,success:(res3)={letqrImgSize=70ctx.drawImage(res3.path,212,256,qrImgSize,qrImgSize)ctx.stroke()ctx.draw(true)//用户昵称ctx.setFillStyle('#000')//文字颜色:黑色ctx.setFontSize(14)//文字字号:16pxctx.fillText(that.data.userInfo.nickName,38,284)//观看日期ctx.setFillStyle('#999')//文字颜色:黑色ctx.setFontSize(10)//文字字号:16pxctx.fillText('在'+that.data.seeDate+'观看这个视频',38,298)//下载用户头像wx.getImageInfo({src:that.data.userInfo.headImg,success:(res4)={//先画圆形,制作圆形头像(圆心x,圆心y,半径r)ctx.arc(22,284,12,0,Math.PI*2,false)ctx.clip()//绘制头像图片letheadImgSize=24ctx.drawImage(res4.path,10,272,headImgSize,headImgSize)//ctx.stroke()//圆形边框ctx.draw(true)//保存到相册wx.canvasToTempFilePath({canvasId:'shareCanvas',success:function(res){wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(res){wx.showToast({title:'分享图片已保存到相册'})}})}},this)}})}})}})}})}})

6.4、生成canvas的图片资源需要缓存到本地,所以需要在微信公众平台,将需要用到的分享图片,包括二维码的图片域名添加到微信安全域名范围内,否则会报下载图片失败的错误。刚开始也可以将微信开发者工具的校验安全域名关掉,进行测试。开发者工具对canvas图片的生成可能会有问题,请尽量使用真机测试。

7.5、通过api获取的小程序二维码是二进制格式,后台返回的图片应该是base64形式的图片,前端需要把二维码base64格式转换成本地图片,方法见我的另一篇博客https://blog.csdn.net/bocongbo/article/details/84954567

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎