乐趣区

关于javascript:小程序页面与页面间如何进行传递数据通信

jiezi

前言

在小程序中组件与组件之间的通信是通过在援用组件处, 在自定义组件上增加自定义属性实现的, 子组件外部通过 properties 进行接管

更多对于组件与组件之间的通信可参考小程序实现自定义组件以及自定义组件间的通信这篇文章

那页面与页面之间又如何传递数据?

您将浏览完本文后, 将播种到:

  1. 页面间跳转携带参数 (通过url 的形式)传递数据
  2. 如何返回上一级页面, 并刷新页面呢
  3. 应用全局 app 页面定义的变量实现数据的传递
  4. 应用本地缓存数据
  5. 应用 eventChannel 向被关上页面传送数据 (wx.navigateTo 高级用法)

页面间通过 url 形式传递数据

在小程序中当中, 在父页面, 通过 url 形式传递参数到子页面, 是一种比拟常见的做法

如下示例所示: 利用场景

  1. 点击列表页面, 进入详情页
  2. 动静扭转详情页面的 navBar 中的title

父页面实例代码

<view>
  <view class="list-wrap">
    <block wx:for="{{listDatas}}" wx:key="index">
      <view bindtap="onListTap" data-list="{{item}}">
        <text>{{item.list_text}}</text>
      </view>
    </block>
  </view>
</view>

css 代码

.list-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px 15px;
}

.list-wrap view {
  width: 30%;
  height: 300rpx;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  text-align: center;
  line-height: 300rpx;
  font-size: 28rpx;
}

js 代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    listDatas: [
      {
        listId: '1',
        list_text: '建钢构混泥房',
        link_phone: '137-0113-4148',
        linker: '王经理',
      },

      {
        listId: '2',
        list_text: '建办公楼房',
        link_phone: '137-0113-4148',
        linker: '陈经理',
      },

      {
        listId: '3',
        list_text: '建冰场钢结构',
        link_phone: '137-0113-4148',
        linker: '张经理',
      },
    ],
  },

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function(options) {},

  onListTap(event) {
    const {
      listId,
      list_text,
      link_phone,
      linker,
    } = event.currentTarget.dataset.list;
    // 1. 传递参数 - 通过 url 的形式传递以后页面数据到子页面当中去, 在子页面的 onload 的 options 中能够拿到
    wx.navigateTo({url: `/pages/listDetail/listDetail?id=${listId}&navtitle=${list_text}&phone=${link_phone}&link=${linker}`,
    });
  },
});

切换 tab 选项就能够查看对应的代码, 在下面示例中, 从一个页面跳转到另一个页面是应用 wx.navigateTo() 这个办法, 如果想要将该页面的数据传递到子页面中, 能够通过 url 拼接参数的形式进行传递, 多个参数之间应用 & 符号相连

门路后能够带参数, 参数与门路之间应用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如path?key=value&key2=value2

下面示例代码中应用了 es6 的模板字符串, 参数之间, 也能够应用 + 拼接, 集体感觉应用 + 真的很好受, 不难受, 容易出错

如下是 es6 模板字符串形式拼接参数

wx.navigateTo({url: `/pages/listDetail/listDetail?id=${listId}&navtitle=${list_text}&phone=${link_phone}&link=${linker}`,
});

如下是加号拼接形式

 wx.navigateTo({url: "/pages/listDetail/listDetail?id="+listId+"&navtitle="+list_text+"&phone="+link_phone+"&link="+link_phone+"&link="+linker,})
  }

两者比拟

通过 es6 中的模板字符串, 应用反引号, 联合模板字符串 ${变量} 的形式, 要比应用 + 加号拼接参数要好了解得多

在单个参数状况下, 或者应用模板字符串与加号没有影响, 区别, 然而当多个参数时, 应用加号做拼接就会令人奔溃, 很容易出错

甚至有可能在接管参数时, 呈现失落的状况, 这或者就是不小心应用加号前后空格或解析参数时, 加号被本义导致的, 很容易呈现 bug

子页面实例代码

<view>
  <view class="container">
    <view> 我的项目:<text>{{id}}-{{text}}</text></view>
    <view> 联系人: {{link}}</view>
    <view> 联系电话: {{phoneNumber}}</view>
  </view>
</view>

css 代码

.container {padding: 20px 0 10px 30px;}

.container view {line-height: 30px;}

js 逻辑代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 页面中要渲染的数据, 数据初始化
    id: null,
    text: '',
    phoneNumber: '',
    linker: '',
  },

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function(options) {console.log(options);
    const {id, navtitle, phone, link} = options;
    this._setNavTitle(navtitle);
    this._getList(id, navtitle, phone, link);
  },

  // 设置 navTitle
  _setNavTitle(navtitle) {
    wx.setNavigationBarTitle({title: navtitle,});
  },

  _getList(id, navtitle, phone, link) {
    // 扭转页面中的数据,setData
    this.setData({
      text: navtitle,
      id,
      phoneNumber: phone,
      link,
    });
  },
});

当父页面通过 url 的形式传递数据给子页面时, 在子页面中的生命周期 onLoad 函数中的 options 中能够拿到
想要更改什么数据, 间接从新 setData 就能够了的

留神

  1. url的形式适宜页面间跳转携带参数, 多个参数之间应用 & 符号拼接
  2. 此办法有肯定的局限性, 不合适传入简单的数据, 例如: 数组, 对象
  3. 适宜参数比拟少的状况

url 中有多个参数时传递

在小程序中, 向跳转的指标 url 页面传递的参数有时候远不止一个, 应用 wx.navigator 进行跳转, 反对 /pages/xxx/xxx?param1=${param1}&param2=${param2}&param3=${param3} 的形式, 并不反对相似 obj={key1:value1,key2: value2} 对象或者数组list: [arr1, arr2, arr3 ..]

若 url 参数是数组状况

wx.navigateTo({
  url: `/pages/listDetail/listDetail?list=${[
    listId,
    list_text,
    link_phone,
    linker,
  ]}`,
});

子页面(跳转指标页)

onLoad: function (options) {console.log(options);
    const list = options.list.split(','); // 通过 split 宰割成数组
    console.log(list);
  },

剖析

当被跳转的 url 中的参数是数组时, 那么在跳转的指标页面中的 onLoad 生命周期函数的option, 将失去父页面中的字符串参数

通过 split 办法将字符串宰割为数组, 而后通过数组下标的形式拿到对应的参数

父页面中

const name = 'itclanCoder';
const sex = 'boy';
wx.navigateTo({url: `/pages/listDetail/listDetail?data=${[name, sex]}`,
});

子页面中

onLoad: function (options) {console.log(options);
    const data = options.data.split(','); // 通过 split 宰割成数组
    console.log(data); // ["itclanCoder", "boy"]
  },

若 url 参数是对象状况

在 url 参数是对象时, 并不会像数组一样, 在指标页面中 onLoad 的options对象中是一个字符串, 而却是一个对象

如下所示

{obj: [object, object];
}

咱们须要借助 JSON.stringify() 对传入的参数对象进行序列化

父页面(对象参数序列化)

wx.navigateTo({
  url: `/pages/listDetail/listDetail?obj=${JSON.stringify({
    id: listId,
    text: list_text,
    phone: link_phone,
    link: linker,
  })}`,
});

通常, 咱们把参数对象, 定义成一个对象的, 简化咱们的代码, 用一个变量对象长期存储的

const params = {
  // 参数放到里面, 让代码更加清晰, 可读, 可维护性更高
  id: listId,
  text: list_text,
  phone: link_phone,
  link: linker,
};
wx.navigateTo({url: `/pages/listDetail/listDetail?obj=${JSON.stringify(params)}`,
});

那么在子页面中, 须要通过 JSON.parse() 对父页面中传递过去的参数进行反序列化, 否则拿到的将是字符串对象, 是无奈通过对象. 的形式拜访属性

子页面(对象参数反序列化)

onLoad: function (options) {console.log(options);
    const obj = JSON.parse(options.obj); // 将字符串对象转化为真正的对象
    console.log(obj); // {id: "1", text: "建钢构混泥房", phone: "137-0113-4148", link: "王经理"}
  },

剖析
在父页面中若跳转指标的 url 参数是对象的状况下, 须要先将参数通过 JSON.stringify() 序列化才能够

const params = {
  // 参数放到里面, 让代码更加清晰, 可读, 可维护性更高
  id: 22,
  name: '川川',
  sex: 'boy',
};
wx.navigateTo({url: `/pages/listDetail/listDetail?obj=${JSON.stringify(params)}`,
});

那么在子页面 (指标页面中) 的onLoad的 options 中

onLoad: function (options) {console.log(options);
    const obj = JSON.parse(options.obj); // 将字符串对象转化为真正的对象
    console.log(obj); // {id: 22, name: "川川",sex: "boy"}
},

可能会遇到的问题

当传递的对象数据中含有非凡字符串时，在下个页面应用 JSON.parse() 还原为对象时会报错
也就是当url 传参 参数值过长, 在子页面接管时, 会呈现问题, 存在失落状况

具体解决办法

在上个页面 (被跳转页面) 将对象转化为字符串后 (JSON.stringify()), 而后应用encodeURIComponent 进行编码，而后在下个页面先用 decodeURIComponent 进行解码, 最终在还原为对象

父 (上个) 页面编码

const params = {
  // 参数放到里面, 让代码更加清晰, 可读, 可维护性更高
  id: 22,
  name: '川川',
  sex: 'boy',
};
const param = encodeURIComponent(JSON.stringify(params)); // 通过 encodeURIComponent 编码
wx.navigateTo({url: `/pages/listDetail/listDetail?obj=${param}`,
});

子页面解码

onLoad: function (options) {console.log(options);
    const tempObj = decodeURIComponent(options.obj)
    const obj = JSON.parse(tempObj); // 将字符串对象转化为真正的对象
    console.log(obj); // {id: 22, name: "川川",sex: "boy"}
},

留神

  1. 当父页面传递的 url 参数为对象时，在子页面是无奈间接获取的，在父页面中, 必须先应用 JSON.stringify() 转换为字符串
    而后在下个页面应用 JSON.parse() 还原为对象, 这样在子页面中便能够通过对象的形式拿到
  2. 当父页面传递的 url 对象数据中含有非凡字符串时，在子页面应用 JSON.parse()还原为对象时会报错。须要在上个 (父) 页面将对象转化为字符串后 (JSON.stringify()), 在应用 encodeURIComponent 进行编码，而后在下个(子) 页面先用 decodeURIComponent 进行解码在还原 (JSON.parse()) 为对象。

如何返回上一级页面 - 并刷新页面

在应用 wx.navigateTo()API 进行跳转时, 在子页面中能够通过wx.navigateBack() 返回上一级页面的

这个场景在日常开发中, 就有不少的

例如: 写完微博, 发完微博胜利后, 主动要返回到首页, 申请退款时, 跳转到申清退款页面等等的

const pages = getCurrentPages(); // 能够获取以后页面栈, 上一个页面以及以后页面栈信息
console.log(pages); // 是一个数组，记录了上一个页面与以后页面信息
// 取到上一个页面
const prevPage = pages[pages.length - 2]; // 获取第 0 个页面, 也就是上个页面
console.log(prevPage);
prevPage.onLoad(); // 能够调用上一页面的办法
prevPage.setData({name: 'itclanCoder',});

这个办法十分厉害, 而且很有用, 当你通过 wx.navigateTo(), 一层一层跳转到子页面时, 应用getCurrentPages 办法就能够找到下级, 上下级的页面栈信息

它是通过获取到其余页面的原型对象, 而后通过小程序原型下的 setData 办法, 对以后对象治理的数据 data 进行批改

这个办法 getCurrentPage 办法能够操作页面堆栈页面的数据和办法, 能够做到对子 (后一) 页面对父 (上一) 页面的数据管理

提醒

getCurrentPages()用于获取以后页面栈, 数组中第一个元素为首页，最初一个元素为以后页面

  1. 不要尝试批改页面栈，会导致路由以及页面状态谬误(不要依赖这个办法)
  2. 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成

应用全局 app 页面定义的变量实现数据的传递

在小程序当中, 当有多个页面用到一些公共变量对象参数时, 例如: 小程序的 openId, 一些专用的状态, 能够放到全局app 中

全局页面 app.js

//app.js
App({onLaunch: function() {
    // 定义的全局变量, 如 token, 某些状态等, 放在 globalData 下
    this.globalData = {
      token: 'token',
      url: 'http://coder.itclan.cn/',
      userInfo: 'itclanCoder',
    };
  },
});

应用页面

const app = getApp(); // 在另一页面想要应用全局变量处, 调用 getApp()
Page({
  // 页面初始化的数据
  data: {
    token: '',
    url: '',
    userInfo: '',
  },
  // 生命周期函数
  onLoad: function(options) {},

  onGetGlobal() {
    // 获取全局变量
    const {token, url, userInfo} = app.globalData;
    console.log(token, url, userInfo);
    this.setData({
      token,
      url,
      userInfo,
    });
  },
});

wxml

<view>
  <view class="globalData">
    <view class="getGloablBtn btn" bindtap="onGetGlobal"> 获取全局变量 </view>
    <view class="changeGloablBtn btn" bindtap="onChangeGlobal"
      > 批改全局变量 </view
    >
  </view>
  <view>{{token}}</view>
  <view>{{url}}</view>
  <view>{{userInfo}}</view>
</view>

wxss

.globalData {
  display: flex;
  justify-content: start;
  margin: 15px 0 0 0;
}

.getGloablBtn {background: rgb(89, 196, 119);
  margin-right: 15px;
}

.changeGloablBtn {background: rgb(160, 10, 7);
}

.btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
}

剖析

全局定义的变量, 一些状态, 能够挂载在全局页面 app.js 的 globalData 中, 在应用全局变量页面处

  1. 须要调用 getApp() 函数
  2. 通过 getApp().globalData.a 能够拿到全局对象下定义的变量对象
  3. 若要批改全局变量对象间接赋值即可getApp().globalData.a = "bb";

全局定义变量注意事项

  1. App()必须在 app.js 中注册, 且不能注册多个
  2. 不要在定义 App() 内的函数调用 getApp(), 应用this 就能够拿到 App 下的实例
  3. 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成
  4. 通过 getApp() 获取到全局页面的实例后, 就不要擅自调用生命周期函数了的

应用本地缓存

在微信小程序都能够有本人的本地缓存

  • wx.setStorageSync: 同步设置本地存储某个指定的 key 数据
  • wx.setStorage: 异步设置本地所有存储某个 key 数据
  • wx.getStorage: 异步获取本地所有存储数据
  • wx.getStorageSync: 同步获取本地存储某个指定 key 的数据
  • wx.clearStorage: 一次性革除所有本地存储 (缓存) 数据, 不须要参数
  • wx.clearStorageSync: 一次性革除同步所有本地存储, 不须要参数
  • wx.removeStorage: 从本地缓存中异步移除指定 key, 须要指定某个key
  • wx.removeStorageSync: 从本地存储中同步移除指定的key，须要指定某个key

下面的办法能够对本地缓存进行读写和清理的操作, 读与写都是一一对应的

应用本地缓存, 能够作为页面间数据传递, 然而依然须要留神一些实用状况, 如下所示

隔离策略

同一个微信用户，同一个小程序 storage下限为 10MB, 个别能够作为缓存长期一些小的数据, 比方用户登录信息之类的

storage 以用户维度隔离，同一台设施上，A 用户无奈读取到 B 用户的数据；不同小程序之间也无奈相互读写数据

存储大小限度

除非用户被动删除或因存储空间起因被零碎清理，否则数据都始终可用。单个 key 容许存储的最大数据长度为 1MB，所有数据存储下限为 10MB

插件隔离限度

  1. 同一小程序应用不同插件：不同插件之间，插件与小程序之间 storage 不互通。
  2. 不同小程序应用同一插件：同一插件 storage 不互通
  3. storage只是针对以后用户, 不同用户, 应用不同的插件, 他们之间 storage 是无奈实现数据共用的
    :::

清理策略

本地缓存的清理机会跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理

注意事项

将数据存储在本地缓存中指定的 key 中。会笼罩掉原来该 key 对应的内容

也就是说, 如果是雷同的key，前面的会笼罩掉原来该 key 对应的内容

设置 / 获取 / 删除存储

应用的是 wx.setStorageSync(),wx.getStorageSync 办法

如何设置本地存储数据

wx.setStorage({
  key: 'key',
  data: 'value',
});

或如下简写形式

wx.setStorageSync('key', 'value');

如何获取本地存储数据

wx.getStorageSync({
  key: 'key',
  success(res) {console.log(res.data);
  },
});

或如下简写

var value = wx.getStorageSync('key');

如何删除本地存储数据

革除小程序当中的本地存储分为一次性全副删除所有存储, 与删除存储中某指定的存储key

wx.clearStorage(); // 一次性删除小程序中的所有存储数据

删除存储中某指定的存储key, 肯定要留神这两者的区别, 有的小伙伴只晓得wx.clearStorage()

wx.removeStorageSync('key'); // 删除小程序中指定的 key 的存储

同样等价于

wx.removeStorageSync({
  key: 'key',
  success(res) {console.log(res);
  },
});

留神 :wx.removeStorageSync 办法, 不同于 wx.clearStorageSync() 办法, 它同样也是删除小程序中所有同步存储的数据,
前者须要指定删除存储对应的 key 值, 而后者不须要指定key, 它是一次性删除所有同步存储的代码

wx.clearStorageSync(); // 一次性删除小程序中所有同步存储的数据

对于小程序中本地存储的办法的确容易让人晕, 搞混同, 了解它们的区别, 还是要在开发者工具中, 自行调试, 才晓得每个办法之间区别差别的

光看文字, 不入手写代码测试, 是无奈了解他们之间的差别的, 很容易搞混, 在应用时容易乱套

提醒

但凡带 sync 结尾的都是同步的, 而但凡带 clear 结尾的都是一次性革除同步 / 异步的存储, 而带·remove结尾的都是须要指定删除某个存储的key

解决雷同 key 笼罩问题

在小程序中, 当呈现同名 key, 后者key 笼罩前者是一个让人头疼的问题

具体解决

能够将须要存储数据存到一个数组当中, 当须要应用时, 取最初一个即可

至于若有增删操作, 每次删除完某一数据后, 从新在设置一次本地存储即可

let lists = wx.getStorageSync('lists'); // 先获取 lists 本地存储的数据
if (!lists) {
  // 第一次判断缓存中有没有 lists 数据
  lists = []; // 若没有, 则存储设置一个空数组}
lists.push(data); // 这里的 data 是要存储到本地中的数据
wx.setStorageSync('lists', lists); // 设置本地存储 key:val

通过下面的操作, 就解决了存储 key 值笼罩的问题, 那么如何取最新的呢

const storageList = wx.getStorageSync('lists');
const listData = storageList[storageList.length - 1]; // 获取到最初一个
this.setData({
  // 从新 setData 数据即可
  lists: listData,
});

是应用同步存储还是异步存储

带有 Sync, 这个示意的 同步 的操作, 与之绝对的不带后缀就是 异步”。

同步与异步是指的音讯通信机制。就是信息传来传去的时候是同步还异步。重点强调的是通信这个动作。

很容易混同, 在计算机里, 他们两是对抗, 相同的，同步代码是程序执行, 会造成阻塞, 而异步代码不会阻塞, 它是期待主线程执行完后, 能够在回过头来执行

比方要申请用户信息的时候，须要从缓存中获取 username 这个变量，那只有先获取到这个变量能力进行下一步。那就应该应用同步, 应用wx.getStorageSync。这样能确保肯定能获取到这个变量, 所有在第一次获取缓存中的数据时

咱们往往先要判断一下缓存中是否有咱们想要的那一数据的, 否则若没有, 在代码中应用了, 就会报错

打电话就是一个同步的例子, 必须先打完上一个, 而后能力在打下一个, 而发短信就是一个异步的例子, 你能够跟 A 同学发, 发完后不必期待, 也能够更 B 同学发

在雷同的工夫内, 应用同步只能干一件事件, 必须得一件, 一件的干完, 而异步则在同一段时间内, 能够同时干多件事件

JavaScript 是单线程的, 然而浏览器是多线程的. 它的异步是借助事件实现的. 具体可自行查看多线程与单线程相干常识的

应用 eventChannel 向被关上页面传送数据 (wx.navigateTo 高级用法)

对于页面与页面之间的数据通信, 一种形式是, 能够通过 url 携带参数的形式跳转到指定的页面, 在跳转的指定页面中的 onLoad 生命周期函数中的 options 中能够拿到数据

然而这种传递数据的形式是无限的, 不适宜数据多的状况下

另一种形式是能够传递数据没有限度,wx.navigateTo提供了一种更加高级的用法, 通过 eventChannel 向被关上页面传送数据

父 (以后) 页面向子 (指标) 页面传递数据

被关上 (上 / 父级) 页面

Page({
  data: {
    parentPageData: {
      name: '川川',
      url: 'http://coder.itclan.cn',
      vx: 'itclanCoder',
    },
  },

  onEventChannel() {
    const parentPageData = this.data.parentPageData; // 以后页面的数据
    wx.navigateTo({
      url: `/pages/listDetail/listDetail`, // 关上的指标页面
      success: (res) => {
        // 通过 eventChannel 向被关上页面传送数据, 指标页面是 listDetail, 这个 data 名字是你本人取的任意, 在指标页面中有个参数接管就能够
        res.eventChannel.emit('parentPageEmit', { data: parentPageData});
      },
    });
  },
});

被关上 (上 / 父级) 页面的wxml, 绑定事件

<view bindtap="onEventChannel"> 关上跳转到指标页面 </view>

关上 (指标) 页面

在指标关上页面中通过 getOpenerEventChange 办法, 用 on 进行监听被跳转页面的办法, 就能够拿到被跳转页面中通过 emit 办法传递过去的数据, 其中应用 on 监听的办法名与被跳转页面的名字保持一致就能够, 这样实现了两个不同页面之间的数据通信传递

Page({
  data: {acceptParentData: {},
  },

  onLoad: function(options) {
    // 通过 getOpenerEventChannel 对象, 对 `parentPageEmit` 进行监听
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('parentPageEmit', (data) => {console.log(data);
      this.setData({acceptParentData: data,});
    });
  },
});

阐明

将某整个父页面的数据传递给跳转到的子页面, 是一个比拟常见的需要操作

比方在商品详情页面中, 跳到到下单页面, 须要将详情页面的一些数据

传递给跳转的子页面, 那么这个时候, 用 url 的形式传递数据就不断很适合, 选用 eventChannel 的形式就比价适宜

在 wx.navigateTo 的胜利 success 回调中, 通过 emit 进行触发,emit接管两个参数, 第一个是监听事件的名称, 第二个参数是须要向指标页面传递的数据

res.eventChannel.emit(` 监听的事件名称 parentPageEmit`, { data: '数据'});

在跳转的指标页面中, 通过调用 getOpenerEventChannel 办法, 而后进行 on 的绑定

const eventChannel = this.getOpenerEventChannel();
eventChannel.on('监听的事件名称 parentPageEmit', (data) => {console.log(data);
  this.setData({acceptParentData: data,});
});

以后页面 --> 指标页面是利用wx.navigateTo 中的 success 回调中应用 emit 触发, 指标跳转页面用 on 监听

实现将以后页面的数据传递给指标页面中

那以后页面又如何获取指标页面的数据呢

父 (以后) 页面如何获取跳转 (子 / 指标) 页面中的数据

晓得了当前页面向指标跳转页面传递数据, 那么反过来, 以后页面又如何接管跳转页面传递过去的数据?

以后页面

Page({
  data: {
    parentPageData: {
      name: '川川',
      url: 'http://coder.itclan.cn',
      vx: 'itclanCoder',
    },
    subdetailData: {},},

  onEventChannel() {
    const parentPageData = this.data.parentPageData; // 以后页面的数据
    wx.navigateTo({
      url: `/pages/listDetail/listDetail`, // 关上的指标页面
      events: {
        // 页面间通信接口，用于监听被关上页面发送到以后页面的数据
        // 为指定事件增加一个监听器，获取被关上页面传送到以后页面的数据
        subPageEmit: (data) => {console.log(data);
          this.setData({subdetailData: data,});
        },
      },
    });
  },
});

wxml

<view class="subdetail-box">
  <block wx:for="{{subdetailData}}" wx:key="index">
    <view> 姓名:{{item.name}}</view>
    <view> 站点:{{item.url}}</view>
    <view> 微信:{{item.vx}}</view>
  </block>
</view>

子页面指标页面

Page({
  data: {
    subdetailData: {
      name: '轻记账小程序 - 我是子页面传递过去的数据',
      url: 'http://itclan.cn/',
      vx: 'itclanCoder',
    },
  },

  onLoad: function(options) {this.returnSubPagePrev();
  },

  returnSubPagePrev() {
    const subdetailData = this.data.subdetailData;
    const eventChannel = this.getOpenerEventChannel();
    // 通过 emit 的形式进行触发, 将子页面 / 指标页面中的数据传递给以后页面
    eventChannel.emit('subPageEmit', { data: subdetailData});
  },
});

阐明

在以后页面中获取子页面的数据, 是借助 wx.navigateTo 中提供的 event 这个参数接口, 它能够用于监听被关上页面发送到以后页面的数据

换言之, 也就是以后页面能够获取监听到子页面传递过去的数据, 在子页面中通过 emit 的形式进行触发, 同样,emit办法接管两个参数

第一个是监听的事件名称, 第二个参数对象是具体要传递的数据

结语

本文次要介绍 4 种在小程序当中页面与页面之间的传递数据常见办法, 其中如何返回上一级页面, 这些都是理论开发中常常会遇到的问题

每一种办法都有与之对应的利用场景,url 形式比拟适宜跳转, 携带大量的数据, 当多个页面须要共享同一个数据对象时, 能够应用全局 globalData 对象, 也能够应用本地缓存数据

以及最初一种应用 eventChannel 向被关上页面传送数据 (wx.navigateTo 高级用法)

它适宜一种传递简单的数据.

对于页面之间数据传递就介绍这么多, 如果您有问题, 欢送补充, 给我留言, 一起学习成长

相干文档

  • wx.navigateTo 跳转
  • 小程序 - 页面路由
  • 小程序 - 页面间通信
  • 小程序 - 本地存储
  • 原文出处 -http://coder.itclan.cn/- 小程序 - 页面与页面间如何进行通信
退出移动版