uni-app项目目录、文件作用介绍 及 开发规范

一、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) 规范

可参考：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>