小程序页面间跳转与传值

小程序的页面间跳转非常简单,微信官方提供了navigator 标签。

这个标签可以实现小程序内的页面间跳转,也可以实现小程序之间的跳转。

有几个主要的参数

  • url :要跳转的路径。指向当前小程序内的跳转链接。
  • target : 跳转方式,默认值为 self,拥有以下几个合法值: self - 当前小程序 miniProgram - 其他小程序 

指定url后已经可以实现页面间跳转。

  <navigator url='../list/list' hover-class='none'>
    <button>跳转</button>
  </navigator>

使用此标签后,此标签默认会有一个点击高亮。但是那个高亮比较丑。如果希望自己实现一个点击高亮的话,可以使用hover-class='none' 来禁用掉原本的高亮。

在这里,url所指向的路径为相对路径。

如此已经能够实现跳转,且跳转后小程序会自动为我们添加一个返回按钮。

可以直接通过这个按钮来返回上一层。在这里需要说明一下,开发文档中提到了,这种跳转的嵌套最多只能嵌套十层。也就是说最好不要有过多的页面间嵌套。

我们经常会需要在跳转页面的同时传递一些参数。小程序传参的方式也非常简单。

<navigator url='../list/list?p1=123&p2=456' hover-class='none'>
    <button>跳转</button>
</navigator>

直接像web开发一样在地址栏后边跟上参数即可。连接和参数之间使用 ? 隔开,参数之间使用 & 隔开。

需要注意的是,小程序只是借鉴了网页开发的部分内容,其本质并不是网页,没有浏览器对象,没有session,只是借鉴了一些开发方式而已,千万不要混为一谈了。

接收参数时可以在 onLoad 事件中写,这个钩子会监听页面的加载。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(params) {
  this.setData({
    p1:params.p1,
    p2:params.p2
  })
}

小程序会在传参的过程中吧你所有传递的参数封装为一个对象,接收参数页面使用 params 来接收,取值直接使用 params.参数名称 即可

如果打算在小程序之间跳转的话。

首先要将 target 属性设置为 miniProgram 。不设置的话默认值为 self ,即当前小程序。

其次需要几个小程序内跳转不需要的参数:

  • app-id :需要跳转的小程序的APPID,该值仅在 target 属性为 miniProgram 时有效。
  • path :指定打开需要跳转的小程序的那个页面,若为空则默认打开首页,该值仅在 target 属性为 miniProgram 时有效。
  • extra-data :所传递的参数,需要写在该属性中。获取数据的方式不变。所传递参数必须为 object 类型
  • bindsuccess :指定小程序跳转成功时调用的方法。
  • bindfail :小程序跳转失败时调用的方法。
  • bindcomplete :跳转完成时调用的方法。

参考文献:微信小程序官方API

猜你喜欢

转载自www.cnblogs.com/hlrfqj/p/10721062.html