小程序如何从0-1（第三章）

作者: 人类进化又没带我 | 来源:发表于2019-01-03 20:41 被阅读0次

小程序如何从0-1（第三章）
微信运营方法之小程序和公众号互相引流
小程序如何从0-1（第二章）
如何从0-1产出被阿里认可的产品
从0-1搭建微信小程序
小程序如何从0-1（第一章）
小程序没有流量怎么办？如何推广？
《小程序开发指南》笔记第9章微信开发者工具
我是如何快速上手微信小程序开发的
《微信小程序开发从入门到实战》学习十二

这一章节呢就讲下如何生成朋友圈海报。对于这类的需求，最近是贼多。因为小程序本来就是即用即走的，如何能高效快速的拉新，以及留住用户呢？emmmm。拉新嘛当然得往票圈看齐，留存就的看你的产品里是否有吸引人的地方。

如何高效的让其他用户知道你的小程序产品，如何推广你的小程序？，首先放几张图：

image.png

众所周知呢，小程序是不能分享到票圈的，所以我们就有了生成海报的概念，那么如何去操作生成海报呢？

使用canvas画图

小程序提供了几个相关的画图api 点这里
第一步操作：

首先我们需要在页面上创建一个canvas，然后因为canvas 是系统组件它的层级最高，所以会导致一直显示在页面上，如果你需要查看效果图，那么可以暂时不理，最后实现的时候我们需要给他一个样式`position: absolute; top: -10000rpx;`。让它定位到页面可视区域之外，不能让用户查看到它。
<canvas canvas-id="mycanvas" />

第二步操作：

js里需要把页面背景图、小程序码图 以及用户头像等图片 使用
wx.getImageInfo({
   src: ‘xxx.png‘,
   success: (res) => {  },
   fail: (err)=>{ 
})
把cdn地址的图片 转成微信本地图片，不然生成不了海报。这个API有较多的转换失败的情况，现在我们小程序后台报错基本都是该问题。所以需要在fail回调里做重试操作。

第三步操作：

画图.这里是大多数开发者比较烦的地方，页面内的所有元素需要组装到一起。所以需要布局样式。
然后canvas的样式是使用坐标轴来玩的，所以需要根据x和y轴来调整样式。且位置单位为px。接下来贴源码吧

//将小程序码绘制到固定位置
  setQrcode(context) {
    let path = this.data.qtsheXcxCode //小程序码
    context.drawImage(path, 75, 450, 75, 75)
  },
  //将昵称绘制到canvas的固定位置
  setName(context) {
    if (this.data.userName.length >= 8) {
      var title = this.data.userName.substring(0, 7) + '...'
    } else {
      var title = this.data.userName
    }
    context.setFontSize(14)
    context.fillText(title, 98, 330)
  },
  //绘制用户头像
  setAvatarUrl(context) {
    let cx = 30 + 25
    let cy = 320 + 25
    context.arc(cx, cy, 25, 0, 2 * Math.PI)
    context.clip()
    let path = this.data.userHeadUrl
    context.drawImage(path, 30, 320, 52, 52)
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg() {
    let context = wx.createCanvasContext('mycanvas')
    let path = this.data.qtsheBackground
    let that = this
    context.drawImage(path, 0, 0, 375, 667) //以iPhone 6尺寸大小为标准绘制图片
    that.setQrcode(context)
    that.setName(context)
    that.setAvatarUrl(context)
    //绘制图片
    context.draw()
    context.save()
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function(res) {
          wx.hideLoading()
          that.setData({
            shareImagePath: res.tempFilePath
          })
        },
        fail: function(res) {
          console.log(res.errMsg)
        }
      }, this)
    }, 2000)
  },
注意一点的是保存图片时需要延迟，这是老版的写法，没有啥问题，新版写法可以通过draw回调画图成功后调用保存图片的api wx.canvasToTempFilePath。这个时候就不需要写延时保存图片。

  savePhoto() {
    var that = this
    wx.showLoading({
      title: '正在保存...',
      mask: true
    })
    setTimeout(() => {
      wx.saveImageToPhotosAlbum({
        filePath: that.data.shareImagePath,
        success(res) {
          wx.showToast({
            title: '保存成功',
            icon: 'none'
          })
          setTimeout(() => {
            wx.hideLoading()
            that.setData({
              isPhotoModel: false,
              isCanvas: false
            })
          }, 300)
        },
        fail() {
          wx.showToast({
            title: '保存失败，请刷新页面重试',
            icon: 'none'
          })
          setTimeout(() => {
            wx.hideLoading()
            that.setData({
              isPhotoModel: false,
              isCanvas: false
            })
          }, 300)
        }
      })
    }, 2500)
  }

然后再说一个canvas里绘制圆角头像的方法：

ctx: context, img:图片路径，x:圆的中心的x坐标，y: 圆的中心的y坐标，r:圆的半径
circleImg(ctx, img, x, y, r) {
    ctx.save();
    var d =2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
  }