1. 跨平台开发：uni-app支持一次编写、多端运行，开发者只需编写一套代码，即可同时在微信小程序、H5、Android、iOS等平台上运行，极大地提高了开发效率。 2. 组件化开发：uni-app提供了丰富的组件和插件，开发者可以轻松调用各种组件和API，快速构建复杂的界面和功能。 3. 灵活性和扩展性：uni-app允许开发者在需要的地方自定义原生代码，同时支持插件和原生扩展，满足个性化需求。 4. 性能优化：uni-app针对不同平台进行了优化，保证应用在各个平台上的性能和体验都能得到良好的表现。 5. 良好的生态系统：uni-app拥有庞大的开发者社区和丰富的插件市场，开发者可以分享和交流经验、资源和插件。 6. 易学易用：uni-app采用了Vue.js框架，开发者可以直接使用Vue.js的语法和特性，上手简单，学习成本低。 7. 支持原生能力：uni-app支持调用原生能力，可以通过插件和扩展实现更多功能和交互。
1. 创建uni-app项目： - 在uni-app官网上下载uni-app的开发环境并安装。 - 打开命令行工具，使用命令行创建一个新的uni-app项目：`vue create -p dcloudio/uni-preset-vue my-uniapp` - 进入项目目录：`cd my-uniapp` - 运行项目：`npm run dev` 2. 编写页面： - 在项目的`/pages`目录下创建一个新的页面文件夹，如`/pages/index`。 - 在该文件夹中编写`index.vue`作为该页面的Vue组件，编写布局、样式和交互逻辑。 - 在`/pages.json`中配置该页面路径和页面标题。 3. 添加页面跳转功能： - 使用uni-app提供的`uni.navigateTo`、`uni.redirectTo`、`uni.switchTab`等API进行页面跳转。 - 在需要进行页面跳转的事件处理函数中调用相应的API实现跳转。 4. 发布小程序： - 在微信开发者工具中导入项目目录，通过微信开发者工具编译并预览小程序。 - 编译后，可以在微信开发者工具中进行调试和查看运行效果。 - 将小程序代码上传至微信公众平台后台进行审核和发布。
前端首页的代码
HTTP
<script>
export default {
data() {
return {
bannerList: [{
"id": 1,
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner1.jpg?e=1710757468&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:PCvcKSKECqRu-essaPOmsnTVgNE="
},
{
"id": 2,
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"id": 3,
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner3.jpg?e=1710757502&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:LzGLjdUX0phBqAD7wqNXcrCHEzc="
}
],
Draws: [{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
},
{
"url": "http://scboieyq0.hd-bkt.clouddn.com/banner2.jpg?e=1710757483&token=VVKWxI7zpGcuO5gCjDZAfdmZMPQ4jOj_09JHkB_S:ARPFEceehHKld7H31g0T9_L13BA="
}
]
}
},
onLoad() {
},
methods: {
toSuoSou() {
uni.navigateTo({
url: "/pages/Sousuo/Sousuo"
})
},
}
}
</script>
<style lang="scss">
.Index {
width: 100vw;
height: 100vh;
box-sizing: border-box;
.Carousel {
// width: 100%;
height: 300rpx;
border: 1px solid black;
image {
width: 100%;
height: 280rpx;
}
}
.Recommend {
margin-top: 40rpx;
// margin: 20px auto;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
.Recommend-1 {
font-size: 20px;
font-weight: bold;
}
}
.Draw {
border: solid 2rpx black;
// width: 100%;
height: 100%;
//background-color: #ececec;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.Works {
margin: 4px;
height: 200px;
width: 355rpx;
border: solid 2rpx black;
image {
height: 200px;
width: 355rpx;
}
}
}
}
</style>
登录页代码
<script>
export default {
data() {
return {
//密码隐藏
tuBiao: "eye-slash-filled",
showPassword: true,
//存值
Username: "",
password: ""
}
},
methods: {
//隐藏密码
changePassword: function() {
this.showPassword = !this.showPassword;
if (this.showPassword == false) {
this.tuBiao = "eye-filled";
} else {
this.tuBiao = "eye-slash-filled"
}
},
//登录按钮事件
loginclick() {
uniCloud.callFunction({
name: "Login-get",
data: {
username: this.Username,
password: this.password
},
success: (res) => {
console.log(res);
if (res.result.code == 200) {
uni.showToast({
title: '成功登录',
//显示持续时间为 1秒
duration: 1000
}),
//延时器
setTimeout(() => {
//跳转到首页列表
uni.switchTab({
url: '/pages/index/index'
})
// 把用户名存储到本地存储中
uni.setStorageSync("name", res.result.user.name)
}, 1000)
} else {
uni.showToast({
title: res.result.msg,
//将值设置为 success 或者直接不用写icon这个参数
icon: 'none',
//显示持续时间为 2秒
duration: 1000
})
}
}
})
},
//跳转到注册页面
logonClick() {
setTimeout(function() {
uni.navigateTo({
url: '/pages/Logon/Logon',
success() {
console.log('跳转成功');
},
fail(err) {
console.error('跳转失败', err);
}
});
}, 500);
}
}
}
</script>
<style lang="scss">
.imgs {
margin: 80px auto;
height: 300rpx;
width: 300rpx;
image {
height: 300rpx;
width: 300rpx;
}
}
.account {
display: flex;
width: 80%;
position: relative;
background-color: #f2f2f2;
border-radius: 20px;
padding: 8px;
align-items: center;
margin: 20px auto;
.line {
width: 4rpx;
height: 45rpx;
background-color: #818181;
top: 28rpx;
left: 100rpx;
}
}
.DengLu {
color: #ffffff;
background-color: #00d800;
}
.loGon {
margin: 10px auto;
float: right;
}
</style>
<template>
<view class="">
<!-- 图标开始 -->
<view class="imgs">
<image src="../../static/headphone-sound.png" mode=""></image>
</view>
<!-- 图标结束 -->
<!-- 输入框开始 -->
<view class="account">
<uni-icons type="contact" size="30"></uni-icons>
<view class="line">
</view>
<input type="账号" placeholder="请输入账号" maxlength="30" v-model="Username">
</view>
<!-- 密码 -->
<view class="account">
<uni-icons type="locked-filled" size="30"></uni-icons>
<view class="line">
</view>
<input v-model="password" class="uni-input" placeholder="请输入密码" :password="showPassword" />
<uni-icons :type="tuBiao" @click="changePassword" size="30"></uni-icons>
</view>
<!-- 输入框结束 -->
<!-- 登录按键开始 -->
<button @tap="loginclick" type="default" class="DengLu">登录</button>
<!-- 登录按键结束 -->
<!-- 跳转到注册页面 -->
<view class="loGon" @tap="logonClick">
<text>没账号？点击此处注册 </text>
</view>
<!-- 注册结束 -->
</view>
</template>
注册页代码
<template>
<!-- 注册 -->
<view class="logon">
<!-- 标识语 -->
<view class="title">
<text>欢迎新用户</text>
</view>
<!-- 标识语结束 -->
<!-- 输入框开始 -->
<view class="inputs">
<input class="input-1" type="姓名" placeholder="请输入你的姓名" v-model="name">
<input class="input-1" type="账号" placeholder="请输入你的账号" v-model="username">
<input class="input-1" type="密码" placeholder="请输入你的密码" v-model="password">
</view>
<!-- 输入款结束 -->
<!-- 注册按键开始 -->
<button @tap="logonClick" class="Zhuche">注册</button>
<!-- 注册按键结束 -->
</view>
</template><script>
export default {
data() {
return {
name: "",
username: "",
password: ""
}
},
methods: {
logonClick(){
uniCloud.callFunction({
name:"Logon-get",
data:{
name:this.name,
username:this.username,
password:this.password
},
success: (res) => {
console.log(res);
if(this.name=="")
{
uni.showToast({
title:"姓名没写",
icon:"none",
duration:2000
})
}
else if( this.username=="")
{
uni.showToast({
title:"账号没写",
icon:"none",
duration:2000
})
}
else if( this.password=="")
{
uni.showToast({
title:"密码没写",
icon:"none",
duration:2000
})
}
else
{
uni.showToast({
title:"注册成功",
duration:2000
})
//延时器
setTimeout(()=>{
//跳转到首页
uni.redirectTo({
url:"/pages/Login/Login"
},1000)
})
}
}
})
}
}
}
</script>
<style lang="scss">
.title {
font-size: 30px;
//字体加粗
font-weight: bold;
margin: 80px 0 80px 30px;
}
.inputs {
text-align: center;
margin: 20px auto;
// margin-top: 3%;
width: 80%;
.input-1 {
padding: 8px;
border-radius: 20px;
height: 40px;
background-color: #f2f2f2;
margin: 10px 0 40px;
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 15px;
}
}
.Zhuche{
width: 90%;
color: #ffffff;
background-color: #00d800;
}
</style>
登录页的效果
注册页的效果
2190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
