当前位置：首页 > news >正文

uni-app 初入门

news 2026/5/3 23:43:24

uni-app 初入门

项目目录结构说明

1. `pages/` 文件夹

作用：存放所有页面文件，是开发的核心目录。
每个页面都是一个 .vue 文件，比如 pages/index/index.vue 就是首页。
页面的路由、路径都在 pages.json 里配置。

2. `static/` 文件夹

作用：存放静态资源，比如图片、字体、图标等。
放在这里的文件不会被编译处理，直接原封不动打包到各个端。
示例：static/logo.png 可以直接在代码里用 /static/logo.png 引用。

核心文件说明

`.gitignore`

作用：Git 的忽略配置文件。
用来告诉 Git 哪些文件/文件夹不需要提交到代码仓库（比如 node_modules、编译产物等）。
不用修改，保持默认即可。

`App.vue`

作用：uni-app 的根组件，相当于项目的入口页面。
在这里可以写全局的样式、生命周期钩子（比如应用启动时执行的代码）。
注意：它没有 <template> 里的页面内容，主要用来配置全局逻辑和样式。

`index.html`

作用：H5 端的入口 HTML 文件。
其他端（小程序/APP）不会用到这个文件。
一般不用修改，除非你要给 H5 加全局的 JS/CSS 或配置。

`main.js`

作用：项目的入口 JS 文件。
用来初始化 Vue 实例、注册全局组件、挂载插件等。
uni-app 会自动帮你处理大部分配置，新手一般不用修改。

`manifest.json`

作用：项目的全局配置文件，相当于项目的“身份证”。
在这里配置应用名称、图标、启动页、权限、各端（小程序/APP/H5）的特有配置。
比如修改应用名称、配置微信小程序的 AppID 都在这里。

`pages.json`

作用：配置页面路由、导航栏、tabBar 等，是 uni-app 最重要的配置文件之一。
你新增的页面必须在这里注册才能访问。
可以配置：页面路径、窗口表现（标题、背景色）、底部 tab 栏、全局样式等。

`uni.promisify.adaptor.js`

作用：适配文件，把 uni-app 的回调风格 API 转成 Promise 风格。
用来支持 async/await 语法，比如 await uni.request()。
不用修改，保持默认即可。

`uni.scss`

作用：全局 SCSS 变量文件。
在这里定义的变量（比如颜色、字体大小），所有页面的样式里都能直接用。
比如定义 $primary-color: #007aff;，页面里写 color: $primary-color; 就能生效。

新手重点关注

写页面就去 pages/ 文件夹里建文件
配置路由和导航栏就改 pages.json
改应用信息、图标、权限就改 manifest.json
全局样式和变量就写在 uni.scss

开始动手实践~

创建第一个界面：

鼠标右击 pages文件夹 --> 新建页面 demo
demo 内复制代码如下

<template><!-- 整个页面最外层必须是 view --><view class="page"><!-- 标题 --><text class="title">我是第一个 uni-app 页面</text><!-- 按钮 --><button class="btn" @click="showMessage">点我弹出提示</button><!-- 图片 --><image class="img" src="/static/logo.png"></image></view>
</template><script setup>
// Vue3 语法，最简单写法
const showMessage = () => {// uni-app 自带提示框uni.showToast({title: '成功运行啦！',icon: 'success'})
}
</script><style scoped>
/* 页面样式 */
.page {display: flex;flex-direction: column;align-items: center;padding: 100rpx 0;
}.title {font-size: 36rpx;color: #333;margin-bottom: 40rpx;
}.btn {width: 300rpx;margin-bottom: 40rpx;
}.img {width: 200rpx;height: 200rpx;
}
</style>

配置启动页面 pages.json

pages.json 里的 pages 数组，顺序决定了页面的优先级，第一个就是启动页。

"pages": [{"path": "pages/demo/demo","style": {"navigationBarTitleText": "我的第一个页面"}},{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}
]

运行成功

实现页面跳转的功能

<template><view class="page"><text class="title">我是第一个 uni-app 页面</text><!-- 第一个按钮：默认样式 --><button class="btn1" @click="showMessage">点我弹出提示</button><!-- 第二个按钮：单独好看样式 --><button class="btn2" @click="goToIndex">点我跳转到 index 页面</button><image class="img" src="/static/logo.png"></image></view>
</template><script setup>
const showMessage = () => {uni.showToast({title: '成功运行啦！',icon: 'success'})
}const goToIndex = () => {uni.navigateTo({url: '/pages/index/index'})
}
</script><style scoped>
.page {display: flex;flex-direction: column;align-items: center;padding: 100rpx 0;
}.title {font-size: 36rpx;color: #333;margin-bottom: 40rpx;
}/* 第一个按钮 普通样式 */
.btn1 {width: 300rpx;margin-bottom: 40rpx;
}/* 第二个按钮 好看自定义样式 */
.btn2 {width: 600rpx;height: 80rpx;line-height: 80rpx;background: #1677ff;color: #fff;border-radius: 40rpx;border: none;margin-bottom: 60rpx;
}.img {width: 200rpx;height: 200rpx;margin-top: 30rpx;
}
</style>

<template> → 页面结构

<script setup> → 页面逻辑

<style scoped> → 页面样式