位置: IT常识 - 正文
uni-app读取本地json数据文件，并渲染到页面上。(uniapp获取当前url)
发布时间：2024-01-08推荐整理分享uni-app读取本地json数据文件，并渲染到页面上。(uniapp获取当前url)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp读取文件,uniapp获取数据,uniapp加载本地html,uniapp获取当前url,uniapp读取本地json数据,uniapp读取本地文件,uniapp读取本地json数据,uniapp读取本地json数据,内容如对您有帮助，希望把文章链接给更多的朋友！
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.jsconst 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.jsconst 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端引入使用。
上一篇：annaconda 安装 opencv（cv2）(annaconda安装opencv)
下一篇：黑沙滩上Reynisdrangar的玄武岩，冰岛 (© Cavan Images/Getty Images)(黑沙滩是什么意思)
