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

页面配置文件pages.json和小程序配置

news 2025/6/18 11:03:59

页面配置文件pages.json和小程序配置

pages.json
- pages
- - style-navigationBarBackgroundColor
  - style-navigationBarTitleText
  - style-navigationStyle
  - style-enablePullDownRefresh
  - 注意事项
  - 不同平台区分配置
  - 新建页面
- globalStyle
- tabBar
- - 代码
manifest.json
- 授权
- web配置代理

pages.json

这个文件只要是来配置页面信息的。可以观察刚刚我们运行起来的项目。
在这里插入图片描述

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

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

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/, ''),},},}
});