微信小程序通知验证签名方法(微信小程序实现电子签名)
类别:编程学习 浏览量:2787
时间:2021-10-28 10:37:32 微信小程序通知验证签名方法
微信小程序实现电子签名本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下
<view class="sign-contain"> <view class="signName"> <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> </view> <view class="btn-wrap"> <button catchtap="cleardraw">清除签名</button> <button catchtap="uploadImg">上传签名</button> </view> </view>
js:
var context = null;// 使用 wx.createContext 获取绘图上下文 context var isButtonDown = false;//是否在绘制中 var arrx = [];//动作横坐标 var arry = [];//动作纵坐标 var arrz = [];//总做状态,标识按下到抬起的一个组合 var canvasw = 0;//画布宽度 var canvash = 0;//画布高度 Page({ data: { canvasw: '', canvash: '', imgUrl: '', info: {}, signBase64: '', sysType: '' // 判断机型 }, onLoad: function (options) { let that = this let res = wx.getSystemInfoSync() const system = res.system.split(' ') that.setData({ sysType: system[0], }) let params = JSON.parse(options.params) that.setData({ info: params, }) that.startCanvas(); that.initCanvas() }, /** * 以下 - 手写签名 / 上传签名 */ startCanvas() {//画布初始化执行 var that = this; //获取系统信息 wx.getSystemInfo({ success: function (res) { canvasw = res.windowWidth; canvash = res.windowHeight; that.setData({ canvasw: canvasw }); that.setData({ canvash: canvash }); } }); this.initCanvas(); this.cleardraw(); }, //初始化函数 initCanvas() { context = wx.createCanvasContext('canvas'); context.beginPath() if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; context.setStrokeStyle('#444'); } else { context.fillStyle = 'rgba(0, 0, 0, 1)'; context.setStrokeStyle('#aaa'); } context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); }, canvasStart(event) { isButtonDown = true; arrz.push(0); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); }, canvasMove(event) { if (isButtonDown) { arrz.push(1); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); } for (var i = 0; i < arrx.length; i++) { if (arrz[i] == 0) { context.moveTo(arrx[i], arry[i]) } else { context.lineTo(arrx[i], arry[i]) } } context.clearRect(0, 0, canvasw, canvash); if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; context.setStrokeStyle('#444'); } else { context.fillStyle = 'rgba(0, 0, 0, 1)'; context.setStrokeStyle('#aaa'); } context.setLineWidth(3); context.setLineCap('round'); context.setLineJoin('round'); context.stroke(); context.draw(false); }, canvasEnd(event) { isButtonDown = false; }, //清除画布 cleardraw() { arrx = []; arry = []; arrz = []; context.clearRect(0, 0, canvasw, canvash); if(this.data.sysType === 'iOS') { context.fillStyle = 'rgba(255, 255, 255, 1)'; context.setStrokeStyle('#444'); } else { context.fillStyle = 'rgba(0, 0, 0, 1)'; context.setStrokeStyle('#aaa'); } context.draw(true); }, uploadImg() { var that = this //生成图片 // context.draw(true,()=> { setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'canvas', //设置输出图片的宽高 fileType: 'jpg', quality: 1, success: function (res) { // canvas图片地址 res.tempFilePath let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64') that.setData({ imgUrl: res.tempFilePath, signBase64: imgBase64 }) that.submitSign() console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64) // wx.saveImageToPhotosAlbum({ // filePath: res.tempFilePath, // success(res4) { // console.log(res,'保存res4'); // wx.showToast( { // title: '已成功保存到相册', // duration: 2000 // } ); // } // }) }, fail: function () { wx.showModal({ title: '提示', content: 'canvas生成图片失败。微信当前版本不支持,请更新到最新版本!', showCancel: false }); }, complete: function () { } }, 5000) }) // }) }, // 提交签名 submitSign() { let that = this wx.showLoading({ title: '正在提交...', mask: true }) let type = '1' if(that.data.sysType === 'iOS') { type = '0' } else { type = '1' } wx.$getWxLoginCode(resp => { const params = { qmbase64: that.data.signBase64, } console.info("入参", params) wx.kservice.yyyurl(params, res => { wx.hideLoading() if (res.statusCode === '200') { wx.showModal({ title: '提示', content: res.message, showCancel: false, confirmText: '返回首页', success(res) { if (res.confirm) { wx.reLaunch({ url: '/pages/index/index' }) } } }) } else { wx.showModal({ title: '提示', content: res.message, showCancel: true, cancelText: '返回首页', confirmText: '重新提交', success: (result) => { if (result.cancel) { // 取消停留 wx.reLaunch({ url: '/pages/index/index' }) } else if (result.confirm) { //重新提交 that.submitSign() } }, }); } }, {}, true, true) }) }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
CSS:
.sign-contain { display: flex; flex-direction:column; width: 100%; height: 100%; } .signName { flex: 1; } .canvas { width: 100%; height: 100%; } .bg000{ background-color: #000; } .btn-wrap{ display: block; width:100%; height: 100rpx; margin: 20rpx 0; position: relative; } .btn-wrap button{ width: 43%; }
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序的交通码(微信小程序中实现车牌输入功能)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
热门推荐
- ubuntu常用命令表(Ubuntu服务器常用命令汇总)
- centos7 离线安装nginx(centos8安装nginx1.9.1的详细过程)
- filezilla服务器支持断点续传吗(Filezilla Server配置FTP服务器提示操作超时的解决办法)
- python基本运算符编程(对Python3 * 和 ** 运算符详解)
- mysql表锁行锁和分页锁(MySQL 不停机不锁表主从搭建)
- html5 web技术(html5视频常用API接口的实战示例)
- docker 清除none镜像(删除docker images中为none的镜像操作)
- html5应用的几个建议
- virtualbox服务器搭建centos(VirtualBox安装CentOS及JDK、Hadoop的安装与配置详细教程)
- tomcat与eclipse配置运行(Tomcat配置及如何在Eclipse中启动)