小程序配置文件.json（3）

最新推荐文章于 2023-02-22 15:03:47 发布

灵虚天

最新推荐文章于 2023-02-22 15:03:47 发布

阅读量104

点赞数

分类专栏：微信小程序文章标签： json 小程序

本文链接：https://blog.csdn.net/qq_42424228/article/details/120759460

版权

微信小程序专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了小程序全局配置文件app.json的各个字段，包括pages字段、window字段和tabBar配置，以及如何自定义小程序的启动页、导航栏、下拉刷新和底部tab栏。同时提到了页面配置文件page.json，可以对每个页面进行个性化设置，如导航栏样式和下拉刷新功能。此外，还提及了sitemap标签在发布阶段的作用。

摘要由CSDN通过智能技术生成

开放文档链接地址

全局配置文件 app.json

1.page 字段

//表明当前小程序有几个子页面，其内容就是pages内的页面的路径完全一致
  "pages":[					
  	"pages/first/first",	//第一个文件路径就是默认小程序打开的第一个页面，要修改打开的第一个页面，只需要把对应页面放到数组首位即可
    "pages/index/index",	//最后的文件名不能加后缀
    "pages/logs/logs",
    "pages/demo01/demo01"
    //直接在后面加一个路径名，然后保存代码，即可自动创建新的文件目录，不需要自己一个个新建
  ],

2.windows 字段

navigation：导航栏

//定义小程序所有页面的顶部背景颜色，文字颜色定义等
 "window":{
    "backgroundTextStyle":"light",				//下拉 loading 的样式，仅支持 dark / light，enablePullDownRefresh设为true才可以使用
    "navigationBarBackgroundColor": "#fff",		//导航栏背景颜色
    "navigationBarTitleText": "Weixin",			//导航栏标题文字内容
    "navigationBarTextStyle":"black"	，		//导航栏标题颜色，仅支持 black |white
    "enablePullDownRefresh":true，				//下拉刷新是否开启
    "backgroundColor": "#fdd3ff"				//下拉背景颜色

  },

在这里插入图片描述

3.tabbar标签

//如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），
//可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
"tabBar": {
   "list": [{						//tab 的列表
     "pagePath": "pagePath",		//点击当前tabbar将跳转到的页面路径（保存在pages中）
     "text": "text",				//tabbar的名称
     "iconPath": "iconPath",		//未选中状态的图标路径
     "selectedIconPath": "selectedIconPath"	//选中状态的图标路径
   }],
	"color": "#0094ff",				//未被选中时字体颜色
	"selectedColor": "#000000",		//选中时的字体颜色
 	"backgroundColor": "#ffffff"，	//下边bar的背景色
    "position": "top"，				//bar显示的位置，bottom|top，如果为top，图标就不会被显示
    
 }

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人中心",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    }
  ]
  },

效果如下：
在这里插入图片描述

4、sitemap标签

在发布阶段才会用到，暂不写

"sitemapLocation": "sitemap.json"

二、页面配置文件 page.json

可以进行的操作基本和app.json相同，可以对导航栏，下拉刷新等进行操作，一部分如下所示


navigationBarBackgroundColor	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitle	导航栏标题⽂字内容
backgroundColor	窗⼝的背景⾊
backgroundTextStyle	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	是否全局开启下拉刷新。详Page.onP见ullDownRefresh
onReachBottomDistance	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。详⻅Page.onReachBottom
disableScroll	设置为 true 则⻚⾯整体不能上下滚动