小程序的配置文件(全局配置和页面配置)

一、小程序窗口的组成部分

image.png

二、全局配置

小程序全局配置官网

image.png

2.1. window 节点常用的配置项

image.png

2.2. 举例说明

2.2.1. 设置导航栏的标题

navigationBarTitleText

image.png

2.2.2. 设置导航栏的背景色

navigationBarBackgroundColor

image.png

2.2.3. 设置导航栏的标题颜色

navigationBarTextStyle

image.png

2.2.4. 全局开启下拉刷新功能

enablePullDownRefresh

image.png

2.2.5. 设置下拉刷新时窗口的背景色

backgroundColor

image.png

2.2.6. 设置下拉刷新时 loading 的样式

backgroundTextStyle

image.png

2.2.7. 设置上拉触底的距离

onReachBottomDistance

image.png

2.3. tabBar

image.png

image.png

2.3.1. tabBar的6个组成部分

image.png

image.png

2.3.2. tabBar节点的配置项

image.png

2.3.3. 每个tab 项的配置选项

image.png

2.3.4. 示例

   "pages": [
        "pages/pickFriend/pickFriend",
        "pages/leftNote/leftNote",
        "pages/pickedNote/pickedNote",
        "pages/index/index"
    ],
    //...省略
    "tabBar": {
        "selectedColor": "#0052D9",
        "color": "#666666",
        "borderStyle": "white",
        "list": [{
            "pagePath": "pages/pickFriend/pickFriend",
            "text": "抽个对象",
            "iconPath": "/images/tabbar/tab1-inactive.png",
            "selectedIconPath": "/images/tabbar/tab1-active.png"
        }, {
            "pagePath": "pages/leftNote/leftNote",
            "text": "留的纸条",
            "iconPath": "/images/tabbar/tab2-inactive.png",
            "selectedIconPath": "/images/tabbar/tab2-active.png"
        }, {
            "pagePath": "pages/pickedNote/pickedNote",
            "text": "抽中纸条",
            "iconPath": "/images/tabbar/tab3-inactive.png",
            "selectedIconPath": "/images/tabbar/tab3-active.png"
        }]
    },

三、页面配置

小程序页面配置官网

3.1. 页面配置文件的作用

小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置

3.2. 页面配置和全局配置的关系

image.png

3.3. 页面配置中常用的配置项

支持对单个页面进行配置,可以在页面对应的.json 文件来对本页面的表现进行配置,页面中配置项在当前页面会覆盖 app.json 中相同的配置项,但这里不需要额外指定 window 字段,文件内容为一个 JSON 对象,具有如下字段:

image.png

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
  • 22
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值