uniall（uni-app读取本地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.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端引入使用














。