好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

微信小程序开发初学:全局配置及页面配置

(1)backgroundColor:窗口背景颜色,通常被pages页面覆盖,需要下拉刷新才能显示

(2)backgroundColorTop / backgroundColorBottom:顶部/底部窗口颜色,两者仅IOS支持

(3)backgroundTextStyle:下拉loading图标的样式,仅支持dark和light两种属性值

"window":{/*要注意语法*/

    "navigationBarBackgroundColor": "#000000",

    /*导航栏背景颜色,仅支持十六进制颜色表示*/

    "navigationBarTitleText": "LZH",

    /*导航栏标题文字内容*/

    "navigationBarTextStyle":"white",

    /*导航栏标题文字样式,仅支持black和white*/

    "enablePullDownRefresh": true,

    /*允许下拉刷新(首页一般不用)*/

    "backgroundColor": "#000",

    /*窗口背景颜色,通常被pages页面覆盖,需要下拉刷新才能显示*/

    "backgroundTextStyle":"light",

    /*下拉loading图标的样式*/

  },

tabBar

菜单栏:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性:list

菜单列表,类型为Array数组类型,存放 tab

list具有的属性

(1)pagePath:页面路径,必须在pages文件夹中先定义,必填

(2)text:文字内容,必填

(3)iconPath:图标路径,不支持网络路径,position 为 top 时不显示

(4)selectedIconPath:选中时的图标,不支持网络路径,position 为 top 时不显示

Color

未选中的tab文字颜色,仅支持十六进制颜色表示

selecteColor

选中的tab文字颜色,仅支持十六进制颜色表示

backgroudColor

tab背景颜色,仅支持十六进制颜色表示

borderStyle

tabBar上边框颜色,仅支持white和black两种

position

tabBar位置,仅支持top(顶部)和bottom(底部)

"tabBar": {/*要注意语法*/

    "color": "#c30",

    /*未选中的tab文字颜色*/

    "selectedColor":"#0ff",

    /*选中的tab文字颜色*/

    "backgroundColor": "#ccc",

    /*tab背景颜色,仅支持十六进制颜色表示*/

    "borderStyle": "white",

    /*tabBar上边框颜色,仅支持white和black两种*/    

    "list": [

      {

        "pagePath": "pages/index/index",        /*页面路径*/

        "iconPath": "/image/home.png",          /*图标路径*/

        "selectedIconPath": "/image/home-h.png",/*选中时的图标*/

        "text": "首页"                          /*文字内容*/

      },{

        "pagePath": "pages/button/button",

        "iconPath": "image/user.png",

        "selectedIconPath": "/image/user-h.png",

        "text": "按钮案例"

      },{

        "pagePath": "pages/input/input",

        "iconPath": "/image/setting.png",

        "selectedIconPath": "/image/setting-h.png",

        "text": "inputDemo"

      }

    ]

  },

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

配置项属性与app.json的window中的属性相同

页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

如以下代码:

/*app.json文件*/

"window":{

   "navigationBarBackground":"#000"

}

/*index.json文件*/

{

   "navigationBarBackground":"#ccc"

}


查看更多关于微信小程序开发初学:全局配置及页面配置的详细内容...

  阅读:29次