一、uni-app 小程序项目目录及文件作用介绍
目录:
1---pages :所有的页面存放目录
2---static: 静态资源目录,例如图片等
3---uni_modules:是uni-app的插件模块化规范(HBuilderX 3.1.0+支持),通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装,用于嵌入到uni-app项目中使用,也支持直接封装为项目模板。
4---unpackage 就是打包目录,在这里有各个平台的打包文件
文件:
1---App.vue:是我们的根组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。
2---index.html:基础模板入口文件
3---main.js是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。
4---manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。
5---pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
6---uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格, uni.scss文件里预置了一批scss变量预置。
二、Vue 单文件组件 (SFC) 规范
<template> </template>里写写页面UI
<template>
//<template> 下只能且必须有一个根 <view> 组件。
<view >
</view>
</template>
<script> </script>里写一些JS的业务流程代码
<script>
//写一些js业务流程代码
export default{
//data写数据
data(){
return{
userData:{
phone:'',
pwd:''
},
}
},
//methods:里面写功能 方法
methods:{
//登录按钮点击事件
dologin(){
//console.log("我被点击啦!!!");
//console.log(this.userData.phone);
//console.log(this.userData.pwd);
uni.request({
url: '接口地址'
success: (res) => {//请求成功(res参数)
console.log(res.data);
if(res.data.code == 200){
//登录成功
uni.redirectTo({//关闭当前页面跳转URL:页面
url:'../main/mian'
});
}else {
this.open() //登录失败
}
}
});
}
}
}
</script>
<style> </style>里写css样式
对应引用样式表class="input_str"
<style>
.input_str{
border: 1px solid #000000;
border-radius: 5rpx;
height: 30rpx;
padding: 10rpx;
margin-bottom: 15rpx;
}
</style>