快速上手wepy，制作简易签名板

wepy是开发微信小程序的一个框架

wepy特点:

• 支持组件化开发
• 风格借鉴了vue, 易上手
• 腾讯官方开源维护 https://tencent.github.io/wepy/

应用是最好的学习方式, 这次用wepy做一个简易签名板

源码

<style lang="less">
    
    canvas {
        margin: 20px auto;
        border: 2px solid #A84631;
        width: 300px;
        height: 200px;
        border-radius: 20px;
    }

    .info {
        text-align: center;
    }


    image{
        border: 1px solid #A84631;
        width: 60px;
        height: 40px;
        margin : 5px;
        border-radius: 5px;
    }

    button {
        width: 40%;
        float: left;
        margin: 5%;
    }

</style>

<template>

    <view>
    <canvas canvas-id="myCanvas"
        disable-scroll=true
        bindtouchstart="start"
        bindtouchmove="move"
        bindtouchend="end"/>

    <view class="info">
        鼠标当前位置: ({{x}}, {{y}})
    </view>
    <block>
        <button bindtap="exportImage" type="primary">存图</button>
    </block>    
    <block>
        <button bindtap="clearNow" type="warn">清空</button>
    </block>
    <block wx:for="{{filePathList}}">
        <image src="{{item}}"/>
    </block>

    </view>

</template>

<script>

    import wepy from 'wepy'
var ctx = wx.createCanvasContext('myCanvas')

export default class Fyxz extends wepy.page {
  data = {
        x: 0,
        y: 0,
        ctx: ctx,
        filePath: '',
        filePathList: []
      }

      methods = {

        start: (e) => {
          this.x = e.touches[0].x
          this.y = e.touches[0].y
        },
        move: (e) => {
          this.ctx.moveTo(this.x, this.y)
          this.x = e.touches[0].x
          this.y = e.touches[0].y
          this.ctx.lineTo(this.x, this.y)
          this.ctx.stroke()
          this.ctx.draw(true)
        },
        end: (e) => {

        },

        savaImageToDevice: (filePath) => {
          wx.saveImageToPhotosAlbum({
            success(res) {
            }
          })
        },

        exportImage: () => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 300,
            height: 200,
            destWidth: 300,
            destHeight: 200,
            canvasId: 'myCanvas',
            success: (res) => {
              let p = new Promise((resolve, reject) => {
                let fp = res.tempFilePath
                resolve(fp)
              })
              p.then((fp) => {
                console.log('++++>', fp)
                this.filePath = fp
                // 将照片保存到缓存
                this.methods.savaImageToDevice(fp)
                // 将缓存路径保存到列表
                this.filePathList.push(fp)
                // 手动更新数据
                this.$apply()
              }).then(() => {
                // 清屏
                this.methods.clearNow();
                console.log('更新完毕!')
              })
            }
          })
        },
        clearNow: () => {
          this.ctx.clearRect(0, 0, 100, 200)
          this.ctx.draw()
        }
      }
    }
</script>