微信小程序引用本地js里的json数据

最新推荐文章于 2023-08-08 11:08:44 发布

原创最新推荐文章于 2023-08-08 11:08:44 发布 · 4k 阅读

9 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在微信小程序中引用并使用data.js文件中存储的本地json数据，通过数据绑定到category.js页面中实现数据展示。

1.data.js(本地js里的json数据)，位于项目更目录下

var data = [
	 {
      "name": "女装",
      "foods": [
          {
            "name": "A字裙",
            "key": "A字裙",
            "icon": "http://img.kiwifruits.cn/classify/1/1.jpg",
            "cat": 10
          },
          {
            "name": "T恤",
            "key": "T恤",
            "icon": "http://img.kiwifruits.cn/classify/1/2.jpg",
            "cat": 10
          },
          {
            "name": "半身裙",
            "key": "半身裙",
            "icon": "http://img.kiwifruits.cn/classify/1/3.jpg",
            "cat": 10
          },
          {
            "name": "衬衫",
            "key": "衬衫",
            "icon": "http://img.kiwifruits.cn/classify/1/4.jpg",
            "cat": 10
          },
          {
            "name": "短裙",
            "key": "短裙",
            "icon": "http://img.kiwifruits.cn/classify/1/5.jpg",
            "cat": 10
          },
          {
            "name": "阔腿裤",
            "key": "阔腿裤",
            "icon": "http://img.kiwifruits.cn/classify/1/6.jpg",
            "cat": 10
          },
          {
            "name": "连衣裙",
            "key": "连衣裙",
            "icon": "http://img.kiwifruits.cn/classify/1/7.jpg",
            "cat": 10
          },
          {
            "name": "妈妈装",
            "key": "妈妈装",
            "icon": "http://img.kiwifruits.cn/classify/1/8.jpg",
            "cat": 10
          },
          {
            "name": "牛仔裤",
            "key": "牛仔裤",
            "icon": "http://img.kiwifruits.cn/classify/1/9.jpg",
            "cat": 10
          },
          {
            "name": "情侣装",
            "key": "情侣装",
            "icon": "http://img.kiwifruits.cn/classify/1/10.jpg",
            "cat": 10
          },
          {
            "name": "休闲裤",
            "key": "休闲裤",
            "icon": "http://img.kiwifruits.cn/classify/1/11.jpg",
            "cat": 10
          }
      ]
   }
]

 //数据暴露出去
module.exports = {  
    data: data
}

2、数据绑定category.js (pages/category/category.js)

var postsData=require('../../data/data.js');  //引入
  data: { 
          classifData: []
  },
  /**
   * 生命周期函数--监听页面加载 页面初始化  on开头的函数监听函数
   */
  onLoad: function (options) {
 
    this.setData({
			 classifData: classifData.data
	});  
  }