国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uni-app 微信小程序中如何通過 canvas 畫布實現(xiàn)電子簽名?

這篇具有很好參考價值的文章主要介紹了uni-app 微信小程序中如何通過 canvas 畫布實現(xiàn)電子簽名?。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

一、實際應(yīng)用場景

電子簽名軟件應(yīng)用場景:電子簽名在金融、銀行、貸款行業(yè)中可以用于對內(nèi)日常辦公流轉(zhuǎn)的文檔的蓋章簽字,對外涉及業(yè)務(wù)合作協(xié)議,采購合同,貸款申請、信用評估、貸款合同、貸款文件表、說明函等等。

可以說,只要是涉及紙質(zhì)文檔簽字蓋章的場景,都能夠使用電子印章,電子簽名。

uniapp小程序 合同內(nèi)容view 和 簽名繪制成一張圖,微信小程序,微信小程序,uni-app,小程序

二、實現(xiàn)方式

利用 canvas 畫布,模擬人工在紙張上手寫的筆跡。原理其實很簡單,就是你在畫布上任意涂寫即可,最后保存整個畫布區(qū)域的內(nèi)容為圖片。

三、案例 demo 分享

uniapp小程序 合同內(nèi)容view 和 簽名繪制成一張圖,微信小程序,微信小程序,uni-app,小程序

這里我加了幾個操作按鈕,應(yīng)該能滿足您基本的數(shù)字簽名需要了,最后我也會貼上我的源碼。

?ps:微信小程序關(guān)于畫布的官方文檔

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

1、先在 view 視圖中添加 canvas 組件。

<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
				 @touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
</view>

canvas-id="handWriting" 是唯一標(biāo)識一個 canvas,用于后續(xù)獲取?Canvas 對象。

2、頁面加載時,初始化 canvas

onLoad() {
			let canvasName = this.canvasName;
			let ctx = wx.createCanvasContext(canvasName);

			this.ctx = ctx;
			var query = wx.createSelectorQuery();
			query
				.select('.handCenter')
				.boundingClientRect(rect => {
					this.canvasWidth = rect.width;
					this.canvasHeight = rect.height;

					/* 將canvas背景設(shè)置為 白底,不設(shè)置  導(dǎo)出的canvas的背景為透明 */
					this.setCanvasBg('rgba(0,0,0,0)');
				})
				.exec();
		},

3、筆跡開始,移動,結(jié)束,還有底部預(yù)覽,重寫,保存,上傳等附加操作按鈕。

uniapp小程序 合同內(nèi)容view 和 簽名繪制成一張圖,微信小程序,微信小程序,uni-app,小程序

完成頁面代碼如下,包含我的效果圖樣式。

<template>
	<view>
		<view class="wrapper">
			<view class="handBtn">
				<image @click="selectColorEvent('black','#1A1A1A')" :src="selectColor === 'black' ? '/static/img/sign/color_black_selected.png' : '/static/img/sign/color_black.png'"
				 :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
				<image @click="selectColorEvent('red','#ca262a')" :src="selectColor === 'red' ? '/static/img/sign/color_red_selected.png' : '/static/img/sign/color_red.png'"
				 :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
				<button @click="retDraw" class="delBtn">重寫</button>
				<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
				<button @click="previewCanvasImg" class="previewBtn">預(yù)覽</button>
				<button @click="uploadCanvasImg" class="uploadBtn">上傳</button>
				<button @click="subCanvas" class="subBtn">完成</button>
				<button @click="back" class="subBtn">返回</button>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
				 @touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
			</view>
			<view class="handRight">
				<view class="handTitle">請簽名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				canvasWidth: 0,
				canvasHeight: 0,
				transparent: 1, // 透明度
				selectColor: 'black',
				lineColor: '#1A1A1A', // 顏色
				lineSize: 1.5, // 筆記倍數(shù)
				lineMin: 0.5, // 最小筆畫半徑
				lineMax: 4, // 最大筆畫半徑
				pressure: 1, // 默認(rèn)壓力
				smoothness: 60, //順滑度,用60的距離來計算速度
				currentPoint: {},
				currentLine: [], // 當(dāng)前線條
				firstTouch: true, // 第一次觸發(fā)
				radius: 1, //畫圓的半徑
				cutArea: {
					top: 0,
					right: 0,
					bottom: 0,
					left: 0
				}, //裁剪區(qū)域
				bethelPoint: [], //保存所有線條 生成的貝塞爾點;
				lastPoint: 0,
				chirography: [], //筆跡
				currentChirography: {}, //當(dāng)前筆跡
				linePrack: [] //劃線軌跡 , 生成線條的實際點
			};
		},
		onLoad() {
			let canvasName = this.canvasName;
			let ctx = wx.createCanvasContext(canvasName);

			this.ctx = ctx;
			var query = wx.createSelectorQuery();
			query
				.select('.handCenter')
				.boundingClientRect(rect => {
					this.canvasWidth = rect.width;
					this.canvasHeight = rect.height;

					/* 將canvas背景設(shè)置為 白底,不設(shè)置  導(dǎo)出的canvas的背景為透明 */
					this.setCanvasBg('rgba(0,0,0,0)');
				})
				.exec();
		},
		methods: {
			// 筆跡開始
			uploadScaleStart(e) {
				if (e.type != 'touchstart') return false;
				let ctx = this.ctx;
				ctx.setFillStyle(this.lineColor); // 初始線條設(shè)置顏色
				ctx.setGlobalAlpha(this.transparent); // 設(shè)置半透明
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				};
				let currentLine = this.currentLine;
				currentLine.unshift({
					time: new Date().getTime(),
					dis: 0,
					x: currentPoint.x,
					y: currentPoint.y
				});
				this.currentPoint = currentPoint;
				// currentLine
				if (this.firstTouch) {
					this.cutArea = {
						top: currentPoint.y,
						right: currentPoint.x,
						bottom: currentPoint.y,
						left: currentPoint.x
					};
					this.firstTouch = false;
				}
				this.pointToLine(currentLine);
			},
			// 筆跡移動
			uploadScaleMove(e) {
				if (e.type != 'touchmove') return false;
				if (e.cancelable) {
					// 判斷默認(rèn)行為是否已經(jīng)被禁用
					if (!e.defaultPrevented) {
						e.preventDefault();
					}
				}
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				};

				//測試裁剪
				if (point.y < this.cutArea.top) {
					this.cutArea.top = point.y;
				}
				if (point.y < 0) this.cutArea.top = 0;

				if (point.x > this.cutArea.right) {
					this.cutArea.right = point.x;
				}
				if (this.canvasWidth - point.x <= 0) {
					this.cutArea.right = this.canvasWidth;
				}
				if (point.y > this.cutArea.bottom) {
					this.cutArea.bottom = point.y;
				}
				if (this.canvasHeight - point.y <= 0) {
					this.cutArea.bottom = this.canvasHeight;
				}
				if (point.x < this.cutArea.left) {
					this.cutArea.left = point.x;
				}
				if (point.x < 0) this.cutArea.left = 0;

				this.lastPoint = this.currentPoint;
				this.currentPoint = point;

				let currentLine = this.currentLine;
				currentLine.unshift({
					time: new Date().getTime(),
					dis: this.distance(this.currentPoint, this.lastPoint),
					x: point.x,
					y: point.y
				});

				this.pointToLine(currentLine);
			},
			// 筆跡結(jié)束
			uploadScaleEnd(e) {
				if (e.type != 'touchend') return 0;
				let point = {
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				};
				this.lastPoint = this.currentPoint;
				this.currentPoint = point;

				let currentLine = this.currentLine;
				currentLine.unshift({
					time: new Date().getTime(),
					dis: this.distance(this.currentPoint, this.lastPoint),
					x: point.x,
					y: point.y
				});

				if (currentLine.length > 2) {
					var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
					//$("#info").text(info.toFixed(2));
				}
				//一筆結(jié)束,保存筆跡的坐標(biāo)點,清空,當(dāng)前筆跡
				//增加判斷是否在手寫區(qū)域;
				this.pointToLine(currentLine);
				var currentChirography = {
					lineSize: this.lineSize,
					lineColor: this.lineColor
				};
				var chirography = this.chirography;
				chirography.unshift(currentChirography);
				this.chirography = chirography;

				var linePrack = this.linePrack;
				linePrack.unshift(this.currentLine);
				this.linePrack = linePrack;
				this.currentLine = [];
			},
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();

				//設(shè)置canvas背景
				this.setCanvasBg('rgba(0,0,0,0)');
			},
			//畫兩點之間的線條;參數(shù)為:line,會繪制最近的開始的兩個點;
			pointToLine(line) {
				this.calcBethelLine(line);
				return;
			},
			//計算插值的方式;
			calcBethelLine(line) {
				if (line.length <= 1) {
					line[0].r = this.radius;
					return;
				}
				let x0,
					x1,
					x2,
					y0,
					y1,
					y2,
					r0,
					r1,
					r2,
					len,
					lastRadius,
					dis = 0,
					time = 0,
					curveValue = 0.5;
				if (line.length <= 2) {
					x0 = line[1].x;
					y0 = line[1].y;
					x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
					y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
					//x2 = line[1].x;
					//y2 = line[1].y;
					x1 = x0 + (x2 - x0) * curveValue;
					y1 = y0 + (y2 - y0) * curveValue;
				} else {
					x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
					y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
					x1 = line[1].x;
					y1 = line[1].y;
					x2 = x1 + (line[0].x - x1) * curveValue;
					y2 = y1 + (line[0].y - y1) * curveValue;
				}
				//從計算公式看,三個點分別是(x0,y0),(x1,y1),(x2,y2) ;(x1,y1)這個是控制點,控制點不會落在曲線上;實際上,這個點還會手寫獲取的實際點,卻落在曲線上
				len = this.distance({
					x: x2,
					y: y2
				}, {
					x: x0,
					y: y0
				});
				lastRadius = this.radius;
				for (let n = 0; n < line.length - 1; n++) {
					dis += line[n].dis;
					time += line[n].time - line[n + 1].time;
					if (dis > this.smoothness) break;
				}

				this.radius = Math.min((time / len) * this.pressure + this.lineMin, this.lineMax) * this.lineSize;
				line[0].r = this.radius;
				//計算筆跡半徑;
				if (line.length <= 2) {
					r0 = (lastRadius + this.radius) / 2;
					r1 = r0;
					r2 = r1;
					//return;
				} else {
					r0 = (line[2].r + line[1].r) / 2;
					r1 = line[1].r;
					r2 = (line[1].r + line[0].r) / 2;
				}
				let n = 5;
				let point = [];
				for (let i = 0; i < n; i++) {
					let t = i / (n - 1);
					let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
					let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
					let r = lastRadius + ((this.radius - lastRadius) / n) * i;
					point.push({
						x: x,
						y: y,
						r: r
					});
					if (point.length == 3) {
						let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2]
							.y, point[2].r);
						a[0].color = this.lineColor;
						// let bethelPoint = this.bethelPoint;
						// bethelPoint = bethelPoint.push(a);
						this.bethelDraw(a, 1);
						point = [{
							x: x,
							y: y,
							r: r
						}];
					}
				}
				this.currentLine = line;
			},
			//求兩點之間距離
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
				let a = [],
					vx01,
					vy01,
					norm,
					n_x0,
					n_y0,
					vx21,
					vy21,
					n_x2,
					n_y2;
				vx01 = x1 - x0;
				vy01 = y1 - y0;
				norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
				vx01 = (vx01 / norm) * r0;
				vy01 = (vy01 / norm) * r0;
				n_x0 = vy01;
				n_y0 = -vx01;
				vx21 = x1 - x2;
				vy21 = y1 - y2;
				norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
				vx21 = (vx21 / norm) * r2;
				vy21 = (vy21 / norm) * r2;
				n_x2 = -vy21;
				n_y2 = vx21;
				a.push({
					mx: x0 + n_x0,
					my: y0 + n_y0,
					color: '#1A1A1A'
				});
				a.push({
					c1x: x1 + n_x0,
					c1y: y1 + n_y0,
					c2x: x1 + n_x2,
					c2y: y1 + n_y2,
					ex: x2 + n_x2,
					ey: y2 + n_y2
				});
				a.push({
					c1x: x2 + n_x2 - vx21,
					c1y: y2 + n_y2 - vy21,
					c2x: x2 - n_x2 - vx21,
					c2y: y2 - n_y2 - vy21,
					ex: x2 - n_x2,
					ey: y2 - n_y2
				});
				a.push({
					c1x: x1 - n_x2,
					c1y: y1 - n_y2,
					c2x: x1 - n_x0,
					c2y: y1 - n_y0,
					ex: x0 - n_x0,
					ey: y0 - n_y0
				});
				a.push({
					c1x: x0 - n_x0 - vx01,
					c1y: y0 - n_y0 - vy01,
					c2x: x0 + n_x0 - vx01,
					c2y: y0 + n_y0 - vy01,
					ex: x0 + n_x0,
					ey: y0 + n_y0
				});
				a[0].mx = a[0].mx.toFixed(1);
				a[0].mx = parseFloat(a[0].mx);
				a[0].my = a[0].my.toFixed(1);
				a[0].my = parseFloat(a[0].my);
				for (let i = 1; i < a.length; i++) {
					a[i].c1x = a[i].c1x.toFixed(1);
					a[i].c1x = parseFloat(a[i].c1x);
					a[i].c1y = a[i].c1y.toFixed(1);
					a[i].c1y = parseFloat(a[i].c1y);
					a[i].c2x = a[i].c2x.toFixed(1);
					a[i].c2x = parseFloat(a[i].c2x);
					a[i].c2y = a[i].c2y.toFixed(1);
					a[i].c2y = parseFloat(a[i].c2y);
					a[i].ex = a[i].ex.toFixed(1);
					a[i].ex = parseFloat(a[i].ex);
					a[i].ey = a[i].ey.toFixed(1);
					a[i].ey = parseFloat(a[i].ey);
				}
				return a;
			},
			bethelDraw(point, is_fill, color) {
				let ctx = this.ctx;
				ctx.beginPath();
				ctx.moveTo(point[0].mx, point[0].my);
				if (undefined != color) {
					ctx.setFillStyle(color);
					ctx.setStrokeStyle(color);
				} else {
					ctx.setFillStyle(point[0].color);
					ctx.setStrokeStyle(point[0].color);
				}
				for (let i = 1; i < point.length; i++) {
					ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
				}
				ctx.stroke();
				if (undefined != is_fill) {
					ctx.fill(); //填充圖形 ( 后繪制的圖形會覆蓋前面的圖形, 繪制時注意先后順序 )
				}
				ctx.draw(true);
			},
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			//將Canvas內(nèi)容轉(zhuǎn)成 臨時圖片 --> cb 為回調(diào)函數(shù) 形參 tempImgPath 為 生成的圖片臨時路徑
			canvasToImg(cb) {
				//這種寫法移動端 出不來
				this.ctx.draw(true, () => {
					wx.canvasToTempFilePath({
						canvasId: 'handWriting',
						fileType: 'png',
						quality: 1, //圖片質(zhì)量
						success(res) {
							// console.log(res.tempFilePath, 'canvas生成圖片地址');

							wx.showToast({
								title: '執(zhí)行了嗎?'
							});

							cb(res.tempFilePath);
						}
					});
				});
			},
			//完成
			subCanvas() {
				this.ctx.draw(true, () => {
					wx.canvasToTempFilePath({
						canvasId: 'handWriting',
						fileType: 'png',
						quality: 1, //圖片質(zhì)量
						success(res) {
							// console.log(res.tempFilePath, '已完成,canvas生成圖片地址');
							// wx.showToast({
							// 	title: '已保存'
							// });
							//保存到系統(tǒng)相冊
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									console.log("已完成并保存到相冊");
									wx.showToast({
										title: '已成功保存到相冊',
										duration: 2000
									});
								}
							});
						}
					});
				});
			},
			//保存到相冊
			saveCanvasAsImg() {
				/*
				this.canvasToImg( tempImgPath=>{
					// console.log(tempImgPath, '臨時路徑');
					wx.saveImageToPhotosAlbum({
						filePath: tempImgPath,
						success(res) {
							wx.showToast({
								title: '已保存到相冊',
								duration: 2000
							});
						}
					})
				} );
		*/

				wx.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //圖片質(zhì)量
					success(res) {
						// console.log(res.tempFilePath, 'canvas生成圖片地址');
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								wx.showToast({
									title: '已保存到相冊',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//預(yù)覽
			previewCanvasImg() {
				wx.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //圖片質(zhì)量
					success(res) {
						// console.log(res.tempFilePath, 'canvas生成圖片地址');
						wx.previewImage({
							urls: [res.tempFilePath] //預(yù)覽圖片 數(shù)組
						});
					}
				});

				/*	//移動端出不來  ^~^?。?						this.canvasToImg( tempImgPath=>{
							wx.previewImage({
								urls: [tempImgPath], //預(yù)覽圖片 數(shù)組
							})
						} );
				*/
			},
			//上傳
			uploadCanvasImg() {
				wx.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //圖片質(zhì)量
					success(res) {
						console.log(res.tempFilePath, '待上傳服務(wù)器canvas生成圖片地址');
						//上傳
						wx.uploadFile({
							url: 'https://xxx/uploadSignFile', // 僅為示例,非真實的接口地址
							filePath: res.tempFilePath,
							name: 'file_signature',
							formData: {
								user: 'test'
							},
							success(res) {
								if (res.code == 1 ) {
									wx.showToast({
										title: '上傳成功',
										duration: 2000
									});
								}else{
									uni.showToast({
										title: res.message,
										icon: "none",
										position: 'bottom',
										duration: 3000
									});
								}
							}
						});
					}
				});
			},
			//設(shè)置canvas背景色  不設(shè)置  導(dǎo)出的canvas的背景為黑色
			//@params:字符串  color
			setCanvasBg(color) {
				/* 將canvas背景設(shè)置為 白底,不設(shè)置  導(dǎo)出的canvas的背景默認(rèn)為黑色 */
				//rect() 參數(shù)說明  矩形路徑左上角的橫坐標(biāo),左上角的縱坐標(biāo), 矩形路徑的寬度, 矩形路徑的高度
				//這里是 canvasHeight - 4 是因為下邊蓋住邊框了,所以手動減了寫
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //設(shè)置填充
				this.ctx.draw(); //開畫
			},
			//返回
			back(){
				uni.reLaunch({
					url:'/pages/ucenter/ucenter'
				})
			}
		}
	};
</script>

<style>
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}
</style>

代碼中都有注釋說明,希望能幫助到需要的小伙伴。具體api細(xì)節(jié) 不懂的還請自行查閱官方文檔說明。

寫在最后,小編是一個注重解決實際問題的博主,日常分享案例皆是工作中的實際項目背景。喜歡博主案例分享的可以給博主的文章來個點贊、收藏、加關(guān)注。文章來源地址http://www.zghlxwxcb.cn/news/detail-688451.html

到了這里,關(guān)于uni-app 微信小程序中如何通過 canvas 畫布實現(xiàn)電子簽名?的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • 微信小程序web-view嵌入uni-app H5頁面,通過H5頁面跳轉(zhuǎn)其他小程序如何操作?

    微信小程序web-view嵌入uni-app H5頁面,通過H5頁面跳轉(zhuǎn)其他小程序如何操作?

    ?微信小程序appId查看方法: 1)有后臺登錄權(quán)限的情況下:登錄微信公眾平臺后, 微信公眾平臺 微信公眾平臺,給個人、企業(yè)和組織提供業(yè)務(wù)服務(wù)與用戶管理能力的全新服務(wù)平臺。 https://mp.weixin.qq.com/ 點擊右上角logo,在“帳號信息”中找到AppID(小程序ID) 2)沒有后臺登錄權(quán)

    2024年02月11日
    瀏覽(91)
  • 微信小程序web-view嵌入uni-app H5頁面,通過H5頁面跳轉(zhuǎn)企業(yè)微信客戶聊天窗口如何操作?

    微信小程序web-view嵌入uni-app H5頁面,通過H5頁面跳轉(zhuǎn)企業(yè)微信客戶聊天窗口如何操作?

    1)找到企業(yè)ID,登錄?企業(yè)微信 企業(yè)微信 https://work.weixin.qq.com/wework_admin/loginpage_wx ?2)找到接入鏈接? 功能-客服-微信客服 微信公眾平臺,給個人、企業(yè)和組織提供業(yè)務(wù)服務(wù)與用戶管理能力的全新服務(wù)平臺。 https://mp.weixin.qq.com/

    2024年02月11日
    瀏覽(97)
  • uni-app微信小程序如何渲染markdown

    在開發(fā)個人網(wǎng)站微信登錄平臺易登微信小程序的時候,由于說明文檔是用markdown格式來書寫的,在網(wǎng)頁上有各種markdown個人渲染引擎,比如這個markdown編輯器無敵了!。 但是在小程序上還是第一次渲染markdown,找了各種方案,但處處是坑,除此之外最后渲染出來的效果也慘不忍

    2024年02月16日
    瀏覽(34)
  • [uni-app] 微信小程序 如何修改替換頭像

    [uni-app] 微信小程序 如何修改替換頭像

    ?如下圖所示,微信小程序中涉及到修改頭像的交互 技術(shù): 前端應(yīng)用框架為uni-app UI框架為uView ?思考: 1. 頭像點擊事件 click 2.從本地相冊選擇圖片或使用相機拍照 uni.chooseImage(OBJECT) ,方法執(zhí)行成功后根據(jù)success中返回的圖片的本地文件路徑列表 tempFilePaths,做操作 3.上傳圖片

    2024年02月11日
    瀏覽(28)
  • 如何將各種小程序(微信小程序)項目轉(zhuǎn)換為 uni-app 項目

    如何將各種小程序(微信小程序)項目轉(zhuǎn)換為 uni-app 項目

    使用【miniprogram-to-uniapp】可以將微信小程序項目轉(zhuǎn)為 uni-app 項目(新版本 HBuilderX 工具已經(jīng)支持各種小程序轉(zhuǎn)換插件) HBuilderX 插件地址:miniprogram-to-uniapp v2 - DCloud 插件市場 核心原理:使用 Babel 獲取AST(詞法分析),然后或使用 Babel 自帶函數(shù)增刪,或正則分析替換等等操作 支持的

    2024年02月04日
    瀏覽(89)
  • 【微信小程序】如何獲得自己當(dāng)前的定位呢?本文利用逆地址解析、uni-app帶你實現(xiàn)

    【微信小程序】如何獲得自己當(dāng)前的定位呢?本文利用逆地址解析、uni-app帶你實現(xiàn)

    目錄 前言 效果展示 一、在騰訊定位服務(wù)配置微信小程序JavaScript SDK 二、使用uni-app獲取定位的經(jīng)緯度 三、?逆地址解析,獲取精確定位 四、小提示 在瀏覽器搜索騰訊定位服務(wù),找到官方網(wǎng)站,利用微信或者其他賬號注冊登錄,登錄后如下圖操作 點進(jìn)去之后,可以看到如下圖

    2024年01月19日
    瀏覽(27)
  • 微信小程序uni-app

    微信小程序uni-app

    小程序 是一種不需要下載、安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用觸手可及的夢想,用戶掃一掃或者搜一下就能打開應(yīng)用,也實現(xiàn)了用完即走的理念,用戶不用安裝太多應(yīng)用,應(yīng)用隨處可用,但又無須安裝卸載。 微信開發(fā)文檔 1、工作原理 網(wǎng)頁開發(fā),渲染線程和腳本是互斥的

    2024年02月10日
    瀏覽(106)
  • 微信小程序授權(quán)(uni-app)

    概述 為了避免重復(fù)開發(fā),自己封裝了一個通用用戶授權(quán)回調(diào)方法,只需要傳入需要授權(quán)的scope,權(quán)限中文描述、回調(diào)函數(shù),就可以實現(xiàn)一整套小程序是否授權(quán)、打開授權(quán)設(shè)置,調(diào)用后續(xù)操作函數(shù)的工作 功能 可以根據(jù)自己的實際應(yīng)用進(jìn)行微調(diào) 目前使用的uni-app版本,可以根據(jù)自

    2024年02月16日
    瀏覽(99)
  • 語法速通 uni-app隨筆【uni-app】【微信小程序】【vue】

    語法速通 uni-app隨筆【uni-app】【微信小程序】【vue】

    其中, pages 目錄/ index 目錄【必有】: index.js 編寫業(yè)務(wù)邏輯 【初始數(shù)據(jù),生命周期函數(shù)】 index.json 編寫配置 index.wxml 編寫模板 【可理解為本頁html】 index.wxss 【可理解為本頁css】 直接輸入敲回車,連尖括號都不需要就可以標(biāo)簽補全 1)初始數(shù)據(jù)寫死 在 index.wxml 引入變

    2024年02月12日
    瀏覽(228)
  • 微信小程序web-view嵌入uni-app H5頁面,通過H5頁面?zhèn)鲄⒔o小程序進(jìn)行轉(zhuǎn)發(fā)分享頁面,并通過點擊轉(zhuǎn)發(fā)出來的卡片,定向打開對應(yīng)H5路徑

    index.wxml ?index.js 在H5項目的App.vue頁面獲取參數(shù)實現(xiàn)自動跳轉(zhuǎn)到對應(yīng)頁面,包括攜帶的參數(shù)值

    2024年02月12日
    瀏覽(96)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包