uni-app的一些功能

学习uni-app的过程中，我发现uni-app是一种跨平台开发框架，可以快速开发多个平台的应用程序。以下是我对uni-app学习的总结：

一.uni-app的特点

1. 跨平台开发：uni-app支持一次编写，多处运行的特性，可以开发出同时适配iOS、Android、H5等多个平台的应用程序。这大大节省了开发人员的时间和精力。

2. 基于Vue.js：uni-app基于Vue.js开发，借助Vue.js的特性，实现了组件化开发、响应式数据绑定等，使得开发效率大大提高。

3. 组件库丰富：uni-app内置了丰富的组件库，包括基础组件和扩展组件，如按钮、表单、列表、轮播图等，这些组件具有良好的兼容性，能够在不同平台上正常显示。

4. API支持多平台：uni-app提供了一套统一的API，可以调用设备硬件功能、访问系统资源等。这些API在不同平台上有相同的调用方式，使得开发者可以方便地编写跨平台的逻辑代码。

5. 性能优化：uni-app对性能优化做了很多工作，如使用虚拟DOM机制提高渲染性能，对网络请求和资源加载进行优化，以及使用微信小程序的编译方式，提高运行效率。

6. 社区活跃：uni-app有一个活跃的开发社区，开发者可以在社区中交流学习经验，解决问题。社区中也有很多开源的插件和组件，可以方便地集成到项目中。

---

二.新建一个uni-app项目的步骤

1.项目名称

2.选择项目的路径

3.选择模板

4.版本选择

5.创建

生成了一个基本结构

 在浏览器上运行

---

 

三.登录页

1.运行的代码

<template>
    <view class="login">
        <view class="title">
            <view>
                Hello
            </view>
            <view>
                欢迎登录
            </view>
        </view>
        <view class="form">
            <input type="text" placeholder="请输入用户" v-model="account" />
            <input type="text" placeholder="请输入密码" v-model="password" />
        </view>
        <view class="btn">
            <button class="btn" @tap=login>登录</button>
            <view class="tip" @tap="register">
                没有账号,请先注册
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                account: "",
                password: ""
            }
        },
        methods: {
            register() {
                uni.navigateTo({
                    url: "/pages/register/register"
                })
            },
            login() {
                uniCloud.callFunction({
                    name: "login",
                    data: {
                        username: this.account,
                        password: this.password
                    },
                    success: (res) => {
                        console.log(res);
                        if (res.result.code == 200) {
                            uni.showToast({
                                title: "登录成功"
                            })
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: "/pages/index/index"
                                })
                                uni.setStorageSync("name", res.result.user.name)
                            }, 2000)
                        } else {
                            uni.showToast({
                                title: "登录失败"
                            })
                        }
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    .login {
        padding: 150rpx 40rpx 0;
        background: url("");
        background-size: 100% 100%;
        height: 100vh;
    }

    .title {
        font-size: 40rpx;
        font-weight: bold;
        text-align: center;
    }

    .form {
        margin-top: 120rpx;

        input {
            border-bottom: 1px solid #d6d6d6;
            margin-bottom: 40rpx;
        }
    }

    .btn {
        margin-top: 100rpx;

        button {
            background-color: #409EFF;
            color: white;
        }
    }

    .tip {
        text-align: right;
        color: #b9b9b9;
        margin-top: 20rpx;
    }
</style>

2.效果图

---

 四.注册页

1.运行代码

<template>
    <view class="resgister">
         <view class="title">
             <view>
                Hello
            </view>
            <view>
                欢迎注册
            </view>
         </view>
         <view class="form">
             <text>姓名:</text>
            <input type="text" v-model="Name" placeholder="请输入姓名" />
            <text>账号:</text>
            <input type="text" v-model="userName" placeholder="请输入账号" />
            <text>密码:</text>
            <input type="text" v-model="password" placeholder="请输入密码" />
         </view>
         <view class="btn">
              <button class="btn" @tap="toregister">注册</button>
         </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Name:"",
                userName:"",
                password:""
            }
        },
        methods: {
            toregister(){
                if (this.Name == "" || this.userName == "" || this.password == ""){
                    uni.showToast({
                        title:"所有空不能为空"
                    })
                }else{
                    uniCloud.callFunction({
                        name:"register",
                        data:{
                            Name:this.Name,
                            userName:this.userName,
                            password:this.password
                        },
                        success:(res) => {
                            console.log(res);
                            if(res.result.code == 200) {
                                uni.showToast({
                                    title:"注册成功"
                                })
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url:"/pages/login/login"
                                    })
                                },2000)
                            }
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
.resgister {
        padding: 150rpx 40rpx 0;
        background: url("");
        background-size: 100% 100%;
        height: 100vh;
    }
    .title {
        font-size: 40rpx;
        font-weight: bold;
        text-align: center;
    }
    .form {
        margin-top: 120rpx;
    
        input {
            border-bottom: 1px solid #d6d6d6;
            margin-bottom: 40rpx;
        }
    }
    .btn {
        margin-top: 100rpx;
    
        button {
            background-color: #409EFF;
            color: white;
        }
    }
</style>

 2.效果图

---

总的来说，uni-app提供了一种简单、高效、跨平台的应用开发方式，使开发人员可以快速地构建出高质量的应用程序。