微信小程序_9,视图与逻辑

小程序中实现页面导航的两种方式:

1.声明式导航:

• 在页面上声明一个<navigatoe>导航组件
• 通过点击<navigator>组件实现页面跳转

2.编程式导航:

• 调用小程序的导航API,实现页面跳转

导航到tabBar页面:

tabBar页面指的是被配置为tabBar的页面 在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

• url表示要跳转的页面地址,必须以/开头
• open-type表示跳转的方式,必须以switchTab 实例代码如下:

  <navigator url="/pages/message/message" open-type="switchTab">导航到message循环页</navigator>

• 注意,这里tabBar配置的页面是需要在app.json中的tabBar节点下配置了的页面才会进行跳转!

导航到非tabBar页面:

通过非声明式导航

非tabBar页面指的是没有被配置为tabBar的页面 在使用<navigator>组件跳转到非tabBar页面时,则需要指定url属性和open-type属性,其中:

• url表示要跳转的页面地址,必须以/开头
• open-type表示跳转的方式,必须为navigator

实例代码如下:

<navigator url="/pages/for/for" open-type="navigate">导航到for循环页</navigator>

这里的url属性只需要在app.json的pages节点中配置了即可

注意:这里为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略

后退导航:

如果要后退到上一页面或是多级页面,则需要指定open-type和delta属性,其中:

• open-type的值必须是navigateBack,表示要进行后退导航
• delta的值必须是数字,表示要进行后退的导航 示例代码如下:

  <navigator open-type="navigateBack" delta="-1">
    返回上一级
  </navigator>

注意:为了简便,如果只是后退到上一页面,则可以省略delta属性,因为其默认值就是1

导航到tabBar页面(编程式导航)

调用wx.switchTab(Object object)方法,可以跳转到tabBar页面,其中Object参数对象的属性列表如下:

示例代码如下: WXML:

<view>
  导航到tabBar页面(编程式导航)
  <button bindtap="gotoMessage">
    跳转到消息页面
  </button>
</view>

.js:

  gotoMessage() {
    wx.switchTab({
      url: '/pages/for/for',
    })
  },

导航到非tabBar页面(编程式导航)

调用wx.navigateTo(Object object)方法,可以跳转到非tabBar的页面,其中Object参数对象的属性列表如下:

示例代码: WXML:

<text>
  导航到非tabBar页面(编程式导航)
</text>
<button bindtap="gotoIf">
  跳转到If页面
</button>

.js:

  gotoIf() {
    wx.navigateTo({
      url: '/pages/if/if',
    })
  },

注意这里的url不能是tabBar中的配置页面

编程式导航实现后退:

调用wx.navigateBack(Object object)方法,可以返回上一级或多级页面,其中Object参数对象可选的属性列表如下:

示例代码: WXML:

  <text>
    返回上一级页面(编程式导航)
  </text>
  <button type="primary" bindtap="backTo">
    返回上一级
  </button>

.js:

  backTo() {
    wx.navigateBack({
      delta: 1,
    })
  },

导航传参

声明式导航传参

navigator组件的url属性用来指定将要跳转的页面路径,同时,路径后面还可以携带参数:

• 参数与路径之间使用?分割
• 参数键与参数值用=相连
• 不同参数用&分隔

非编程式导航传递参数,例如:

  <navigator url="/pages/link/link?name=zs&age=21">
    跳转到link页面
  </navigator>

编程式导航传参:

调用wx.navigateTo(Obejct object)方法跳转页面时,也可以携带参数,代码示例如下:

WXML:

  <text>
    使用编程式导航传参:
  </text>
  <button bindtap="toLink">点击跳转并传参给link页面</button>

.js:

  toLink() {
    wx.navigateTo({
      url: '/pages/link/link?name=zs&age=22',
    })
  },

在onload中如何接受导航参数:

通过声明式导航传参或编程式导航传参传递的参数,可以直接在onload事件中直接获取到,示例代码如下:

跳转的目标页面的.js文件:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
  },

数据都会存放在options中:

一般使用时,在data中创建一个存放数据的变量,然后回去到数据之后,使用setData赋值给存放数据的变量,如:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      query: options
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      query: options
    })
  },