您现在的位置是：网站首页> 编程资料编程资料

uni-app如何读取本地json数据文件并渲染到页面上_javascript技巧_

2023-05-24 445人已围观

简介 uni-app如何读取本地json数据文件并渲染到页面上_javascript技巧_

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

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

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

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

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

③ 在index.vue页面引入并使用。

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

$.getJSON('../../data/cityData.json').then((res)=>{ console.log('cityJson:'+JSON.stringify(res)); }); //=>cityJson:[{id:'',city:''},{id:'',city:''}]

在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

方式二（推荐）

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

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

到此这篇关于uni-app如何读取本地json数据文件并渲染到页面上的文章就介绍到这了,更多相关uni-app读取本地json数据文件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！