[小程序开发]页面间传递数据

2023年6月9日 09:58 by wst

小程序

---

微信的接口，从2.2.2基础版本开始，页面跳转增加了数据传递的方法。

原页面

功能：页面转发、超链接跳转

index.js文件：

const app = getApp()

Page({
  data: {

  },
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/index/index?id=123'
    }
  },
  onLoad: function () {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
  },

  toNewPage(e){
    wx.navigateTo({
      url: '/new/new?query=111',
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
          console.log("return:", data)
        },
        someEvent: function(data) {
          console.log("return some:",data)
        }
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'good' })
      }
    })
  },
  onShow: function() {
    console.log("index show")
  }
})

index.xml文件：

<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
<view class="intro">
  <navigator url="/new/new" class="nav">
    去新页面
  </navigator>
  <button bindtap="toNewPage" type="primary">按钮跳转</button>
</view>

index.wxss文件：

.intro {
  margin: 30px;
  text-align: center;
}

.nav{
  color: blue;
}

目标页面

new.js文件：

// new/new.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("query:", options.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log("aim page:", data)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

new.wxml文件：

<!--new/new.wxml-->
<view>跳转到的页码</view>

new.wxss文件：

view {
  margin: 30px;
  text-align: center;
}

总结

代码包含的主要功能为：

1. index.js页面可转发的设置

2. 通过超链接传递数据的方法：发送、接收、监听。

 

---