环境搭建的步骤:
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>