前言
uni-app读取本地json数据文件，有下面两种方式可以实现：
- 文件后缀为.json类型
- 文件后缀为.js类型
具体演示代码
1、文件后缀为.json类型
非H5端，这种类型的文件，目前只能使用require进行导入，导入后为一个对象类型。import无法导入json文件。
① 在项目根目录下，新建一个目录data。
② 在data目录下，新建一个cityData.json文件，写上本地模拟json数据，注意文件后缀为json。
// cityData.json
// 必须是""格式，否则报错
[
{"id":"1","city":"深圳"}, {"id":"2","city":"广州"}
]③ 在index.vue页面引入并使用。
<template>
<view v-for="item in localData">
<text>{
{item.name}}</text>
</view>
</template>
<script>
const cityData = require('@/data/cityData.json')
export default {
data() {
return {
localData: cityData
}
},
onLoad() {
console.log('cityJson:'+JSON.stringify(cityData));
//=>cityJson:[{id:'',city:''},{id:'',city:''}]
}
}
</script>H5端，可以引入jq，使用jq的AJAX读取本地的json文件。
$.getJSON('../../data/cityData.json').then((res)=>{
console.log('cityJson:'+JSON.stringify(res));
});
//=>cityJson:[{id:'',city:''},{id:'',city:''}]2、文件后缀为.js类型
在js文件中写入json数据，使用export导出。在需要的页面中用import方式进行导入，import无法导入json文件。实现如下：
① 在项目根目录下，新建一个目录data。
② 在data目录下，新建一个data.js文件，注意文件后缀为js。
③ 在data.js页面中写上本地模拟json数据，并导出。
④ 在index.vue页面引入并使用。
方式1
// data.js
const cityData = [
{id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
module.exports = {
cityData: cityData
}
// index.vue
<template>
<view v-for="item in localData">
<text>{
{item.city}}</text>
</view>
</template>
<script>
import data from "@/data/data.js"
export default {
data() {
return {
localData: data.cityData
}
},
}
</script>方式二（推荐）
// data.js
const cityData = [
{id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
function refresh(){
return ''
}
export {
cityData,
refresh
}
// index.vue
<template>
<view v-for="item in localData">
<text>{
{item.city}}</text>
</view>
</template>
<script>
import {cityData, refresh} from "@/data/data.js"
export default {
data() {
return {
localData: cityData
}
},
onLoad() {
console.log(refresh())
console.log(JSON.stringify(cityData))
},
}
</script>注意事项
uni.request()是无法读取本地的js文件和json文件的，jq是能读取的，但是jq只能在H5端引入使用。