uni-app 新建本地模拟json数据教程

在开发app中,往往后端对丢我们接口,如果后端没有提供。那么前端都会自己模拟数据,自己调试,这就是传说中的(自己ri自己吧),玩的可嗨了。昨天一个朋友联系了枫瑞,做一个毕业毕业设计,因为对方啥也没给我,如果自己搞一个服务器搭建一个后台管理系统在来测试,显的麻烦了。uni-app 新建本地模拟json数据教程

uni-app 新建本地模拟json数据教程

1.建立json数据

首先我们新建一个component目录,以及一个json.js文件 注意是后缀js不是josn

// 本地模拟json数据
let data = [{
  "id"	: 1,
  "name":'张三'
},
{
  "id"	: 2,
  "name":'里斯'
},
{
  "id"	: 3,
  "name":'试试'
},
{
  "id"	: 4,
  "name":'发文'
}
]

随意写上一些内容后,我们自定义一个出口

// 定义数据出口
module.exports = {
  data: data
}

2.首页引入

开头导入文件

import fengrui from "../../component/json.js"

别忘了还有return

data() {
	return {
		title: 'Hello',
		shuju: fengrui
	}
},

写在view上看看效果

<text class="title">{{shuju}}</text>

会出来[object Object]  那就木有问题了

uni-app 新建本地模拟json数据教程

 

3.打印数据

如果要在控制台打印的话

onLoad() {
	console.log(this.shuju.data)
},

uni-app 新建本地模拟json数据教程

 

 如果需要相关案例源码 请关注“枫瑞博客网”微信公众号 回复“uni本地数据”进行下载

uni-app 新建本地模拟json数据教程

(0)
枫瑞博客枫瑞博客
上一篇 2019-11-21 09:11
下一篇 2019-12-13 05:40

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注