教程四:app.json配置之导航栏

首先在这里补充一点,上节课教程里面有一点忘记说了,就是当你打开调试器的时候,你会发现,有一些报错,那么我们怎么来解决这个问题呢?

消除错误提示:在app.js里面加上一段代码:App({onlaunch:function(){}}),这样就可以消除错误提示。具体怎么的,留待以后详细讲解。

现在正式开始讲解导航栏的配置。主要就是app.json里面的其他一些配置项。上节课,我们已经了解了,Pages配置项,它是用来注册我们所有的页面的的。那么接下来我们来介绍其他一些配置项。那么,这些配置项我们在哪里能够看得呢?毫无疑问,肯定是官方的开发文档。在小程序中如何快速的打开官方的开发文档呢?点击页面最上方的菜单栏,在“微信开发工具”中选择“开发者文档”,这时候就直接进入到了我们的开发者文档中,那么我们现在需要学习的是app.json的一些配置项。

首先,点击上方的“框架”,点击完以后,左侧有一个侧边栏,选择“配置”,在配置文档中,描述了全部的app.json的配置项的意义。“配置”这一小节中,给出了一些aap.json的示例代码。

"Pages": {    "pages/logs/logs",    "pages/infex/index"  },  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "清云小程序",    "navigationBarTextStyle":"black"  },  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首页"    }, {      "pagePath": "pages/logs/logs",      "text": "日志"    }]  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug":true  }

目前的微信版本主要是这5个配置项,当然,不排除以后的微信版本中会增加一些其他的配置项。这5个配置项是针对现在的微信版本来说的。

我们现在来看看这些配置项的各个意义。其中前3个,是大家必须要熟悉并且掌握的。因为前3个配置项对我们小程序开发来说,是我们经常使用并且要经常去更改的。而后面2个,大家一般只要采用默认值就可以了。

1、"Pages"我们已经知道它是用来注册页面中的页面路径的,具体的大家可以自己再去看看里面的文档内容。2、”window“配置项,这是我们要着重讲解的。”window“是用来设置小程序的状态栏、导航栏、标题、窗口背景色。

其中,前4个以“navigation”开头的是在设置我们的导航条,在我们的模拟器里面可以看到,有一块黑色的区域,这就是我们的导航条(这里看到的是我们小程序默认的导航条样式):

1-1-6.jpg

其中我们可是通过更改前4个以“navigation”开头的属性来更改我们的导航条,以到达我们需要的效果。其中需要注意的是,“navigationBarTextStyle”属性仅支持”black“或者”white“;“navigationStyle”在以前老版的小程序里面是没有的,在新的小程序里面把它加上了的。“navigationStyle”属性仅支持”default“或者”custom“,其中“custom”可以让我们自定义导航条的样式,当你设置成 “navigationBarTextStyle”:“custom",那么导航条只保留右上角的胶囊状的按钮,但是一般我们都是采用”default“,所以大家也没有必要去设置“navigationStyle”这一选项了。



版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/61.html