uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上
前言
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)文章
微信小程序?qū)崿F(xiàn)聊天界面發(fā)送功能(示例代碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)聊天界面發(fā)送功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07淺談JavaScript 函數(shù)參數(shù)傳遞到底是值傳遞還是引用傳遞
下面小編就為大家?guī)硪黄獪\談JavaScript 函數(shù)參數(shù)傳遞到底是值傳遞還是引用傳遞。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08使用JavaScript實(shí)現(xiàn)LRU緩存的代碼詳解
LRU(Least?Recently?Used)算法是一種廣泛應(yīng)用于內(nèi)存管理和緩存系統(tǒng)的策略,本文將介紹LRU算法的基本原理,并通過JavaScript實(shí)現(xiàn)案例,幫助讀者理解其在前端開發(fā)中的應(yīng)用場景,需要的朋友可以參考下2024-05-05React+Typescript實(shí)現(xiàn)倒計時Hook的方法
本文主要介紹了React+Typescript實(shí)現(xiàn)倒計時Hook的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09javascript實(shí)現(xiàn)復(fù)選框超過限制即彈出警告框的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)復(fù)選框超過限制即彈出警告框的方法,涉及復(fù)選框及警告框的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02JavaScript異步編程:異步數(shù)據(jù)收集的具體方法
我們先嘗試在不借助任何工具函數(shù)的情況下來解決這個問題。筆者能想到的最簡單的方法是:因前一個readFile的回調(diào)運(yùn)行下一個readFile,同時跟蹤記錄迄今已觸發(fā)的回調(diào)次數(shù),并最終顯示輸出。下面是筆者的實(shí)現(xiàn)結(jié)果。2013-08-08