微信小程序数据传递的综合指南

前言

数据传递是现代应用程序开发中的一个关键问题。在微信小程序中，传递数据的方式有很多种，每种方式都有其适用的场景和优势。在本文中，我将为大家介绍微信小程序中常用的数据传递方式，并提供一些实用的技巧和建议，帮助大家在开发微信小程序时更好地处理数据传递的需求。

---

方式一：URL 传递

可以通过 URL 的 query 参数传递参数。在小程序的页面跳转时，可以在 URL 中添加参数，然后在目标页面的 onLoad 函数中通过 options 参数获取传递的参数值。

示例代码： 在页面 A 中跳转到页面 B，并传递参数：

// 点击事件
onClick() {
    let id = '16434d47128409249818'
    let name = 'xiaohogn'
    wx.navigateTo({
        url: '../carDetails/carDetails?id= ' + id + '&name=' + name
    })
},
1
2
3
4
5
6
7
8

在页面 B 的 onLoad 函数中获取参数：

onLoad(options) {
    console.log(options);
},
1
2
3

• 使用场景：

  适用于页面之间的简单参数传递，例如列表页跳转到详情页时传递某个数据的 ID。

• 优点：

  简单易用，无需额外的配置和处理。

• 缺点：

  参数暴露在 URL 中，可能存在安全风险，且传递的参数数量有限。

---

方式二：全局变量传递

可以通过设置全局变量来传递参数。在小程序中，可以使用 getApp() 方法获取小程序实例，然后在实例中设置和获取全局变量。

示例代码： 在页面 A 中设置全局变量：

// 点击事件
onClick() {
    getApp().globalVariable.userName = "admin";
    getApp().globalVariable.grade = 6;
    wx.navigateTo({
        url: '../carDetails/carDetails'
    })
},
1
2
3
4
5
6
7
8

在页面 B 中获取全局变量：

onLoad(options) {
    console.log(getApp().globalVariable);
},
1
2
3

• 使用场景：

  适用于需要在多个页面之间共享数据的情况，例如用户登录状态、用户信息等。

• 优点：

  方便在多个页面之间共享数据，无需频繁传递参数。

• 缺点：

  全局变量可能被其他页面修改，需要注意数据的同步和安全性。

---

方式三：Storage 传递

可以使用小程序的 Storage API 来传递参数。可以使用 wx.setStorageSync() 方法设置参数值，然后在目标页面中使用 wx.getStorageSync() 方法获取参数值。

示例代码： 在页面 A 中设置参数：

// 点击事件
onClick() {
    let data = {
        id: '1',
        type: 2,
        title: "测试",
    }
    wx.navigateTo({
        url: '../carDetails/carDetails'
    })
    wx.setStorageSync('infos', data);
},
1
2
3
4
5
6
7
8
9
10
11
12

在页面 B 中获取参数：

onLoad() {
    console.log(wx.getStorageSync('infos'));
},
1
2
3

从本地缓存中移除指定 key

wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  },
  fail: function(res) {
    console.log(res);
  }
})
1
2
3
4
5
6
7
8
9

批量删除 key

// 获取当前存储的所有键名
const storageInfo = wx.getStorageInfoSync();
const keys = storageInfo.keys;
// 遍历键名，匹配以 "Img" 结尾的键名进行删除
keys.forEach(key => {
    if (key.endsWith("Img")) {
        wx.removeStorage({
            key: key,
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11

• 使用场景：

  适用于需要在页面之间传递较多数据的情况，例如表单数据、用户选择等。

• 优点：

  可以传递较多的数据，不受 URL 长度限制。

• 缺点：

  需要手动清除 Storage 中的数据，否则数据会一直存在，可能导致数据冗余和安全问题。

wx.setStorageSync 和 wx.setStorage 的区别？

• 同步和异步： wx.setStorageSync 是一个同步方法，它会阻塞后续代码的执行，直到数据存储完成。而 wx.setStorage 是一个异步方法，它会立即返回并在后台进行数据存储，不会阻塞后续代码的执行；
• 回调： wx.setStorage 方法接受一个回调函数作为参数，用于在数据存储完成后执行相应的操作。而wx.setStorageSync 没有回调函数，您可以直接在方法调用后继续处理后续代码；
• 数据大小限制： wx.setStorageSync 可以存储的数据大小限制为 10MB，而 wx.setStorage 可以存储的数据大小限制为 1MB。

综上所述，如果你需要在数据存储完成后执行一些操作，或者需要异步处理数据存储，您可以使用 wx.setStorage 方法。如果你希望在数据存储期间阻塞后续代码的执行，或者不需要处理存储完成后的操作，您可以使用 wx.setStorageSync 方法。

• setStorage 存储

  wx.setStorage({
    key:"key",
    data:"value"
  })
  1
  2
  3
  4

• setStorage 获取

  wx.getStorage('key')
  1

---

方式四：navigator 跳转传递

本质上来说其实是与添加点击事件跳转一样的，可根据自身需求选择。

示例代码： 在页面 A 中跳转到页面 B，并传递参数：

<navigator url="../carDetails/carDetails?id=123&name=xiaohong"><button>我是首页页面button>navigator>
1

在页面 B 的 onLoad 函数中获取参数：

onLoad(option) {
    console.log(option);
},
1
2
3

---

除了上述常见的传参方式，还有一些不常见但也可以用于传递数据的方法，例如：

方式五：WebSocket 传递

可以使用小程序的 WebSocket API 来建立 WebSocket 连接，并通过发送消息的方式传递数据。在目标页面中监听 WebSocket 的消息事件，接收传递的数据。

示例代码： 在页面 A 中建立 WebSocket 连接并发送消息：

const socket = new WebSocket('wss://example.com');
socket.onopen = function() {
  socket.send('Hello');
}
1
2
3
4

在页面 B 中监听 WebSocket 的消息事件：

socket.onmessage = function(event) {
  console.log(event.data) // 输出：Hello
}
1
2
3

• 使用场景：

  适用于实时通信和传递大量数据的情况，例如聊天应用、实时数据展示等。

• 优点：

  可以实现实时通信和传递大量数据。

• 缺点：

  需要服务器端的支持，且相对复杂。

---

方式六：数据库传递

可以使用小程序的云开发功能，通过云数据库来传递数据。可以在页面 A 中将数据存储到云数据库中，然后在页面 B 中从云数据库中获取数据。

示例代码： 在页面 A 中存储数据到云数据库：

const db = wx.cloud.database();
db.collection('data').add({
  data: {
    id: 123,
    name: 'John'
  }
})
1
2
3
4
5
6
7

在页面 B 中从云数据库中获取数据：

const db = wx.cloud.database();
db.collection('data').get().then(res => {
  console.log(res.data[0].id) // 输出：123
  console.log(res.data[0].name) // 输出：John
})
1
2
3
4
5

• 使用场景：

  适用于需要在多个小程序之间共享数据的情况，例如多个小程序之间的数据同步。

• 优点：

  可以实现多个小程序之间的数据共享。

• 缺点：

  需要云开发的支持，且相对复杂。

总结

以上就是微信小程序中数据传递的方法了，大家可以根据具体的使用场景和需求，选择合适的方式来传递数据。至于第五和第六这两种不常见的传参方式大家也可以根据具体的使用场景和需求选择合适的方式，因为它们可以满足一些特殊的数据传递需求。