微信小程序四（全局配置和页面配置页面跳转）

twx952024-04-22 20:43

全局配置：

小程序根目录下的 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>