10、Flutter - 项目实战 - 仿微信（四）数据准备

Flutter - 项目实战 - 仿微信（四）数据准备

 

接上篇：9、Flutter - 项目实战 - 仿微信（三）我的页面

详细代码参见Demo

Demo地址 -> wechat_demo

 

其他相关联文章

7、Flutter - 项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示

8、Flutter - 项目实战 - 仿微信（二）发现页面

9、Flutter - 项目实战 - 仿微信（三）我的页面

10、Flutter - 项目实战 - 仿微信（四）数据准备

11、Flutter - 项目实战 - 仿微信（五）通讯录

12、Flutter - 项目实战 - 仿微信（六）聊天页面

 

 

项目实战之后会用到的例如会话列表页面的用户头像、用户名称、以及聊天内容这些都是随机生成的模拟数据

同时为了运用一下Flutter的网络请求需要接口，今天就来介绍几个网址创建模拟数据以及访问接口。

 

网络接口模拟数据

1、RAP2

网络接口，添加随机数据

地址：http://rap2.taobao.org

需要注册。

1.1、创建仓库

然后创建对应应用的的仓库

这里还可以添加多个人员，团队开始。因为就是一个demo 所以可以不用管那些，只需要填写一个仓库名称和简介（便于区分这个仓库是干什么的，都添加了什么接口），就行了。

 

1.2、新建接口

1.2、编辑接口

返回的是一个会话列表，所以最外层添加一个chat_list  Array,这里创建50条数据

然后数组中返回一个字典对象，包含3个属性。头像、名称、和消息

如上

头像：

https://randomuser.me/api/portraits/women/@natural(20,70).jpg

生成随机头像，生成的头像地址从 https://randomuser.me/api/portraits/women/20.jpg   到  https://randomuser.me/api/portraits/women/70.jpg  随机

名称：

@cname 就是生成随机的 中文名称

消息：

@cparagraph 是随机生产一段中文文字

 

如果直接点击接口地址，就可以看到请求到的数据格式

如上的 @cname  和  @cparagraph 是 Mock 语法

 

2、Mock

配合RAP2 使用的语法，生成随机数据

http://mockjs.com/

 

示例代码 http://mockjs.com/examples.html

中有多重用法，可以参阅

 

3、随机用户生成器

上面的头像是通过这个来生成的

https://randomuser.me/