【Axure教程】用中继器做聊天对话APP(微信案例)

简介: 【Axure教程】用中继器做聊天对话APP(微信案例)

今天教大家用Axure做一个聊天对话界面,其中效果包括:1、查看不同人不同的聊天记录;2、未查看聊天记录提醒;3、对话内容文本框自适应中文字数,自动更改尺寸;4、发送新的聊天内容,即使更新列表。

该原型使用简单,只需要填写中继器表格即可直接使用。


【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/d5bffab0c12acc18

【原型下载】

方式2:https://weidian.com/item.html?itemID=3379868676

【原型效果】

【使用方法】

制作完成后,只需要填写一个“内容中继器”既可以完成此效果,非常方便。中继器内容包括头像,名称、日期,对话内容。

【制作教程】

1. 中继器材料

列表中继器材料:头像图片、名称文本、最后一条聊天记录文本、时间,提示红点。

如下所示:

640.png

对话记录中继器材料:我的头像和对话框,对方的头像(图片文件即可,交互是会重新设置)和对话框。如下所示

640.png

2. 列表中继器表格制作

no:序号列,我们按顺序1、2、3、4、5排列下去即可。中继器每项加载时,按no升序排列。然后鼠标单击列表中继器里的内容时,设置其他当前行的序号为1,其他行的序号在原来的序号+1,这样就可以点击之后,让他排到最前了、

picture:图片,这里导入每个人的图片。中继器加载时,设置头像图片=picture

name:名称,这里写入每个人的名称,中继器加载时,设置名称文本=name

time:时间,这里输入最后对话时间,中继器加载时,设置时间=tmie

number:这个是未查看的新信息,中继器加载时,如果number=0隐藏提示红点,否则设置红点文本=number

textme1-10:这个是记录我方对话记录,后续会用到。这里需要做一个判断,如果这条是最后一条,则设置最后一条聊天记录等于此文本

text1-10:这个是对方的对话记录,后续用到。这里需要做一个判断,如果这条是最后一条,则设置最后一条聊天记录等于此文本

3. 对话记录中继器表格制作

这个很简单,只需要两行,而且什么都不用填,交互的上后,列表中继器会把内容传过来。

who:指代我方还是对方,如果who=me,指代我方,隐藏对方头像和对话框,如果不是who不等于me就是对方,隐藏我方头像和对话框。

content:对话内容,设置我方和对方的文本框内容=content即可,因为另一个隐藏了,所以为了方便快捷,直接设置两个都是,就可以不用分情况。然后这里要做一个自适应才美观,首先用length函数计算出content的字符长度,再按照不同长度的字符设置文本框的尺寸即可。

4. 点击列表进入详细页面

这个交互有点复杂,简单的说一下思路,其实就是把列表中继器里的text1-10和textme1-10,添加到对话记录的中继器里面。

实现方式是鼠标单击列表某一行时,依次在对话记录中继器内添加行即可。text1-10,who为空,content=text;textme,who=me,content=textme

完成后隐藏列表中继器,显示对话记录中继器即可。

5. 发送消息

这里首先要做一个输入框和按钮,样式如下:

ec612bd6a4b30900df458f5263aaa52a.png

点击发送按钮的时候,对话记录中继器新增一行,who=me,content=输入框的内容。然后清空文本框文字即可。

最后还有最重要的一步,也是最难的一步。因为这个中继器不会保存,所以我们返回到列表就没有了,这时要把这里新增的信息更新到列表中继器里面。因为这里都是我方发出去的,所以只需要更新行textme1-10的内容就可以了。这里需要做一个判断,就是textme和text最后一组对话时哪组,然后更新内容到后面一组即可完成。

那么今天的教程到此介绍,我们下期见。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
23天前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
32 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
23天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
35 0
|
23天前
|
小程序
【微信小程序-原生开发】实用教程21 - 分包
【微信小程序-原生开发】实用教程21 - 分包
24 0
|
23天前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
58 0
|
23天前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
17 0
|
23天前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
13 0
|
23天前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
19 0
|
23天前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
20 0
|
23天前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
17 0
|
23天前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
19 0

热门文章

最新文章