欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上

 更新時間:2022年08月19日 08:45:15   作者:也?簡  
在做前端開發(fā)的時候,少不了要用一些模擬的json的數(shù)據(jù)來進(jìn)行測試,這篇文章主要給大家介紹了關(guān)于uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上的相關(guān)資料,需要的朋友可以參考下

前言

uni-app讀取本地json數(shù)據(jù)文件,有下面兩種方式可以實(shí)現(xiàn):

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

具體演示代碼

1、文件后綴為.json類型

非H5端,這種類型的文件,目前只能使用require進(jìn)行導(dǎo)入,導(dǎo)入后為一個對象類型。import無法導(dǎo)入json文件。

① 在項(xiàng)目根目錄下,新建一個目錄data。

② 在data目錄下,新建一個cityData.json文件,寫上本地模擬json數(shù)據(jù),注意文件后綴為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數(shù)據(jù),使用export導(dǎo)出。在需要的頁面中用import方式進(jìn)行導(dǎo)入,import無法導(dǎo)入json文件。實(shí)現(xiàn)如下:

① 在項(xiàng)目根目錄下,新建一個目錄data。

② 在data目錄下,新建一個data.js文件,注意文件后綴為js。

③ 在data.js頁面中寫上本地模擬json數(shù)據(jù),并導(dǎo)出。

④ 在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>

注意事項(xiàng)

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

總結(jié)

到此這篇關(guān)于uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上的文章就介紹到這了,更多相關(guān)uni-app讀取本地json數(shù)據(jù)文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論