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

微信小程序实现分享到朋友圈 微信小程序分享到朋友圈，微信官方没有提供开放接口，所以我们通过canva画布，生成一张图片，图片自带小程序码，用户通过识别二维码，达到分享小程序到朋友圈目的。效果图： 下面我们来实现以上图片：WXML:<view class=’share’>  <canvas canvas-id=”shareCanvas” style=”width:300px;height:380px”></canvas>    <view class=’bottom’>        <image src=”/image/user/close1.png” bindtap=’closeShare’></image>    </view></view> WXSS:/* pages/user/ShareCircleOfFriends.wxss */ 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;} .bottom{ width:300px; height:40px; background-color:white;} .bottom image{width:70rpx;height:70rpx;margin-left: 45%;margin-top: 2%;} JS:data: {    sharebg: ‘https://shadoushoutest.zwyxit.com/Images/ShareImage/share3.png’, // 分享底部背景图    shareTitle: ‘互联网+深度分类回收=啥都收 电器回收，生活废品回收，工厂废料 企业转行 酒楼设备 企业设备，库存货物等等，有偿服务和无偿服务’, // 分享标题    shareCoverImg: ‘https://shadoushoutest.zwyxit.com/Images/ShareImage/share1.png’, // 分享封面图    shareQrImg: ‘https://shadoushoutest.zwyxit.com/Images/ShareImage/share2.png’, // 分享小程序二维码    userInfo: {      headImg: ‘http://shadoushou.zwyxit.com/Images/User/0515100040529.jpg’, //用户头像      nickName: ‘打豆豆’, // 昵称    },    seeDate: ‘2018-12-04’, //看视频日期  }/**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {    let that = this;    var UserName = app.globalData.login_sj[0];    wx.setNavigationBarTitle({      title: ‘分享到朋友圈’,    })    var time = util.formatTime(new Date());    var UserImage = app.globalData.login_sj[2];     var timestamp = Date.parse(new Date());    var date = new Date(timestamp);    //获取年份      var Y = date.getFullYear();    //获取月份      var M = (date.getMonth() + 1 < 10 ? ‘0’ + (date.getMonth() + 1) : date.getMonth() + 1);    //获取当日日期     var D = date.getDate() < 10 ? ‘0’ + date.getDate() : date.getDate();     var time1 = Y + “-” + M + “-” + D        that.data.userInfo.nickName = UserName;    that.data.userInfo.headImg = UserImage;    that.setData({      nickName: that.data.userInfo,      headImg: that.data.userInfo,      seeDate: time1    })     console.log(that.data.userInfo.nickName);       // 创建画布    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);              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)                  }                })              }            })          }        })      }    })   }