一、效果图

。

二、组件完整代码示例

小程序根目录创建components文件夹，签名组件放在这个文件夹下，components文件夹下新建signature目录，

1.signature.js文件

代码如下（示例）：

const app = getApp();
Component({/*** 组件的属性列表*/properties: {//高度百分比h: {type: Number,value: 0.2,},//  填充描述文字fillText: {type: String,value: "请使用正楷",},},/*** 组件的初始数据*/data: {canvas: "",ctx: "",pr: 0,width: 0,height: 0,first: true,},attached: function () {this.getSystemInfo();this.createCanvas();},/*** 组件的方法列表*/methods: {start(e) {if (this.data.first) {this.clearClick();this.setData({ first: false });}// 开始创建一个路径，如果不调用该方法，最后无法清除画布this.data.ctx.beginPath();// 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);},move(e) {// 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);this.data.ctx.stroke();},error: function (e) {console.log("画布触摸错误" + e);},/*** 初始化*/createCanvas() {const pr = this.data.pr; // 像素比const query = this.createSelectorQuery();query.select("#canvas").fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext("2d");canvas.width = this.data.width * pr; // 画布宽度canvas.height = this.data.height * pr; // 画布高度ctx.scale(pr, pr); // 缩放比ctx.lineGap = "round";ctx.lineJoin = "round";ctx.lineWidth = 4; // 字体粗细ctx.font = "40px Arial"; // 字体大小，ctx.fillStyle = "#ecf0ef"; // 填充颜色ctx.fillText(this.data.fillText,this.data.width / 2 - 100,this.data.height / 2);this.setData({ ctx, canvas });});},// 获取系统信息,宽，高，像素比getSystemInfo() {let _that = this;wx.getSystemInfo({success(res) {_that.setData({pr: res.pixelRatio,width: res.windowWidth,height: res.windowHeight * _that.data.h - 70,});},});},//重签clearClick: function () {//清除画布this.data.first = true;this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);},//保存图片saveClick: function (cb) {if (this.data.first) {wx.showToast({title: "签名数据为空!",icon: "none",});return false;}//  获取临时文件路径wx.canvasToTempFilePath({x: 0,y: 0,width: this.data.width,height: this.data.height,destWidth: this.data.width * this.data.pr,destHeight: this.data.height * this.data.pr,canvasId: "canvas",canvas: this.data.canvas,fileType: "png",success: (res) => {// 文件转base64wx.getFileSystemManager().readFile({filePath: res.tempFilePath,encoding: "base64",success: (val) => {cb && cb(val,res);//  转换成功派发事件this.triggerEvent("success", val.data);},});},});},},
});

2.signature.wxml文件

代码如下（示例）：

<view class="signature"><canvas type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" binderror="error" style="width:{{width}}px;height:{{height}}px;"></canvas>
</view>

3.signature.json文件

代码如下（示例）：

{"component": true,"usingComponents": {}
}

4.signature.wxss文件

代码如下（示例）：

.signature {padding-top: 30px;
}
canvas {background-color: white;
}

三、小程序页面引入组件使用示例，以index页面为例

1.index.wxml文件

本案例结合vant popup弹出框使用，可根据需求修改

代码如下（示例）：

//  第一行解决弹窗签名时页面滚动问题
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
<view bindtap="test">测试签名</view>
<van-popup closeable show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:close="onClose"><view ><signature h="{{0.5}}" class="signature" /></view><view class="signature-btn"><van-button type="primary" size="small" bindtap="reset">重置</van-button><van-button type="primary" size="small" bindtap="save">确认</van-button></view>
</van-popup>

2.index.js文件

代码如下（示例）：

Page({data: {show:false,},test(){this.setData({show:true})},//  保存save(){let signature = this.selectComponent('.signature');signature.saveClick((res,url)=>{//  res:base64数据，url:临时文件urlconsole.log(res，url);this.reset()})},//  重置reset(){let signature = this.selectComponent('.signature');signature.clearClick()},onClose(){this.reset()this.setData({show:false}) }
})

3.index.json文件

代码如下（示例）：

{"usingComponents": {"signature": "../../components/signature/signature","van-popup": "@vant/weapp/popup/index"},"navigationBarTitleText":"页面标题","navigationBarTextStyle": "white",
}

微信小程序电子签名组件相关推荐

微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序|area组件使用的地址数据文件plus
area组件使用的地址数据文件前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意前言实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...

微信小程序电子签名组件

文章目录

一、效果图

二、组件完整代码示例

1.signature.js文件

2.signature.wxml文件

3.signature.json文件

4.signature.wxss文件

三、小程序页面引入组件使用示例，以index页面为例

1.index.wxml文件

2.index.js文件

3.index.json文件

微信小程序电子签名组件相关推荐

最新文章

热门文章