微信小程序 手写签名_微信小程序实现手写签字

本文介绍了如何在微信小程序中实现手写签字功能,通过监听触屏事件记录坐标,使用canvas绘制路径,实现签字并保存图片。文章提供了相应的WXML、WXSS和JS代码示例,并提供了一个码云项目的链接供参考。
摘要由CSDN通过智能技术生成

无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的,因为我第一次写小程序。还好有文档。所以思路来了,触碰屏幕记录开始画的位置

手指在屏幕上滑动就是画咯,画完了记录最后的离开屏幕的位置

下一个笔画开始还是先触碰屏幕

手指滑动

最后点击一个完成签字就行了

小程序的canvas 还是挺好的。下面放代码

首先是 index.wxml

被检查单位签字

完成签字

重新签字

很简单啊 就是一个布局里面有个画布 有两个按钮

然后是index.wxss.paper{border:1px solid #dedede; margin: 10px; height:160px }

.image{border:1px solid #dedede; margin: 10px; height:160px }

.signBtn{display: flex; margin-top:20px;}

.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}

.handWriting{width:100%}

.image image{width:100%; height:160px }

没啥好说的 就是布局div+css

最后是index.jsPage({

data: {

context1: null,

has

手写Picker组件主要包括以下几个步骤: 1. 创建一个组件文件夹,命名为picker,并在该文件夹下创建两个文件:picker.wxml 和 picker.js。 2. 在 picker.js 中定义组件的属性和方法,包括: - properties: 定义传入组件的属性,如选项数组、默认选中值等。 - data: 定义组件内部的数据,如选中的值、是否显示等。 - methods: 定义组件的方法,如打开/关闭选择器、选择某一项等。 3. 在 picker.wxml 中编写组件的结构和样式,包括: - 使用<view>标签包裹整个组件,并设置样式; - 根据传入的选项数组,使用<scroll-view>标签渲染出所有选项,并设置样式; - 根据选中的值,使用<view>标签显示当前选中的项,并设置样式; - 可以使用<cover-view>标签覆盖在滚动列表上面,实现点击遮罩关闭选择器的效果。 4. 在外部页面中引用该组件,并传入选项数组等属性。 下面是一个简单的手写Picker组件代码示例: picker.js ``` Component({ // 组件的属性列表 properties: { options: { type: Array, value: [] }, value: { type: String, value: '' } }, // 组件的初始数据 data: { showPicker: false, selectedIndex: 0, selectedValue: '' }, // 组件的方法列表 methods: { // 打开选择器 openPicker: function() { this.setData({ showPicker: true }); }, // 关闭选择器 closePicker: function() { this.setData({ showPicker: false }); }, // 选择某一项 selectItem: function(e) { var index = e.currentTarget.dataset.index; var value = this.data.options[index].value; this.setData({ selectedIndex: index, selectedValue: value }); this.triggerEvent('change', { value: value }); } } }) ``` picker.wxml ``` <view class="picker"> <view class="mask" wx:if="{{showPicker}}" bindtap="closePicker"></view> <view class="picker-container" wx:if="{{showPicker}}"> <scroll-view class="options" scroll-y="true"> <view class="option" wx:for="{{options}}" wx:key="{{index}}" data-index="{{index}}" bindtap="selectItem">{{item.label}}</view> </scroll-view> <view class="selected" bindtap="closePicker">{{selectedValue}}</view> </view> <view class="trigger" bindtap="openPicker">{{selectedValue}}</view> </view> ``` picker.wxss ``` .picker { position: relative; } .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .picker-container { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; } .options { max-height: 200rpx; overflow-y: scroll; } .option { padding: 10rpx; } .selected { padding: 10rpx; font-size: 16rpx; text-align: center; border-top: 1rpx solid #eee; } .trigger { padding: 10rpx; font-size: 16rpx; text-align: center; border-top: 1rpx solid #eee; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值