小程序页面间跳转与传值

2023-11-10 12:21:34

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

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

有几个主要的参数

指定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 ，即当前小程序。

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

码农公寓