uni-app读取本地json数据文件
也•简 人气:0前言
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端引入使用。
总结
加载全部内容