详解 | 小程序页面间如何进行传递数据

wx.navigateTo({
  url: '../detail/detail?cid='+cid+'&token='+token
    })

.onLoad: function (opt) {
   console.log('cid =' + opt.cid);
  console.log('access_token =' + opt.access_token); 
}

var model = this.data.str;
  wx.navigateTo({  url: '../detail/detail?model=' + model,
    })

var model = JSON.stringify( model);
 wx.navigateTo({
    url: '../detail/detail?model=' + model,
  })  
  //接收
onLoad: function (options) {
//将字符串转换成对象
 var bean = JSON.parse(options.model);
}

<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>

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

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

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}`,
    });
  },
});

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

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

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

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,
    });
  },
});

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);
  },

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"]
  },

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)}`,
});

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

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

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

const params = {
  // 参数放到外面,让代码更加清晰,可读,可维护性更高
  id: ,
  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"}
},

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

//app.js
...
App({
    globalData : {
        foo : 'bar'
    }
});

//page.js
...
var app = getApp()
var getFoo = app.globalData.foo
app.globalData.foo = 'fun'

<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>

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

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

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

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

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

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

pageC.js
...
// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// pageD.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

{{index}}: {{msg}}
Time: {{time}}

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

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

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