微信小程序开发学习笔记——2.7app.json全局及页面配置

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接： 

https://www.bilibili.com/video/BV19G4y1K74d?p=10&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、新建页面

在app.json文件的page数组中添加一个路径，最后一行没有逗号。

 "pages/demo/demo"

 

会自动生成demo文件夹,.js一般是逻辑文件，.json是配置项，.wxss是样式。

二、页面加载顺序修改方法

1、选中"pages/logs/logs"，Alt+键盘上下键，可以移动他的前后顺序

  "pages": [

    "pages/demo/demo",

    "pages/index/index",

    "pages/logs/logs"

  ],

 2、点击普通编译，添加编译模式，修改启动页面，点击确定，最后再点击三角形选择要显示的页面即可。

三、全局配置

1、介绍

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。

2、例子

app.json文件内容

{
  "pages": [
    "pages/demo/demo",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序学习项目",
    "navigationBarBackgroundColor": "#00B26A"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

但是发现，只有日志这个页面的标题是“日志”，其他两个页面都和全局配置中默认窗口表现的标题“小程序学习项目”一致。若想要修改这个首页的标题以及标题的底色，则需要进行页面配置，如下。

四、页面配置

1、介绍

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

2、例子

demo.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "测试页面",
  "navigationBarBackgroundColor": "#96CDCD"
}

index.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "首页"
}

log.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "查看启动日志"
}