uniapp如何讀取本地json數據文件并渲染到頁面上

uni-app讀取本地json數據文件，有下面兩種方式可以實現：

• 文件后綴為.json類型
• 文件后綴為.js類型

1、文件后綴為.json類型

非H5端，這種類型的文件，目前只能使用require進行導入，導入后為一個對象類型。愛掏網 - it200.comimport無法導入json文件。愛掏網 - it200.com

① 在項目根目錄下，新建一個目錄data。愛掏網 - it200.com

② 在data目錄下，新建一個cityData.json文件，寫上本地模擬json數據，注意文件后綴為json。愛掏網 - it200.com

// cityData.json
// 必須是""格式，否則報錯
[
  {"id":"1","city":"深圳"}, {"id":"2","city":"廣州"}
]

③ 在index.vue頁面引入并使用。愛掏網 - it200.com

H5端，可以引入jq，使用jq的AJAX讀取本地的json文件。愛掏網 - it200.com

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

2、文件后綴為.js類型

在js文件中寫入json數據，使用export導出。愛掏網 - it200.com在需要的頁面中用import方式進行導入，import無法導入json文件。愛掏網 - it200.com實現如下：

① 在項目根目錄下，新建一個目錄data。愛掏網 - it200.com

② 在data目錄下，新建一個data.js文件，注意文件后綴為js。愛掏網 - it200.com

③ 在data.js頁面中寫上本地模擬json數據，并導出。愛掏網 - it200.com

④ 在index.vue頁面引入并使用。愛掏網 - it200.com

方式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端引入使用。愛掏網 - it200.com