uni-app读取本地json数据文件，并渲染到页面上。

时间：2025-01-30 13:32:42

前言

uni-app读取本地json数据文件，有下面两种方式可以实现：

  • 文件后缀为.json类型
  • 文件后缀为.js类型

具体演示代码

1、文件后缀为.json类型

非H5端，这种类型的文件，目前只能使用require进行导入，导入后为一个对象类型。import无法导入json文件。

① 在项目根目录下，新建一个目录data。

② 在data目录下，新建一个文件，写上本地模拟json数据，注意文件后缀为json。

// 
// 必须是""格式，否则报错
[
  {"id":"1","city":"深圳"}, {"id":"2","city":"广州"}
]

③ 在页面引入并使用。

<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>

<script>
  const cityData = require('@/data/')
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      ('cityJson:'+(cityData));
      //=>cityJson:[{id:'',city:''},{id:'',city:''}]
    }
  }
</script>

H5端，可以引入jq，使用jq的AJAX读取本地的json文件。

$.getJSON('../../data/').then((res)=>{
  ('cityJson:'+(res));
});
//=>cityJson:[{id:'',city:''},{id:'',city:''}]

2、文件后缀为.js类型

在js文件中写入json数据，使用export导出。在需要的页面中用import方式进行导入，import无法导入json文件。实现如下：

① 在项目根目录下，新建一个目录data。

② 在data目录下，新建一个文件，注意文件后缀为js。

③ 在页面中写上本地模拟json数据，并导出。

④ 在页面引入并使用。

方式1

// 
const cityData = [
  {id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
 = {
  cityData: cityData
}


// 
<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>

<script>
  import data from "@/data/"
  export default {
    data() {
      return {
        localData: 
      }
    },
  }
</script>

方式二（推荐）

// 
const cityData = [
  {id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
function refresh(){
 return ''
}
export {
  cityData,
  refresh
}


// 
<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>

<script>
  import {cityData, refresh} from "@/data/"
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      (refresh())
      ((cityData))
    },
  }
</script>

注意事项

()是无法读取本地的js文件和json文件的，jq是能读取的，但是jq只能在H5端引入使用。

相关文章