微信小程序 页面配置

Posted 2023-04-19

参考技术A 参考： 微信官方文档

页面配置写在每个页面的.json文件里，全局配置写在app.json文件里。若二者发生冲突，以页面配置的属性为准。
其中页面里的index.json如下：

这个属性的值为十六进制的颜色类型，默认为#000000。
#后跟六个十六进制字符（从0到9和abcdef）。
上面的#000000可以简写为#000，#ff0000可以简写为#f00

注意到不仅导航栏标题的颜色改变了，连上方的时间和电量的颜色也改变了。

仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。

即省略了导航栏标题，页面占据导航栏的位置，之前设置的导航栏背景颜色也失效了。

默认值为#ffffff（白色）

指的是下拉刷新时拉下来部分的背景颜色，需要先打开下拉刷新"enablePullDownRefresh":true，再下拉才能看见。

默认为dark

对比一下，发现改变的是刷新时三个点的颜色，选dark时可以看到三个点轮流改变黑白的刷新动画，而选择light时动画就不明显了。

默认为 "enablePullDownRefresh":false
false改为true后可以像上面那样进行下拉刷新了
注意这里的值为boolean类型，不是字符串，不要加引号。

支持 auto / portrait / landscape[自动(旋转屏幕)/垂直(默认)/水平]

未完待续...

微信小程序全局/页面配置

常用全局配置

app.json

entryPagePath:主页面

pages:页面路由

如果没有设置entryPagePath，那么显示的第一个页面就取自于第一个路径。

window:窗口设置（跟页面配置中大部分是一样的配置项，只不过是设置全局）

.
.
.
此处省略三万字
.
.
.
tabBar:底部的tab导航

list是核心的设置，是一个数组，最多五个导航，最少两个；

list里的pagePath路径必须先在pages里定义，定以后才能使用；

networkTimeout 设置网络超时时间 默认6秒

sitemapLocation 指明 sitemap.json 的位置

默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

常用页面配置

pages/path/index.json

配置项

navigationBarBackgroundColor 用于设置导航栏背景颜色

仅支持#000000进制颜色

navigationBarTitleText 设置导航栏文字内容

"navigationBarTitleText": "WeiXin",

navigationBarTextStyle 用于设置导航栏字体颜色

仅支持black/white俩种颜色

navigationStyle 导航栏样式

default 默认样式 custom 自定义导航栏

enablePullDownRefresh 是否开启当前页面下拉刷新

默认false如果要开启改成true

backgroundTextStyle 下拉 loading 的样式

仅支持 dark / light

window

重写，覆盖全局的window配置，让当前页面拥有自己的窗口样式。

usingComponents

引入子组件的时候，用于挂载的；

相当于vue里的components；