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>
随时随地看视频
