序文
uni-app は、次の 2 つの方法でローカルの json データ ファイルを読み取ることができます。
- ファイルのサフィックスは .json 型です
- ファイルのサフィックスは .js 型
特定のデモ コード
1. ファイルのサフィックスは .json
非 H5 側では、このタイプのファイルは現在 require を使用してのみインポートでき、インポート後はオブジェクト タイプになります。import は json ファイルをインポートできません。
① プロジェクトのルートディレクトリ配下に新規ディレクトリデータを作成します。
②データディレクトリに、新規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 メソッドを使用して必要なページにインポートしますが、インポートでは json ファイルをインポートできません。実装は次のとおりです。
① プロジェクトのルートディレクトリ配下に新規ディレクトリデータを作成します。
② 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>方法 2 (推奨)
// 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 側でのみ導入して使用できます。