快速上手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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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>

作者：木子昭
链接：https://www.jianshu.com/p/05c5eaca6a1a