六、微信小程序-快速回顾 ( 页面间传参 )

在实际开发中，经常会有页面间跳转时需要传递参数的场景，本文回顾一下微信小程序中常用的页面传参方式

演示前的准备

1. 为了方便演示，先创建两个页面，/pages/from/index 和 /pages/to/index，我们使用简便的创建方式，直接
在 app.json 中为 pages 数组添加两个页面的路径，然后保存，让微信开发者工具自动帮我们创建，重点代码 2 - 5 行：

{
    "pages": [
        "pages/a/index",
        "pages/b/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

创建后的结构如下：

1. URL 传参

URL 传参的方式，非常简单常用，当参数不是特别多的时候建议使用：

1. 声明 URL 参数，顾名思义，就是将参数写在 URL 中，如 /index?param1=value1&param2=value2
2. 在页面生命周期函数 onLoad(options) 中通过函数参数 options 获取 URL 中的参数，如 options.param1
   
   

示例：URL 传参：

1. Form 页面部分

(1) 在页面布局文件中添加链接标签 <navigator>，并在 url 属性中指定跳转地址，以及拼接待传递的参数：

<navigator url="/pages/to/index?param=B">点击跳转到 To 画面</navigator>

2. To 页面部分

(1) 在页面逻辑文件的在生命周期函数 onLoad(options) 中通过函数参数 options 获取 URL 中的参数：

Page({
  data: {
    param: ''
  },
  onLoad(options) {
    this.setData({
      param: options.param
    })
  }
})

(2) 页面布局文件中，展示获取的 URL 参数：

<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>

3. 运行效果：

2. 向前一画面传参

这种传参的场景是，Form 页面跳转到 To 页面后，又从 To 页面跳回到 Form 页面，这时向 From 页面传参

向前一画面传参的核心点是，在 To 页面中使用 getCurrentPages() 获取 页面跳转记录栈 中的页面组件数组，然后通
过修改前一页面组件的值来实现传参的效果，注意，这种向前一画面传参的方式，要求使用页面组件压栈而非页面组
件卸载的跳转方式

示例：向前一画面传参：

1. Form 页面部分

(1) 在页面逻辑文件中定义接收参数的变量

Page({
  data: {
    param: ''
  }
})

(2) 在页面布局文件中，创建跳转到 To 页面的链接，并在下面展示从 To 页面返回时的参数

<navigator url="/pages/to/index">点击跳转到 To 画面</navigator>
<view wx:if="{{param}}">To 画面传递的参数是：{{param}}</view>

2. To 页面部分

(1) 在页面逻辑文件中定义按钮点击事件的处理函数，在函数中使用 getCurrentPages() 获取 页面跳转记录栈 中前
一个页面的页面组件，并修改页面组件数据，最后通过 wx.navigateBack api 返回到前一画面

Page({
  // 按钮点击事件处理函数
  handleTap(){
    // 从页面跳转栈中获取页面组件数组
    const pages = getCurrentPages()
    // 获取前一个画面的页面组件对象
    const prePage = pages[pages.length - 2]
    // 修改前一个画面的页面组件的属性值
    prePage.setData({
      param:'B'
    })
    // 弹栈返回到前一个画面
    wx.navigateBack({
      delta: 1,
    })
  }
})

(2) 在页面布局文件中添加一个按钮，并绑定点击事件和事件处理函数

<button bind:tap="handleTap">点击跳转到 Form 画面</button>

3. 运行效果：

3. 全局变量实现传参

这种方式很简单，直接利用了在 app.js 中定义的变量为全局变量的特性来实现，通过使用微信小程序的缓存功能
也可以实现全局变量传参的效果，原理一样

示例：全局变量实现传参

1. Form 页面部分

(1) 在页面逻辑文件中定义按钮点击事件的处理函数，触发后设置全局变量，最后跳转到目标页面，注意，不管是页
面逻辑文件、组件逻辑文件还是应用逻辑文件，修改自定义的属性都不需要使用 this.setData，直接修改即可：

Page({
  handleTap() {
    // 获取唯一的应用实例
    const app = getApp()
    console.log(app)
    // 获取参数
    app.param = 'A'
    // 跳转
    wx.navigateTo({
      url: '/pages/to/index',
    })
  }
})

(2) 在页面布局文件中添加按钮，并绑定事件和事件处理函数：

<button bind:tap="handleTap">点击跳转到 To 画面</button>

2. To 页面部分

(1) 在页面逻辑文件中，定义生命周期函数，在函数内获取全局变量：

Page({
  data: {
    param: ''
  },
  onLoad() {
    // 获取唯一的应用实例
    const app = getApp()
    // 获取参数
    this.setData({
      param: app.param
    })
  }
})

(2) 在页面布局文件中，展示参数：

<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>

(3) 运行效果：

4. 发布事件

在使用微信小程序内置 api wx.navigateTo 进行跳转时，会有一个 success(res) 函数的回调，回调函数的参
数 res 中有一个 eventChannel 对象，该对象是页面间事件通信对象，可以利用该对象发布一个自定义事件，
并在目标页中对该事件进行监听

示例：发布事件

1. Form 页面部分

(1) 在页面逻辑文件中定义按钮点击事件的处理函数，在函数内使用 wx.navigateTo 进行页面跳转，并在 success 回
调函数内发布一个自定义事件

Page({
  handleTap() {
    // 跳转
    wx.navigateTo({
      // 目标路径
      url: '/pages/to/index',
      // 跳转后回调，利用页面间事件通信对象发布自定义事件
      success(res){
        res.eventChannel.emit('myEvent',{param:'A'})
      }
    })
  }
})

(2) 在页面布局文件中添加按钮，并绑定事件和事件处理函数：

<button bind:tap="handleTap">点击跳转到 To 画面</button>

2. To 页面部分

(1) 在页面逻辑文件中，定义生命周期函数 onLoad，并在函数内监听 Form 页面发布的自定义函数：

Page({
  data: {
    param: ''
  },
  onLoad() {
    // 获取页面间事件通信对象
   const eventChannel = this.getOpenerEventChannel()
   // 监听自定义事件
   eventChannel.on('myEvent',(req)=>{
     this.setData({
       param: req.param
     })
   })
  }
})

(2 在页面布局文件中，展示参数：

<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>

3. 运行效果：