如何用uni-app读取本地json文件，并将其内容动态渲染到页面上？

本文共计697个文字，预计阅读时间需要3分钟。

目录+前言+具体演示+代码+1、文件后缀为.json类型+2、文件后缀为.js类型+注意事项+总结+前言+uni-app读取本地json数据，有以下两种方式实现：+1、文件后缀为.json类型+2、文件后缀为.js类型

目录

• 前言
• 具体演示代码
• 1、文件后缀为.json类型
• 2、文件后缀为.js类型
• 注意事项
• 总结

前言

uni-app读取本地json数据文件，有下面两种方式可以实现：

• 文件后缀为.json类型
• 文件后缀为.js类型

具体演示代码

1、文件后缀为.json类型

非H5端，这种类型的文件，目前只能使用require进行导入，导入后为一个对象类型。import无法导入json文件。

① 在项目根目录下，新建一个目录data。

② 在data目录下，新建一个cityData.json文件，写上本地模拟json数据，注意文件后缀为json。