小程序页面链接

小程序里面的链接使用navigator组件(其有三个重要属性 url, open-type, hover-class)

在html中使用a标签, a标签可以链接到网络中的任何地址

而小程序中navigator只能应用于当前小程序内的链接跳转

<navigator url="http://www.baidu.com">跳转A</navigator>

<navigator url='test/t'>跳转B</navigator>

第一个是无效的

第二个能正确跳转, 需要注意的是: url中的页面不能是tabBar(底部菜单)中的页面

但是如果open-type属性的值为switchTab, 则可以跳转到tabBar中的页面

open-type属性取值:

navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0
exit	退出小程序，target="miniProgram"时生效	2.1.0

open-type属性的值默认为navigator, 跳转后, 可以从当前页面返回上级页面(左上角有一个返回按钮)

open-type属性的值为redirect属性, 打开新页面时, 但会关闭原页面(即不能从 当前页面 返回到 上级页面)

<navigator open-type='redirect' url='test/t'>跳转</navigator>

注意: url中的页面不能加上后缀, 如上面的'test/t' 表示的是test下面的t.wxml页面 (不能写成:test/t.wxml)

在页面跳转时可以传递参数(不要写成这样: name="张三", 应写成如下:)

<navigator  url='test/t?id=111&name=张三'>跳转</navigator>

示例:

<navigator  url='test/t?id=111&name=张三' hover-class='hoverClass'>跳转</navigator>    <!--链接1-->
<navigator  url='test/t?id=123&name=小明'>跳转</navigator>    <!--链接2-->

Page({
  data: {},
  onLoad: function(datas) {
    console.log(datas);
  }
})

如果点击链接1, 则datas的值是{id: "111", name: "张三"}, 点击链接2, 则datas的值是{id: "123", name: "小明"}

wx.navigateTo

此Api也可以完成页面跳转, 与navigator(open-type='navigator')相同

<button size='mini' bindtap="navigator">跳转</button>

navigator : function() {
    wx.navigateTo({
      url: 'test/t?id=100&user=xiaoming',
      success : function(e) {
        console.log(e.errMsg);
      }
    })
  }

wx.redirectTo

此Api也也可以完成页面跳转, 与navigator(open-type='redirect')相同, 操作与上相同

wx.navigateBack

此Api用于返回, 从当前页面返回到上级页面(根据如下参数)

Page({
  data: {

  },
  back : function() {
    wx.navigateBack({
      delta : 1            // 值为1, 则是返回上一级, 值为2就返回上两级...
    })
  }
})

如果delta的值为1, 则可以不写dellta属性: wx.navigateBack({})

如果delta的值超过了其能返回的总级数, 则会返回首页

 

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面(跳转到tabBar页面后, 不能返回, 相当open-type='switchTab'和'redirect'两个值的效果)。
• reLaunch 可以打开任意页面。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

 

hover-class

是点上去后的样式(点击态样式), 在样式文件中可设置其表现(等同于一个class的值)

hover-class的实现过程是: 当点击后, hover-class的值会添加进class的值

比如hover-class='active' , class='static', 当点击这个navigator组件时, class的值就会变为class='static active'两个值

在样式文件中, 书写.active{} 和.static{}时要注意样式优先级, 比如两个样式都表示颜色, 则应该把.active{}放在.static后面