微信小程序-页面间如何进行传递数据(通信)

 

 

前言

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

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

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

您将阅读完本文后,将收获到:

1. 页面间跳转携带参数(通过url的方式)传递数据

2. 如何返回上一级页面,并刷新页面呢

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

4. 使用本地缓存数据

5. 使用 eventChannel 向被打开页面传送数据(wx.navigateTo高级用法)

 

 

01

页面间通过 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: &