uniapp，小程序，实现签名功能

最新推荐文章于 2024-08-30 16:29:29 发布

凉城苦笑

最新推荐文章于 2024-08-30 16:29:29 发布

阅读量1.9k

点赞数 1

分类专栏： uniapp vue 小程序文章标签：小程序 vue.js

本文链接：https://blog.csdn.net/qq_43485097/article/details/124841259

版权

本文介绍了如何在uniapp和小程序中实现用户签名功能，并将其转换为base64编码以调用后端接口。通过创建组件，设置uni.scss样式以及处理页面配置，详细展示了从新建组件到调用接口的全过程，确保在调用接口前后能够正确显示和隐藏动画。

摘要由CSDN通过智能技术生成

uniapp，小程序，实现签名功能

1.需求介绍
有的时候开发uniapp或者小程序需要实现用户签名的一个功能，但是网上又不想购买插件，自己也不想写，这个时候就可以CV开发了
2.目标明确
我们需要把用户签名后转成base64码调取后端给的接口，我这里是以字符串(String)的形式，具体格式和后端的沟通
**3.注意事项 ** 项目一定要安装scss不然指定报错不会的去百度这里安装太简单了就省了

.

页面签名展示的效果：

第一步.新建components 新建->bobo-message -> 新建 -> bobo-message.vue 如图所示

bobo-message.vue 代码

<template>
	<view :style="{zIndex: zIndex}" class="container">
		<block v-for="message in messageQueue" :key="message.id">
			<view :class="[message.animation, backgroundClass(message)]" class="message">
				<text v-if="message.type === 'info'" class="bm-icon info">&#xe671;</text>
				<text v-if="message.type === 'success'" class="bm-icon success">&#xe62f;</text>
				<text v-if="message.type === 'warn'" class="bm-icon warn">&#xe671;</text>
				<text v-if="message.type === 'error'" class="bm-icon error">&#xe630;</text>
				<text>{
  {message.content}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	// 需要支持的单独配置项：显示时长、是否启用背景、类型、内容
	export default {
		name: 'bobo-message-cpt',
		props: {
			zIndex: {
				type: Number,
				default: 10000
			},
			duration: {
				type: Number,
				default: 2000
			},
			background: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				messageQueue: [],
				lastId: 0
			}
		},
		computed: {
			backgroundClass() {
				return msg => {
					return this.background || msg.background ? `background-${msg.type}` : ''
				}
			}
		},
		methods: {
			/**
			 * 展示普通提示信息
			 * @param {Object} content
			 */
			info(arg) {
				const message = {
					type: 'info'
				}
				if (typeof arg === 'object' && arg) {
					message.content = arg.content
					message.duration = arg.duration
					message.background = arg.background
				} else if(typeof arg === 'string') {
					message.content = arg
				}
				this.fadeIn(message)
			},
			/**
			 * 展示成功提示
			 * @param {Object} content
			 */
			success(arg) {
				const message = {
					type: 'success'
				}
				if (typeof arg === 'object' && arg) {
					message.content = arg.content
					// 显示时长会用在 settimeout的参数中，必须保证类型正确
					if (arg.duration && typeof arg.duration === 'number' &am