小程序怎么调取自己建的json数据

小程序如何优雅调取自己建的JSON数据：从本地到远程的完整指南

引言：为什么需要调取自定义JSON数据？

在小程序开发中,JSON数据是连接前端界面与后端服务的“桥梁”，无论是静态的配置信息（如导航栏菜单、主题色）、动态的业务数据（如商品列表、用户信息），还是多语言文案等，都常以JSON格式存储，如何调取自定义JSON数据，是开发小程序的基础技能，本文将从本地数据、远程接口和动态更新三个场景，详解具体实现方法。

场景一：调取本地JSON数据（静态配置/小型数据）

如果数据量小且不常变化（如小程序的页面配置、默认设置等），可以直接将JSON文件存放在小程序项目中，通过wx.getStorageSync或require直接调用。

存放JSON文件

在项目根目录下创建data文件夹（或其他自定义目录），存放JSON文件，例如data/config.json：

{
  "navigationBarTitleText": "我的小程序",
  "themeColor": "#1890ff",
  "menus": [
    {"name": "首页", "page": "pages/index/index"},
    {"name": "我的", "page": "pages/user/user"}
  ]
}

调用本地JSON数据

（1）使用`require`（编译时调用，适合页面加载时初始化数据）

在页面JS文件中,通过require直接引入JSON文件：

// pages/index/index.js
const config = require('../../data/config.json');
Page({
  data: {
    config: {}
  },
  onLoad() {
    this.setData({ config });
    console.log('导航栏标题：', config.navigationBarTitleText); // 输出：我的小程序
  }
});

注意：require是同步方法，会在编译时解析JSON文件，适合数据固定且不需要动态更新的场景。

（2）使用`wx.getStorageSync`（运行时调用，适合存储用户本地数据）

如果JSON数据需要通过wx.setStorageSync存储到本地（如用户自定义设置），可通过wx.getStorageSync读取：

// 存储数据（例如用户修改主题色后）
wx.setStorageSync('userConfig', { themeColor: '#ff4d4f' });
// 读取数据
const userConfig = wx.getStorageSync('userConfig');
console.log('用户主题色：', userConfig.themeColor); // 输出：#ff4d4f

适用场景：需要持久化存储的用户个性化数据、缓存接口数据等。

场景二：调取远程JSON数据（动态业务数据）

当数据需要实时更新（如商品列表、文章内容等），需通过后端接口获取JSON数据，核心流程是：发起请求 → 接收响应 → 处理数据 → 更新页面。

配置服务器域名

在小程序后台“开发” → “开发管理” → “开发设置”中，配置合法的request合法域名（需支持HTTPS），若开发阶段未配置，可暂时在“开发设置”中开启“不校验合法域名...”选项（仅限本地调试）。

使用`wx.request`发起请求

通过wx.request向后端接口发起GET/POST请求，获取JSON数据：

// pages/goods/goods.js
Page({
  data: {
    goodsList: []
  },
  onLoad() {
    this.fetchGoodsData();
  },
  fetchGoodsData() {
    wx.request({
      url: 'https://your-api-domain.com/api/goods', // 后端接口地址
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200 && res.data.code === 0) {
          this.setData({ goodsList: res.data.data });
          console.log('商品列表：', this.data.goodsList);
        } else {
          wx.showToast({ title: '数据加载失败', icon: 'error' });
        }
      },
      fail: (err) => {
        console.error('请求失败：', err);
        wx.showToast({ title: '网络错误', icon: 'error' });
      }
    });
  }
});

关键参数：

url：后端接口地址（需包含完整的域名路径）。
method：请求方法（GET/POST等）。
success：请求成功回调，res.data为后端返回的JSON数据。
fail：请求失败回调（如网络异常、域名未配置等）。

处理响应数据并渲染页面

获取数据后,通过this.setData更新页面数据，并在WXML中渲染：

<!-- pages/goods/goods.wxml -->
<view wx:if="{{goodsList.length > 0}}">
  <view wx:for="{{goodsList}}" wx:key="id" class="goods-item">
    <text>{{item.name}}</text>
    <text>¥{{item.price}}</text>
  </view>
</view>
<view wx:else>暂无商品数据</view>

/* pages/goods/goods.wxss */
.goods-item {
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

场景三：动态更新与数据缓存（优化用户体验）

频繁请求远程接口会影响性能,可通过数据缓存和定时更新优化体验。

使用`wx.setStorageSync`缓存接口数据

首次请求后,将数据缓存到本地，后续优先读取缓存，同时定时拉取最新数据：

// pages/index/index.js
const CACHE_KEY = 'homeBannerData'; // 缓存key
const CACHE_EXPIRE = 3600 * 1000; // 缓存过期时间（1小时）
Page({
  data: {
    bannerList: []
  },
  onLoad() {
    this.fetchBannerData();
  },
  fetchBannerData() {
    // 1. 先读取缓存
    const cachedData = wx.getStorageSync(CACHE_KEY);
    if (cachedData && Date.now() - cachedData.timestamp < CACHE_EXPIRE) {
      this.setData({ bannerList: cachedData.data });
      console.log('使用缓存数据');
      return;
    }
    // 2. 缓存过期或不存在，请求最新数据
    wx.request({
      url: 'https://your-api-domain.com/api/banner',
      success: (res) => {
        if (res.statusCode === 200 && res.data.code === 0) {
          const newData = res.data.data;
          // 更新页面数据
          this.setData({ bannerList: newData });
          // 存储到缓存（带时间戳）
          wx.setStorageSync(CACHE_KEY, {
            data: newData,
            timestamp: Date.now()
          });
        }
      }
    });
  }
});

定时更新数据

通过setInterval定时触发数据更新（如每5分钟刷新一次）：

onLoad() {
  this.fetchBannerData();
  // 每5分钟更新一次数据
  this.updateTimer = setInterval(() => {
    this.fetchBannerData();
  }, 5 * 60 * 1000);
},
onUnload() {
  // 页面卸载时清除定时器
  clearInterval(this.updateTimer);
}

注意事项与最佳实践

域名合法性：远程接口域名必须在小程序后台配置，且支持HTTPS。
错误处理：wx.request需处理success和fail回调，避免因网络异常导致页面空白。
数据安全：敏感数据（如用户Token）应通过Header传递，避免在URL或Body中明文暴露。
性能优化：
- 静态数据优先使用本地JSON,减少请求。
- 频繁访问的数据使用缓存,设置合理的过期时间。
- 避免在onLoad中发起过多并发请求，可采用队列或分页加载。