全局配置:
小程序根目录下的 app.json
文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
tabBar设置:最少两个最多5个
"tabBar": { "list":[{ "pagePath": "pages/04/04", "text": "04页面" },{ "pagePath": "pages/03/03", "text": "03页面" },{ "pagePath": "pages/02/02", "text": "02页面" },{ "pagePath": "pages/01/01", "text": "01页面" }] }
改变头部样式
开始的样式:
将背景颜色改成黑色,字体颜色改成白色,标题改成微信
"window": { "navigationBarTextStyle": "white", "navigationBarTitleText": "微信", "navigationBarBackgroundColor": "#000" },
navigationBarTextStyle:标题字体颜色,只支持两种颜色,黑色(black)和白色(white),默认为黑色
navigationBarTitleText:标题,任意修改
navigationBarBackgroundColor:背景颜色,只支持16进制设置颜色
修改后:
常用的属性:
enablePullDownRefresh:是否开启全局下拉,默认为false不下拉,true为下拉
页面配置:在页面的json文件中配置样式
将背景颜色改成#AA0000这种颜色,字体颜色改成白色,标题改成当前其他
开始样式:
改变后样式:
"navigationBarBackgroundColor": "#AA0000", "navigationBarTitleText": "页面配置"
当全局配置和页面配置中有相同的配置,以页面配置为主,也就是页面配置优先级大于全局配置
跳转页面:
第一种方式:wxml页面使用navigator标签
<navigator url="/pages/index/index" open-type="navigate">标签普通页面跳转</navigator>
url:当前小程序内的跳转链接
open-type:设置跳转普通页面还是tabBar页面,默认值为navigate,跳转普通页面,值为switchTab,跳转tabBar页面
第二种方式:js页面书写代码
普通页面跳转:定义一个方法
putong(){ wx.navigateTo({ url:"/pages/index/index" }) }
wxml页面点击跳转
<button bindtap="putong">页面跳转</button>
tabBar页面跳转:也是定义一个方法
tarBar(){ wx.switchTab({ url:"/pages/01/01" }) }
wxml页面点击跳转
<button bindtap="tarBar">tarBar页面跳转</button>