pages.json

这个文件只要是来配置页面信息的。可以观察刚刚我们运行起来的项目。


这个章节将会过一下pages.json。先上文档，其实无论是taro的还是uni-app的，基本上都一致，常规用法是Taro.xxx,Uni.xxx方法名基本上一致，当然配置文件也是，不然怎么兼容到小程序呢，所以这里我们只讲一遍。
uni-app-pages.json文档
taro的有点不同
taro文档
taro的pages是string的Array也就是这样

单个页面配置文档

我们从uni-app的讲起来，taro也一样，只是配置字段位置不同而已。

pages

这里主要是定义页面的。

主要关注style，文档位置
这里有很多，大家可以自己尝试我们来尝试几个。

style-navigationBarBackgroundColor

导航栏背景色

style-navigationBarTitleText

导航栏标题

style-navigationStyle

如果你想自定义导航栏，取消默认的。

设置了为custom后，默认导航栏会消失。页面内容从最顶部开始，这个时候就要处理安全区域，也就是避免被遮挡，在uni-app中，其实已经帮我们处理好了一些。这是注意事项

style-enablePullDownRefresh

下拉刷新

这个时候下拉内容，就会出现刷新状态

uni-app的页面生命周期里面有这个

后面我们做页面刷新会讲到，这里先扫盲。

注意事项

注意文档中标注的平台差异，有些平台不支持。

不同平台区分配置

如果你想不同的平台配置不同，当然可以，如下，微信小程序的。

新建页面

新建页面不需要自己手动创建文件夹什么的。右键pages文件夹

可以选择路径，模版，填名称。

globalStyle

这个和pages里面的style基本一致，只是这里是全局的。

tabBar

导航栏

文档

我们先找几个图标
阿里矢量图

随机找几个就行，下一个深色的，一个浅色的

图片丢到static目录下.

不要着急跟着敲，下面有代码。
selectedIconPath就是选中时的icon，
iconPath时没选中的时候的

其他配置还有很多，如position，默认是底部，配置这个会在顶部展示，
但是只支持微信小程序

其他的配置将会在使用的时候再讲，如分包。

代码

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","navigationBarBackgroundColor": "#007aff","navigationStyle":"custom","enablePullDownRefresh":true,"mp-weixin": {"navigationStyle":"default","navigationBarTitleText":"微信首页"}}},{"path" : "pages/mine/mine","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83","selectedColor": "#007aff","borderStyle": "black","backgroundColor": "#ffffff","position": "top","list": [{"pagePath": "pages/index/index","iconPath": "/static/home_no_sl.png","selectedIconPath": "/static/home.png","text": "首页"},{"pagePath": "pages/mine/mine","iconPath": "/static/home_no_sl.png","selectedIconPath": "/static/home.png","text": "我的"}]},"uniIdRouter": {}
}

manifest.json

这个配置，Hbuilder X中打开，他帮我们做成可视化的了。


我们在微信小程序配置

在源码视图中可以看到

在小程序的配置中也是可以看到的

如果有一些配置，没有在可视化配置看到，也可以在这里手动配置。
配置文档
比如你要跳转其他小程序，就要配置

如果你需要用户的一些授权，如位置授权，如手机号，或者视频聊天等等，需要配置permission

我们来做几个尝试

授权

授权一览
配置位置信息获取以及摄像头

其他的看文档即可。插件的话，后面讲使用插件会讲到。

app的配置，可视化配置已经挺全的了。

一般的开发，基本上配置不到太多，主要的还是业务的开发，这些不需要理解什么的，只要有这一些配置就行了。

web配置代理

vite.config.js

我们在开发h5的时候，会碰到跨域，这个时候需要配置代理。
在根目录下新建vite.config.js文件

import {defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';export default defineConfig({plugins: [uni()],server: {port: 5177,proxy: {'/api': {target: 'http://localhost:3000/',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},}
});

这里配置了/api会转发到localhost:3000,port的话，是启动的port，现在我们运行到浏览器，然后尝试下。这里我随便请求的。

可以看到响应

其他更多配置参考vite的配置项.