小程序中json如何传递

在开发小程序时，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于数据的传输和配置，如何在微信小程序中传递JSON数据呢？以下将详细介绍小程序中JSON传递的方法和注意事项。

我们需要了解JSON的基本结构，JSON是由键（key）和值（value）组成的一种数据格式，其表现形式为键值对，在微信小程序中，JSON数据主要用于配置页面、组件以及全局设置等。

页面间传递JSON数据

在微信小程序中,页面之间的数据传递通常有以下几种方法：

使用wx.navigateTo或wx.redirectTo跳转时传递参数

当我们在小程序中使用页面跳转时，可以将需要传递的JSON数据转化为字符串,然后作为参数附加在URL后面。

// 发送方
var json_data = { name: '张三', age: 25 };
var url = '/pages/detail/detail?data=' + JSON.stringify(json_data);
wx.navigateTo({
  url: url
});
// 接收方
Page({
  onLoad: function (options) {
    var data_str = options.data;
    var data_obj = JSON.parse(data_str);
    console.log(data_obj.name); // 输出：张三
  }
});

使用全局变量传递数据

另一种方法是将JSON数据存储在全局变量中,这样在各个页面都可以访问到该数据。

// 在app.js中定义全局变量
App({
  globalData: {
    userInfo: null
  }
});
// 发送方
var app = getApp();
app.globalData.userInfo = { name: '李四', age: 30 };
// 接收方
var app = getApp();
console.log(app.globalData.userInfo.name); // 输出：李四

组件间传递JSON数据

小程序中的组件间通信,主要依靠属性传递和事件触发。

通过属性传递JSON数据

在父组件中,可以将JSON数据作为属性传递给子组件。

<!-- 父组件wxml -->
<child-component data="{{childData}}"></child-component>
// 父组件js
Page({
  data: {
    childData: { name: '王五', age: 28 }
  }
});
// 子组件js
Component({
  properties: {
    data: {
      type: Object,
      value: {}
    }
  },
  ready: function () {
    console.log(this.data.data.name); // 输出：王五
  }
});

通过事件传递JSON数据

子组件可以通过触发事件,将JSON数据传递给父组件。

<!-- 子组件wxml -->
<button bindtap="sendDataToParent">发送数据给父组件</button>
// 子组件js
Component({
  methods: {
    sendDataToParent: function () {
      var data = { name: '赵六', age: 35 };
      this.triggerEvent('parentEvent', data);
    }
  }
});
<!-- 父组件wxml -->
<child-component bindparentEvent="handleParentEvent"></child-component>
// 父组件js
Page({
  handleParentEvent: function (e) {
    console.log(e.detail.name); // 输出：赵六
  }
});