uni-app环境搭建和项目的创建与运行

环境搭建的步骤：

1.下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧，选择相对应的版本

2.然后去下载安装微信小程序，官方下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档，选择适合的版本下载，然后一步步安装好即可，安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择设置-->安全-->服务端口，然后打开

3.完成之后，要去配置路径，不然写完代码会打不页面：打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

微信开发者路径怎么找呢，找到微信小程序，然后右击图标，选择属性

也可以同样方法配置浏览器

然后搭建完了就创建项目

1.首先去解压下载好的HBuilderX.zip，找到后缀名为exe，然后左键双击打开

2.点击文件->新建->项目

3.然后选择uni-app类型，写项目名称跟选存储路径，然后选择vue2还是vue3，因为我们老师教我们的是vue2，所以我现在也选择vue2

4.最后，可以点击运行看看，点击运行，然后选择运行到浏览器

也可以用微信小程序运行

如果想要真机调试的话就需要appID，如果没有就去注册一个，微信公众号官网地址：微信公众平台，然后选择小程序

点击前往注册

然后如实填写信息，注意：每个邮箱只能申请一个小程序

然后返回登录，往下拉看左边，选择开发管理，会有一个appID，复制此id

返回uni-app，选择运行到小程序模拟器--微信开发工具

微信扫码登录

返回uni-app，找到manifest.json，然后点击右边的获取，获取一下appid

然后微信开发者打开project.config.json文件，找到”appid”更改为自己的ID信息，Ctrl+S保存

然后点击真机调试，然后选择就完成了。

我们老师也教我们写了一个登录页面的代码，用的数据库是云开发的数据库

这是页面代码：

<template>
    <view class="login">
        <view class="title">
            <view class="">hello</view>
            <view class="">欢迎登录请假管理系统</view>
        </view>
        <view class="comment">
            <input class="getInput" v-model="username" type="text" placeholder="请输入用户" />
            <input class="getInput" v-model="password" type="text" placeholder="请输入密码" />
            <button class="tologin" @tap="login">立即登录</button>
            <view class="toRegister" @tap="register">没有账号，请先注册</view>
        </view>
    </view>
</template>

<template>
	<view class="login">
		<view class="title">
			<view class="">hello</view>
			<view class="">欢迎登录请假管理系统</view>
		</view>
		<view class="comment">
			<input class="getInput" v-model="username" type="text" placeholder="请输入用户" />
			<input class="getInput" v-model="password" type="text" placeholder="请输入密码" />
			<button class="tologin" @tap="login">立即登录</button>
			<view class="toRegister" @tap="register">没有账号，请先注册</view>
		</view>
	</view>
</template>

这是script代码：

<script>
    export default {
        data() {
            return {
                username: "",
                password: "" } },
        methods: {
            login() {
                uniCloud.callFunction({
                    name: "login",
                    data: {
                        username: this.username,
                        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: res.result.msg,
                                icon: "none"
                            })
                        }
                    }
                })
            },
            register(){
                uni.navigateTo({
                    url: "/pages/register/register"
                })
            }
        }
    }
</script>

这是style代码：

<style lang="scss">
    .login {
        background: url("../../static/login-bg.png") no-repeat;
        background-size: 100% 100%;
        height: 100vh;
        padding: 50px 25px;

        .title {
            font-size: 25px;
            font-weight: bolder;
            margin-top: 70px;
        }

        .comment {
            margin-top: 50px;

            .getInput {
                border-bottom: 1px solid darkgray;
                margin-top: 30px;
            }

            .tologin {
                margin-top: 60px;
                background-color: #3fb64d;
                width: 90%;
                color: white;
            }

            .toRegister {
                color: #9c9c9c;
                text-align: right;
                margin-top: 15px;
                font-size: 18px;
                margin-right: 16px;
            }
        }

    }
</style>