自学uni-app （7）项目搭建的详细步骤、注意事项和遇到的问题

本文链接：https://blog.csdn.net/Sim_perfect/article/details/107894514

本文详细介绍了使用uni-app搭建多页面应用的步骤，包括需求分析、功能分析、页面和组件的创建与注册、基本布局配置、数据加载和事件处理。在注意事项中，强调了uni-app对原生微信小程序不支持Promise的封装，以及在实际操作中可能遇到的问题和解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为博主正在学习搭建，所有该篇文章持续更新中。。。

步骤

一、需求分析

二、功能分析

三、多页面应用搭建

1.创建新页面

在pages下的一个同名文件夹内创建新的页面文件
文件目录如下

┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─other
│     └─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json

2.注册新页面

如果想要显示新页面，我们需要在pages.json中进行页面的注册
注：

pages是一个数组
pages中第一项表示应用启动页（在没设置页面跳转之前，我们都把新页面放在第一项，这样才能在应用启动时显示新页面）


"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
		{
   
   
			"path": "pages/index/index",
			"style": {
   
   
				"navigationBarTitleText": "uni-app"
			} 
		}，
		{
   
   
		    "path" : "pages/other",
		    "style" : {
   
   
				"navigationBarTitleText": "新页面"
				
			}
		}
	    
    ]

四、添加组件

1.添加组件

在component文件夹下创建一个组件文件phoneComp


<template>
	<view>
		<text>这是一个组件</text>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				
			};
		}
	}
</script>

<style>

</style>

2.导入组件

在index.vue中的script标签中导入创建的组件文件

<script>
	import textCom from "@/components/phoneComp";
	
</script>

3.注册组件

将导入的组件注册到页面中

<script>
	import phoneCompfrom "@/components/phoneComp";
	export default {
    
    
		components:{
    
    
			//注册组件   name:value  当name=value时可以简写成  name  ， 全写为 phoneComp:phoneComp
			phoneComp
		}
</script>

4.使用注册的组件

通过标签的形式来使用组件

<template>
	<view>
		<phoneComp></phoneComp> 
	</view>
</template>

五、基本布局

全局配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

配置项列表

属性	类型	必填	描述	平台兼容
globalStyle	Object	否