从设计到开发一个小程序页面

巧妇难为无米之炊，想写功能但是没有好看的设计，边写边设计效率又不够高。mastergoAi生成的页面又不够好看，而且每月给的免费积分用得又超快，so决定自给自足。能有多难，先做，做了再改。

于是决定踏足设计，本期话题新手如何用mastergo设计小程序页面。

先去小红书上找找模子，看能否复原。摸了一晚上，感觉效果还行，比ai生成的要好看那么一点。只是想画个时钟出来不知道怎么画好，还的看怎么用canvas实现时钟动画。

附上mastergo网址：MasterGo 莫高设计 - AI 时代的数字界面生产平台

有了UI页面画起来就是快多了

今天用canvas绘制了时钟，然后调整了下整体的布局更简洁直观了

另外再附上canvas绘制时钟代码，canvas越写越有意思了

// components/stars/stars.ts
let timer = null
Component({
  lifetimes: {
    attached() {
      this.createSelectorQuery().select("#myCanvas2").fields({
        node: true,
        size: true
      }).exec(res => this.init(res));
    },
    detached() {
      if (timer) {
        clearInterval(timer)
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    init(res) {
      const width = res[0].width
      const height = res[0].height
      // 设置画布宽高
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      canvas.width = width
      canvas.height = height
      const r = width / 2
      const hourNeedle = r * 1 / 2
      const minuteNeedle = r * 2.5 / 4
      const secondNeedle = r * 4 / 5

      // 帧渲染回调
      const draw = () => {
        const now = new Date();
        const hour = now.getHours();
        const minute = now.getMinutes();
        const second = now.getSeconds();
        const secondDeg = (second / 60) * Math.PI * 2;
        const minuteDeg = ((second / 60 + minute) / 60) * Math.PI * 2;
        const hourDeg = ((((second / 60 + minute) / 60) + hour) / 12) * Math.PI * 2;
        this.render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle)
        // 注册下一帧渲染
        // canvas.requestAnimationFrame(draw)
      }
      timer = setInterval(() => {
        draw()
      }, 1000)
    },
    //画背景框
    renderCircle(ctx, width) {
      ctx.beginPath()
      ctx.lineWidth = '1'
      ctx.arc(width / 2, width / 2, width / 2 - 2, 2, 4 * Math.PI);
      ctx.strokeStyle = '#000'
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(width / 2, width / 2, width / 2 - 6, 2, 4 * Math.PI);
      ctx.strokeStyle = '#000'
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(width / 2, width / 2, 3, 2, 4 * Math.PI);
      ctx.strokeStyle = '#000'
      ctx.stroke()
      ctx.fillStyle = '#000'
      ctx.fill()

      let count = 0
      while (count < 60) {
        const deg = (Math.PI / 30) * count
        const r = width / 2 - 6
        const r1 = r - 4
        const r2 = r - 8
        const r3 = r - 18
        let R = r1
        if (count % 5 == 0) {
          R = r2
          let word = count / 5 == 0 ? 12 : count / 5
          let w = ctx.measureText(word).width;
          ctx.fillText(word, width / 2 + r3 * Math.sin(deg) - w / 2, width / 2 - r3 * Math.cos(deg) + w / 2)
        }

        ctx.beginPath()
        ctx.moveTo(width / 2 + r * Math.sin(deg), width / 2 - r * Math.cos(deg))
        ctx.lineTo(width / 2 + R * Math.sin(deg), width / 2 - R * Math.cos(deg))
        ctx.strokeStyle = '#000'
        ctx.stroke()
        count++
      }
      ctx.font = '12px bold'
    },
    // 画时针
    render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle) {
      ctx.clearRect(0, 0, width, height)
      this.renderCircle(ctx, width)

      ctx.beginPath()
      ctx.moveTo(width / 2 + (-10) * Math.sin(minuteDeg), width / 2 - (-10) * Math.cos(minuteDeg));
      ctx.lineTo(width / 2 + minuteNeedle * Math.sin(minuteDeg), width / 2 - minuteNeedle * Math.cos(minuteDeg));
      ctx.lineCap = 'round'
      ctx.lineWidth = '2'
      ctx.stroke();

      ctx.beginPath()
      ctx.moveTo(width / 2 + (-10) * Math.sin(hourDeg), width / 2 - (-10) * Math.cos(hourDeg));
      ctx.lineTo(width / 2 + hourNeedle * Math.sin(hourDeg), width / 2 - hourNeedle * Math.cos(hourDeg));
      ctx.lineCap = 'round'
      ctx.lineWidth = '3'
      ctx.stroke();

      ctx.beginPath()
      ctx.moveTo(width / 2 + (-10) * Math.sin(secondDeg), width / 2 - (-10) * Math.cos(secondDeg));
      ctx.lineTo(width / 2 + secondNeedle * Math.sin(secondDeg), width / 2 - secondNeedle * Math.cos(secondDeg));
      ctx.lineCap = 'round'
      ctx.lineWidth = '1'
      ctx.strokeStyle = 'red'
      ctx.stroke();
    },
  }
})

时钟效果可查看微信小程序“哆喵口袋”