一、初始化项目

1.1 初始化index.vue

打开/index/index.vue 将内容替换为以下内容

<template><view class="content">hello uniapp</view>
</template><script>export default {data() {return {}},onLoad() {},methods: {}}
</script><style></style>

1.2 删除无用文件

删除static下的所有文件。

1.3 初始化后的目录结果如下

二、文件目录分析

2.1 核心文件

文件/文件夹	作用
App.vue	UniApp 的​​根组件​​，所有页面共享的全局样式、逻辑（如登录状态管理）在这里定义。
​​main.js	应用入口文件，初始化 Vue 实例并挂载到全局，可在此引入第三方库（如 Vuex、自定义插件）
​​index.html	Web 平台的 HTML 入口模板，通常无需修改，H5 打包时会自动注入资源引用。
​​manifest.json	​​应用配置清单​​，定义应用名称、图标、启动页、SDK 配置（如微信小程序 AppID）等跨平台参数。
​​pages.json	​​路由与页面配置​​，注册页面路径、导航栏样式、TabBar 等，类似小程序 app.json。
​​uni.scss	全局 SCSS 变量文件，定义颜色、间距等复用样式，可在所有组件中通过 @import引用。

2.2 关键文件夹​

文件夹	作用
​​pages	存放所有​​页面组件​​，每个子文件夹（如 index/）对应一个页面，包含 .vue文件（组件）和可选的 .js/.json配置文件。
static	静态资源目录​​，存放图片、字体、JSON 数据等，文件会原样拷贝到最终产物（不经过 webpack 编译）。
​​ unpackage	​​构建输出目录​​（由 HBuilderX 自动生成），包含各平台（如小程序、H5）的编译后代码。子目录 dist/dev/是开发环境产物，dist/build/是生产环境产物。
​​.hbuilderx	HBuilderX IDE 的​​项目配置缓存​​，包含编辑器状态、插件数据等，删除后重启 IDE 会重建。

2.3 其他文件

文件	作用
​​uni.promisify.adaptor.js	UniApp 的 ​​API Promise 化适配器​​，将回调风格的 API（如 uni.request）转为 Promise 形式，需在 main.js中引入。

2.4 注意事项​​

​​不要随意删除的文件​​：

• manifest.json、pages.json、App.vue、main.js是项目运行必需文件。
• unpackage/dist/是构建结果，删除后重新运行 npm run dev可自动生成。

​​可安全删除的目录​​：

• .hbuilderx：IDE 临时配置，但删除后可能丢失个性化设置。
• unpackage：构建产物，但需确保已备份必要配置（如微信小程序的 project.config.json）。

三、创建页面(pages)

3.1 创建home页面

1. 选择pages 右击选择新建页面
   
2. 填写创建名称。注意不同版本可能不一样，只要勾选了一下选项就行。
   
3. 结果如下
   

3.2 创建其他页面

继续上述步骤，再分别新建short,save,cart,my页面，意思为短视频，省钱，购物车，我的。

结果如下

3.3 查看pages.json

使用Shift+Alt+F快捷键整理样式，可以发现多了一下页面

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}, {"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

3.4 删除index页面和pages.json的配置

删除pages下面的index页面

删除后的pages.json的文件内容如下

{"pages": [{"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

四、配置导航(pages.json)

4.1 寻找图标并添加到项目

我们可以给上面的五个页面的每个页面都找两个相应的图标，一个选中的图标一个未选中的图标，可以去阿里巴巴矢量库寻找。可以参考我的图标。

讲这些图标放到tab_icons文件夹中然后放到uni-app项目中的static文件夹下面

4.2 在pages.json中配置tabBar节点

{"pages": [{"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#9a9a9a", // 未选中时文字的演示"selectedColor": "#FF2325", // 选中时文字的颜色"list": [{"pagePath": "pages/home/home", // 路径"iconPath": "static/tab_icons/home.png",// 未选中时的图标"selectedIconPath": "static/tab_icons/home-active.png",//选中时的图标"text": "首页"// 文本},{"pagePath": "pages/short/short","iconPath": "static/tab_icons/short-video.png","selectedIconPath": "static/tab_icons/short-video-active.png","text": "短视频"},{"pagePath": "pages/save/save","iconPath": "static/tab_icons/save-money.png","selectedIconPath": "static/tab_icons/save-money-active.png","text": "超级会场"},{"pagePath": "pages/cart/cart","iconPath": "static/tab_icons/shop.png","selectedIconPath": "static/tab_icons/shop-active.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "static/tab_icons/smile.png","selectedIconPath": "static/tab_icons/smile-active.png","text": "我的"}]},"uniIdRouter": {}
}

五、配置pages.json中的globalStyle节点

删除每个pages节点下面的"navigationBarTitleText": "",配置。
使用globalStyle全局节点的"navigationBarTitleText": "仿京东",

{"pages": [{"path": "pages/home/home","style": {"enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "white",// "navigationBarTitleText": "仿京东",//文字"navigationBarBackgroundColor": "#FF2525",// 导航栏背景颜色"backgroundColor": "#F8F8F8"// 下拉显示出来的窗口的背景色},"tabBar": {"color": "#9a9a9a", // 未选中时文字的演示"selectedColor": "#FF2325", // 选中时文字的颜色"list": [{"pagePath": "pages/home/home","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png","text": "首页"},{"pagePath": "pages/short/short","iconPath": "static/tab_icons/short-video.png","selectedIconPath": "static/tab_icons/short-video-active.png","text": "短视频"},{"pagePath": "pages/save/save","iconPath": "static/tab_icons/save-money.png","selectedIconPath": "static/tab_icons/save-money-active.png","text": "超级会场"},{"pagePath": "pages/cart/cart","iconPath": "static/tab_icons/shop.png","selectedIconPath": "static/tab_icons/shop-active.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "static/tab_icons/smile.png","selectedIconPath": "static/tab_icons/smile-active.png","text": "我的"}]},"uniIdRouter": {}
}

运行结果如下

六、关于pages.json配置可参考官网

https://uniapp.dcloud.net.cn/collocation/pages.html