微信小程序爬坑记录(二)

一 生成海报

菜鸟第一次接触这个业务，部分代码参考了 blog.csdn.net/zhihui1017/… 这篇博客，生成方法讲的比较清楚，就不再赘述了，记录一些自己遇到的坑

提供一个生成带圆角矩形的方法

 // 生成圆角矩形
     roundRect(ctx,x, y, width, height, radius) {
       if (width < 2 * radius) radius = width / 2;
       if (height < 2 * radius) radius = height / 2;
       ctx.beginPath();
       ctx.moveTo(x + radius, y);
       ctx.arcTo(x + width, y, x + width, y + height,radius); // 右上
       ctx.arcTo(x + width, y + height, x, y + height,radius); // 右下
       ctx.arcTo(x, y + height, x, y,radius); // 左下
       ctx.arcTo(x, y, x + width, y, radius);// 左上
       ctx.closePath();
       return ctx;
     },

tips：尝试用这个方法画一条分割线，微信开发者工具正常显示，真机不显示，后来更改为fillRect方法

生成头像的方法

ctx.save()
        ctx.beginPath()
        // 55 x坐标 288 y坐标 50*widthRate 半径 
        // 0 起始弧度，单位弧度（在3点钟方向）
        // 2*Math.PI 终止弧度 false 弧度的方向是否是逆时针
        ctx.arc(55,288,50*widthRate,0,2*Math.PI,false)
        ctx.stroke()
        ctx.clip()
        // 注意：这里的坐标为圆心坐标减去半径，注意半径是动态的，用来适配不同机型
        ctx.drawImage(res[1].path,55-50*widthRate,288-50*widthRate, 100*widthRate, 100*widthRate)
        ctx.restore()

绘制需要时间，添加loading

你一定想说，添加loading还用提出来，wx.showLoading() wx.hideLoading 谁不会，但问题是，直接使用ctx.draw的回调，在ios系统上不生效，需要如下加一个定时器。。。

 ctx.draw(false,setTimeout(() => {
          wx.hideLoading({
            success(){
             that.setData({posterVisible:true})
            }
          })
          
       }, 300))

二 触底分页功能

方法一

// HTML
<scroll-view class="scroll_view" scroll-y bindscrolltolower="nextPage">

// JS
nextPage(){
      if(this.data.listAll.length<this.data.total) {
        this.setData({page:this.data.page+1},()=>{
          // 调用分页接口
          this.getListAll
        })
      }
    },

方法二

onReachBottom(){
	const {dataList,total}=this.data
    if(dataList.length<total) {
      this.setData({page:this.data.page+1},()=>{
        this.getDataPage()
      })
    }
  },

tips:因为这个地方是收藏页面，支持删除，删除和分页在某种情况下会出现一定的冲突，所以就采用了数据总量小于10条(且删除后数据总量大于10)，再进行删除操作就重新获取接口的操作。这样既可以避免删除完当前页无法请求数的bug，又可以减轻服务器压力。