小程序分享以及分享朋友圈

小程序分享朋友圈

最近公司项目涉及到分享这个功能 ，网上看了很多的教程，截止今天，小程序官方并没有给出直接分享到朋友圈的方法，目前世面大多都是利用canvas去画得一个带小程序码的图片。尝试了一下 ，做得不是很好，但功能基本实现 ，可能还有点小细节需要处理一下 ，这里呢，大佬们别喷，我就做个笔记。下面贴一下关键代码

wxml

<view class="container" wx-if="{{show==1}}">
  <view class='share-box'>
    <view class='share' style="width:{{widthc+'px'}};height:800rpx">
      <canvas canvas-id="shareCanvas" style="width:{{widthc+'px'}};height:800rpx"></canvas>
    </view>
    <view class='btn-box'>
      <button bindtap='downloadImg' class='save-btn'>保存图片</button>
      <view>分享海报时可到相册选取图片</view>
    </view>
  </view>

这个呢 期间遇到些问题，就是如果直接去定义canvas的宽度，兼容方面会有一些问题，所以我这边动态的去取了一个宽度，问题是解决了，但还是有些小细节需要处理。
wxss

page{
  background:#FAFAFA;
}
.fl {
  float: left;
}

.fr {
  float: right;
}
.center{
  margin-left:73rpx;
}
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.invite-title{
  color:#81868F;
  font-size: 32rpx;
  text-align: center;
  padding: 58rpx 0
}
.invite-box{
  background:#ffffff;
  margin:0 32rpx;
  border-radius: 20rpx;
}
.invite-bg{
  position: relative;
  padding:100rpx 36rpx 36rpx 36rpx;
}
.invite-bg image{
  width:100%
}
.invite-message{
  text-align: center;
  position: absolute;
  top: 355rpx;
  left: 142rpx;

}
.invite-m{
  color:#FFFFFF;
  font-size:30rpx;
}
.invite-p{
  color:#ffffff;
  font-size:88rpx;
}
.invite-x{
  color:#ffffff;
  font-size:30rpx;
}
.invite-approach{
  margin-top:20rpx;
  margin-bottom: 100rpx;
}
.invite-connect{
  text-align: center;
  width:158rpx;
  height:158rpx;
}
.invite-pic{
  width:158rpx;
  height:158rpx;
}
.invite-connect view{
  color:#25282E;
  font-size:24rpx;
  margin-top:-34rpx;
}
/*遮罩层 */

.shade {
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /*要显示在wrap的上面 */
  z-index: 1;
  position: absolute;
}

/*显示与隐藏的内容即点击核算后所展示的详细内容 */

.conts {
  width: 100%;
  height: 428rpx;
  background-color: white;
  position: fixed;
  top: 636rpx;
  text-indent: 60rpx;
}

/*显示整个conts */

.show {
  display: block;
}

/*隐藏整个conts */

.hide {
  display: none;
}

/*关闭按钮（关闭整个conts） */

.closeImg {
  width: 60rpx;
  height: 60rpx;
  float: right;
  position: relative;
  top: -123rpx;
  left: 2rpx;
  background-color: white;
  border-radius: 50%;
}
.share-pic{
  width:100rpx;
  height:100rpx;
  
}
.share-shade{
  margin:100rpx auto;
  width: 100%;
}
.share-box{
  text-align: center;
}


.c{
  border-radius: 0;
  border:0;
  padding:0;
  overflow:visible;
  line-height: normal;
  background:#fff;
}
.button-hover {
  color:#fff;
  background-color: #fff;

}
 
button::after{
 
  border:none;
 
}
.share-image {
  width: 530rpx;
  height: 888rpx;
  margin: 0 80rpx;
}

button {
  margin-top: 20rpx;
}
.canvas-box{
  margin:32rpx 32rpx 40rpx 32rpx;
  background:#fff;
}
.share-box{
  margin: 32rpx 32rpx 40rpx 32rpx;
background: #fff;
border-radius: 20rpx;

}
.share{
  height: 830rpx;
  margin: auto;
  box-shadow: 0rpx 20rpx 20rpx -20rpx #f6f8ff;
}
.btn-box{
  padding-top:80rpx;
  text-align: center;
  padding-bottom:80rpx;
  
}
.save-btn{
  background: #1EAE4F;
  width:520rpx;
  height:90rpx;
  border-radius: 44rpx;
  color:#fff;
  font-size:32rpx;
}
.btn-box view{
  color:#454545;
  font-size:28rpx;
  padding-top:10rpx;
}

有些没必要的 请忽视
js

// pages/login/login.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    widthc:'',
    show:'0',
    painting: {},
    shareImage: '',
    navBar: {
      "color": "#000",
      "flag": 1,
      "name": "邀请好友"
    },
    sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景图
    shareTitle: '', // 分享标题
    shareCoverImg: 'https://7775-wuliao8736-zuypm-1259633856.tcb.qcloud.la/yaoqingbaii%403x.png?sign=7780bfe58ffdc21503006c3b3e724544&t=1562920998', // 分享封面图
    shareQrImg: 'https://7775-wuliao8736-zuypm-1259633856.tcb.qcloud.la/gh_5a3a9a7fe19e_1280.jpg?sign=ae8a44c283c9b3e60ce29df232d4d109&t=1562922434', // 分享小程序二维码
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var that = this;
    var width = app.globalData.width-32-20;
    console.log(width)
    that.setData({
      widthc: width
    })
    var user = app.globalData.userInfo;
    // 创建画布
    const ctx = wx.createCanvasContext('shareCanvas')
    // 白色背景
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, 0, 300, 400)
    ctx.draw()
    // 下载底部背景图
    wx.getImageInfo({
      src: that.data.sharebg,
      success: (res1) => {
        // ctx.drawImage(res1.path, 0, 250, 300, 130)
        ctx.setFillStyle('#81868F')  // 文字颜色：黑色
        ctx.setFontSize(12) // 文字字号：16px
        ctx.fillText('彩车位（彩生活旗下小程序）', 90, 390)
        //这个地方我想的是取到设备宽度然后-375之后/2再加上90作为X轴的坐标的 ，有需要的可以去尝试一下
        // 下载视频封面图
        wx.getImageInfo({
          src: that.data.shareCoverImg,
          success: (res2) => {
            ctx.drawImage(res2.path, 0, 100, width, 175)
            // 分享标题
            // ctx.setTextAlign('center')    // 文字居中
            ctx.setFillStyle('#000')  // 文字颜色：黑色
            ctx.setFontSize(20)         // 文字字号：20px
            // 下载二维码
            wx.getImageInfo({
              src: that.data.shareQrImg,
              success: (res3) => {
                let qrImgSize = 70
                ctx.drawImage(res3.path, 125, 300, qrImgSize, qrImgSize)
                ctx.stroke()
                ctx.draw(true)

                // 用户昵称
                ctx.setFillStyle('#454545')  // 文字颜色：黑色
                ctx.setFontSize(18) // 文字字号：16px
                ctx.fillText('你的好友' + app.globalData.userInfo.nickName, 110, 52)
                // 观看日期
                ctx.setFillStyle('#454545')  // 文字颜色：黑色
                ctx.setFontSize(18)       // 文字字号：16px
                ctx.fillText('给你分享了一个车位', 110, 74)

                // 下载用户头像
                wx.getImageInfo({

                  src: app.globalData.userInfo.avatarUrl,
                  success: (res4) => {
                    // 先画圆形，制作圆形头像(圆心x，圆心y，半径r)
                    ctx.arc(70, 58, 28, 0, Math.PI * 2, false)
                    ctx.clip()
                    // 绘制头像图片
                    let headImgSize = 64
                    ctx.drawImage(res4.path, 35, 25, headImgSize, headImgSize)
                    // ctx.stroke() // 圆形边框
                    ctx.draw(true)

                    // 保存到相册

                  }
                })
              }
            })
          }
        })
      }
    })
  },
    
   eventSave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImage,
      success(res) {
        wx.showToast({
          title: '保存图片成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },
  eventGetImage(event) {
    console.log(event)
    wx.hideLoading()
    const { tempFilePath, errMsg } = event.detail
    if (errMsg === 'canvasdrawer:ok') {
      this.setData({
        shareImage: tempFilePath
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  onShareAppMessage:function(){
    return {
      title: '你是我的眼',
      path: '../../../../index/index',//这里的path是当前页面的path，必须是以 / 开头的完整路径，后面拼接的参数 是分享页面需要的参数  不然分享出去的页面可能会没有内容
      imageUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562664662373&di=c37f0b13e208d401a03b253d6b892d7a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F27%2F87%2F08n58PICW2N_1024.jpg",
      desc: '最亮的星',
      success: (res) => {
        console.log("转发成功", res);
        console.log("成功了")
      },
      fail: (res) => {
        console.log("转发失败", res);
      }
    }
  },
  share_quan:function(){
    var that= this;
    this.setData({
      show:1,
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },
  change: function () {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  },
  // 通过点击“conts”区域里右上角的关闭按钮来关闭整个“conts”，当然了，你可以把该事件作用于“conts”上，此时点击“conts”  
  // 的任意一个地方，都会使得这个“conts”关闭  
  close: function () {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  },
  downloadImg: function () {
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: '分享图片已保存到相册'
            })
          }
        })
      }
    }, this)
  }
})