微信小程序 页面跳转和数据传递

微信小程序是一种基于微信平台的小型应用程序，用户可以在不打开APP的情况下快速使用。在小程序开发中，页面跳转和数据传递是必不可少的基础知识之一。

1. 页面跳转

在小程序中，页面跳转可以通过按钮、超链接等方式触发。小程序支持两种方式实现页面跳转：一种是基于路由的页面跳转，一种是基于API的页面跳转。下面将对它们进行详细介绍。

1.1 基于路由的页面跳转

基于路由的页面跳转是小程序提供的默认方式，可以通过`navigator`组件实现。`navigator`组件是小程序中的导航组件，可以跳转到小程序内的其他页面或者外部链接。

在跳转到其他小程序页面时，需要在`app.json`中配置`pages`字段，定义小程序的所有页面路径。配置完成后，在跳转时只需要设置`navigator`组件的`url`属性即可。具体使用方法如下：

// 跳转到其他小程序页面
<navigator url='/pages/detail/detail?id=123'></navigator>
// 跳转到外部链接
<navigator url='https://www.baidu.com/'></navigator>

在跳转到其他小程序页面时，还可以通过`open-type`属性设置跳转方式。小程序提供了以下几种跳转方式：

- `navigate`: 保留当前页面，跳转到应用内的某个页面。

- `redirect`: 关闭当前页面，跳转到应用内的某个页面。

- `switchTab`: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

- `reLaunch`: 关闭所有页面，打开应用内的某个页面。

1.2 基于API的页面跳转

基于API的页面跳转是通过调用小程序提供的接口实现。小程序提供的接口有`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`、`wx.reLaunch`等。这些接口与`navigator`组件的跳转方式类似，但是更加灵活，能够满足更多的跳转需求。

下面是基于API的页面跳转示例：

// 跳转到其他小程序页面
wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})
// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/pages/index/index'
})

2. 数据传递

在小程序中，页面之间的数据传递可以通过`URL`参数、全局变量、缓存等方式实现。不同的传递方式各有优缺点，开发者需要根据实际需求选择合适的方式进行数据传递。

2.1 URL参数

URL参数是指在跳转页面时，将数据作为URL的一部分传递给目标页面。使用URL参数传递数据比较简单，只需要在跳转时设置参数即可。接收页面可以通过`getCurrentPages`方法获取当前页面栈中的所有页面对象，并通过`options`属性获取URL参数。

下面是使用URL参数传递数据的示例：

// 跳转页面并传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=张三'
})
// 接收页面获取参数
Page({
  onLoad: function (options) {
    this.setData({
      id: options.id,
      name: options.name
    })
  }
})

2.2 全局变量

全局变量是指在小程序全局范围内定义的变量，可以在所有页面中访问。通过定义全局变量，在源页面设置变量值，在目标页面获取变量值，就可以实现数据传递。

下面是使用全局变量传递数据的示例：

// 在 app.js 中定义全局变量
App({
  globalData: {
    userInfo: null
  }
})
// 在源页面设置变量值
getApp().globalData.userInfo = {
  name: '张三',
  age: 18
}
// 在目标页面获取变量值
Page({
  onLoad: function () {
    this.setData({
      userInfo: getApp().globalData.userInfo
    })
  }
})

2.3 缓存

缓存是指在本地缓存中存储数据，并在需要的时候获取数据。小程序提供了`wx.setStorageSync`、`wx.getStorageSync`等API，可以方便地实现数据的缓存和读取。

下面是使用缓存传递数据的示例：

// 在源页面设置缓存
wx.setStorageSync('userInfo', {
  name: '张三',
  age: 18
})
// 在目标页面获取缓存
Page({
  onLoad: function () {
    this.setData({
      userInfo: wx.getStorageSync('userInfo')
    })
  }
})

总结

小程序中的页面跳转和数据传递是非常重要的基础知识，掌握了这些知识可以为小程序的开发提供便利。在实际开发中，我们需要根据实际需求选择合适的方式进行页面跳转和数据传递，来满足用户的使用需求。