uni-app个人博客及其心得体会

这个学期通过学习使用Uni-App跨平台开发的过程中，我有以下的一些心得体会：

1.熟悉Vue.js

Uni-App是基于Vue.js框架开发的，因此在学习Uni-App前，应当先掌握Vue.js的基础语法和特性。如果已经熟练掌握Vue.js，学习Uni-App将会更加快速和简单。

2.了解组件库

Uni-App提供了一套基本的组件库，包括页面、列表、表单等多种组件，初学者可以先了解这些组件的基本使用方法，随后再逐步对自己的项目进行定制化。

3.沉浸式学习

通过阅读教程、看文档、写实例代码、尽量多地动手实践，可以更好地掌握Uni-App的知识和技能点，以便在实际项目应用中更加游刃有余。

4.参与社区

Uni-App的社区论坛和微信群非常活跃，特别是在csdn论坛上面，初学者可以在csdn社区中寻找支持和帮助，分享经验、问题和解决思路。同时，也可以学习其他人的方法，在他们的帮助和支持下更加高效地学习和进步。

5.代码部分

5.1用户登录

<template>
	<view>
		<dialog-shell ref="shell" title="用户登录" confirm-text="登录" @confirm="confirmLogin">
			<image src="../../static/icons/icon.png" class="icon"></image>
			<text class="welcome">WELCOME</text>
			<text class="info-register" @click="clickGoRegister">没有账号？请注册</text>
			<view class="login-container">
				<input type="text" placeholder="输入用户名:" placeholder-class="input-holder" :value="usrValue"
					@input="inputGetUser" />
				<text class="iconfont icon-yonghu ic-user"></text>
			</view>
			<view class="login-container" style="margin-bottom: 20rpx;">
				<input v-if="isPwd" :value="pwdValue" type="password" placeholder="输入密码"
					placeholder-class="input-holder" @input="inputGetPwd" />
				<input v-else :value="pwdValue" type="text" placeholder="输入密码" placeholder-class="input-holder"
					@input="inputGetPwd" />
				<text
					:class="isPwd ? 'iconfont icon-chakan1 ic-pwd-status' : 'iconfont icon-jinzhichakan ic-pwd-status'"
					@click="clickSwtich"></text>
				<text class="iconfont icon-yuechi ic-user"></text>
			</view>
		</dialog-shell>
	</view>
</template>

使用Vue组件，实现为用户登录模块。代码解释如下：

1. <view> 标签定义了一个基础视图组件，用于将页面布局和样式进行组合。
2. <dialog-shell> 标签封装了一个对话框组件，在此处显示为用户登录的对话框。它具有 title 属性，用于设置对话框标题，confirm-text 属性用于设置确认按钮的文本，@confirm 则监听确认事件，触发 confirmLogin 方法。
3. <image> 标签用于定义一个图像元素，src 属性设置该图片的路径，这里为 icon.png。并设置 class 属性为 icon，这个类定义了该图片应用的样式。
4. <text> 标签定义了一些文本元素，class 属性为 welcome、info-register、icon-yonghu等，用于设置文本应用的样式和类名。其中，@click 监听点击事件，触发 clickGoRegister 方法。
5. <view> 定义了一个布局视图，class 属性为 login-container，表示定义了登录模块的容器。其内部包含一个 <input> 输入框元素、一个文本元素、还有一个内嵌图标元素，分别用于输入用户名、显示用户图标。
6. 同样地，<view> 定义了另一个 <input> 输入框元素，用于输入用户密码，配置项与用户的输入框类似，但需要另外设置一个按钮，用于切换密码明文和密文的显示状态，@click监听 clickSwtich 事件。
7. v-if 表达式用于根据条件是否显示密码输入框的实际内容，在这里为显示或隐藏密码输入框的密文内容。
8. v-else 表达式则是用户名输入框的代码，在这里为输入文本内容。
9. :@input，:@confirm，@click 等符号为事件监听器的绑定方式，这些事件将在后台实现逻辑的相关处理。

5.2<script> 部分，用于实现用户登录模块的逻辑处理。

<script>
	export default {
		name: "login-dialog",
		data() {
			return {
				isPwd: true,
				pwdValue: "",
				usrValue: ""
			};
		},
		mounted() {
			let userInfo = uni.getStorageSync("userLoginInfo")
			if (userInfo) {
				this.usrValue = userInfo.username
				this.pwdValue = userInfo.password
			}
		},
		methods: {
			clickGoRegister() {
				uni.navigateTo({
					url: '/pages/register/register',
					success: res => {
						this.$refs.shell.clickToHide()
					},
					fail:() => {},
					complete: () => {}
				});
			},


			show() {
				this.$refs.shell.show()
			},
			clickSwtich() {
				this.isPwd = !this.isPwd
			},
			inputGetPwd(e) {
				this.pwdValue = e.detail.value
			},
			inputGetUser(e) {
				this.usrValue = e.detail.value
			},
			confirmLogin() {
				if (this.usrValue.length == 0 || this.pwdValue.length == 0) {
					uni.showToast({
						title: '输入用户名和密码',
						icon: 'none'
					});
					return
				}
				let url = this.$params.host + this.$params.action_login
				let data = {
					username: this.usrValue,
					password: this.pwdValue
				}
				this.$request.post(url, data, res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (!res.success) {
						this.$refs.shell.show()
						this.usrValue = ''
						this.pwdValue = ''
						return
					}
					uni.getStorageSync('userLoginInfo', data)
					let app = getApp()
					app.globalData.uid = res.data.id
					app.globalData.token = res.data.token
					app.globalData.avatar = res.data.avatar
					app.globalData.type = res.data.type
					app.globalData.nickName = res.data.nickName
					app.globalData.userName = res.data.userName
					app.globalData.email = res.data.email
					this.$emit("after")
					// console.log(res.data.avatar);
					this.$noti.post(this.$params.noti_login_status)
				}, () => {})
			}
		}
	}
</script>

<script> 部分，用于实现用户登录模块的逻辑处理。以下是我的解释：

1. export default 导出当前文件的默认值，也就是一个Vue组件对象。
2. name 属性定义了当前组件的名称。
3. data 函数返回一个包含 isPwd、pwdValue、usrValue 三个数据对象的数组。这三个数据对象分别代表用户的密码/用户名输入状态和值。
4. mounted 生命周期函数，组件渲染后调用；在这里读取本地存储的用户登录信息。如果该信息存在，即将其恢复到用户名和密码输入框的初始值上去。
5. methods 中定义了一些事件处理函数：
   • clickGoRegister 跳转到注册页，并在跳转成功后关闭当前组件。
   • show 函数用于显示当前组件。
   • clickSwtich 函数用于响应密码显示状态的切换，即密码明文或密文。
   • inputGetPwd 和 inputGetUser 函数用于获取密码和用户名输入框的当前值。
   • confirmLogin 函数用于在用户点击登录按钮后进行登录操作。
6. confirmLogin 函数的处理流程如下：首先判断当前的用户名和密码输入框是否为空，如果为空，调用 uni.showToast 显示提示信息，并返回上一级函数。如果不为空，使用 $request.post 方法向服务器发送登录请求，等待服务器响应。如果服务器返回成功，则使用 uni.getStorageSync 将用户登录信息存储到本地； 否则，显示错误提示，并返回至用户登录界面。登录成功后，将获取的用户信息在应用全局对象中保存，在当前组件内触发 after 事件。

6.总结

总之，学习Uni-App需要不断地实践和思考，多与别人交流互动，不断总结经验和教训。只有通过长时间的实践和不段地学习，才能在未来的项目中获得更高的成功率。