E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小程序分享朋友临县E企盈小程序圈

E企盈小程序直播系统

开通X小程序电话:4006-838-530微信小程序暂时没有分享到朋友圈的功能,分享的思路是用 canvas画布生成一张分享图片,保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。可参考智行火车票的助力抢票功能。1、wxml文件view class='share'  canvas canvas-id="shareCanvas" style="width:300px;height:380px"/canvas/viewview class='btn-box'  button bindtap='downloadImg'分享到朋友圈/button/view

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: 1060rpx 60rpx 0 60rpx;}button{  background: darkturquoise;}

3、js文件Page({  data: {    sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景图    shareTitle: '哈哈哈男孩从小就没有地位,看来一万个心酸哈哈哈男孩从小就没有地位,看来一万个心酸', // 分享标题    shareCoverImg: 'http://qiniu.jnwtv.com/H520181210164154569520223.j开通皮衣小程序电话:4006-838-530peg', // 分享封面图    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(){    let that = this;    // 创建画布    const ctx = 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)         // 文字字号:20px            if (that.data.shareTitle.length = 14) {              // 不用换行              ctx.fillText(that.data.shareTitle, 10, 200, 280)            } else if (that.data.shareTitle.length = 28) {              // 两行              let firstLine = that.data.shareTitle.substring(0, 14);              let secondLine = that.data.shareTitle.substring(14, 27);              ctx.fillText(firstLine, 10, 200, 280)              ctx.fillText(secondLine, 10, 224, 280)            } else {              // 超过两行              let firstLine = that.data.shareTitle.substring(0, 14);           开通猫罐头小程序电话:4006-838-530   let secondLine = 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) = {                let qrImgSize = 70                ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)                ctx.stroke()                ctx.draw(true)                // 用户昵称                ctx.setFillStyle('#000')  // 文字颜色:黑色                ctx.setFontSize(14) // 文字字号:16px                ctx.fillText(that.data.userInfo.nickName, 38, 284)                // 观看日期                ctx.setFillStyle('#999')  // 文字颜色:黑色                ctx.setFontSize(10)       // 文字字号:16px                ctx.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()                    // 绘制头像图片                    let headImgSize = 24                    ctx.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)                  }                })              }            })          }        })      }    })  }})

4、生成canvas的图片资源需要缓存到本地,所以需要在微信公众平台,将需要用到的分享图片,包括二维码的图片域名添加到微信安全域名范围内,否则会报下载图片失败的错误。刚开始也可以将微信开发者工具的校验安全域名关掉,进行测试。开发者工具对canvas图片的生成可能会有问题,请尽量使用真机测试。5、通过api获取的小程序二维码是二进制格式,后台返回的图片应该是base64形式的图片,前端需要把二维码base64格式转换成本地图片,方法见我的另一篇博客 https://blog.csdn.net/bocongbo/article/details/84954567

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序分享朋友临县E企盈小程序圈
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏