微信小程序--通信

发表于 | 分类于 | | 阅读次数:

最近写微信翻译小程序过程中总结的几种常用的通信方式

1 页面与页面之间通信

全局变量（app.globalData）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//app.js
App({
  globalData:  {
    name: 'nola'
  },
  ...
})
//index.js
const app = getApp()
Page({
  onLoad: function (options) {
    console.log(app.globalData.name)
  }
})

本地缓存传递数据（wx.setStorageSync）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//a.js储存数据
...
Page({
  xxxx: function () {
    let history = wx.getStorageSync('history') || []  //有则获取无则设为空数组
    history.unshift({ aaaa: this.data.aaaa}) //添加数据
    wx.setStorageSync('history', history)  //储存
  }
})
...
//b.js获取数据
...
Page({
  data: {
    history: [] 
  }
  onShow: function () {
    this.setData({ history: wx.getStorageSync('history')})
  }
})
...

url传参

1
2
3
4
5
//a.wxml
<view>
  <navigator url="./about/index?from=first">first</navigator>
  <navigator url="./about/index?from=seconed">seconed</navigator>
</view>
1
2
3
4
//b.js
xxxx: function (e) {
  console.log(this.options.form)   //可以判断点击的是first或seconed
}

2 组件与组件之间

全局变量（app.globalData）或 本地缓存传递数据（wx.setStorageSync）