移动端安卓和IOS开发框架Framework7教程-聊天消息

消息组件为你的App提供了可视评论和消息系统。

消息组件布局

1. ...   
2. <div class="page">
3.   <div class="page-content messages-content">
4.     <div class="messages">
5.       <!-- 时间戳 -->
6.       <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
7.  
8.       <!-- 发送的消息 (默认为绿色背景，在右边) -->
9.       <div class="message message-sent">
10.         <!-- Bubble with text -->
11.         <div class="message-text">Hello</div>
12.       </div>
13.  
14.       <!-- 另一条发送的消息 -->
15.       <div class="message message-sent">
16.         <!-- 文本气泡 -->
17.         <div class="message-text">How are you?</div>
18.       </div>
19.  
20.       <!-- 接收的信息(默认为灰色背景，在左边) -->
21.       <div class="message message-with-avatar message-received">
22.         <!-- Sender name -->
23.         <div class="message-name">Kate</div>
24.  
25.         <!-- 文本气泡 -->
26.         <div class="message-text">I am fine, thanks</div>
27.  
28.         <!-- 发送者头像 -->
29.         <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
30.       </div>
31.  
32.       <!-- 另一个时间戳 -->
33.       <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
34.  
35.       <!-- Sent message with image -->
36.       <div class="message message-pic message-sent">
37.         <!-- Bubble with image -->
38.         <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
39.         <!-- Message label -->
40.         <div class="message-label">Delivered 2 days ago</div>
41.       </div>
42.     </div>
43.   </div>
44. </div>        
45. ...

复制

消息组件的页面布局:

• "messages-content" - 消息容器，应该加到"page-content"类上

• "messages" - 消息气泡的容器，必需

• "messages-date" - 单个时间戳容器，包含会话日期和时间（在<span>标签中）

• "message" - 单条消息

单条消息的内部结构:

• "message-name" - 发送者名称

• "message-text" - 文本气泡

• "message-avatar" - 发送者头像

• "message-label" - 气泡下的文本标签

单条消息容器的一些附加class

• "message-sent" - 标识一条被用户发送过的消息，它会位于容器的右侧并且拥有绿色的背景

• "message-received" - 标识一条被用户接收的消息，它会位于容器的左侧并且拥有灰色的背景

• "message-pic" - 为单条带<img>的消息添加类，除了image，该条消息不可以包括其他元素

• "message-with-avatar" - 包含头像

• "message-with-tail" - 包含一个小尾巴

单条消息的一个附加的class

• "message-hide-name" - 隐藏名字

• "message-hide-avatar" - 隐藏头像

• "message-hide-label" - 隐藏消息标签

• "message-last" - 如果这是一个发送者连续会话的最后一条，则带有一个小尾巴并且有更大的底部留白

• "message-first" - 如果这是一个发送者会话的第一条，则带有发送者的名称

In such default layout - new messages will appear on bottom of the page. If you need to have new messages on top of the page you need to use newMessagesFirst:true parameter when initializing Messages

Messages Auto Layout

消息自动布局

Framework7 may add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically. For this case we need to use autoLayout:true parameter when initializing Messages

1. ...   
2.       <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
3.  
4.       <div class="message message-sent">
5.         <div class="message-text">Hello</div>
6.       </div>
7.  
8.       <div class="message message-sent">
9.         <div class="message-text">How are you?</div>
10.       </div>
11.  
12.       <div class="message message-received">
13.         <div class="message-name">Kate</div>
14.         <div class="message-text">I am fine, thanks</div>
15.         <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
16.       </div>
17.  
18.       <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
19.  
20.       <div class="message message-sent">
21.         <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
22.         <div class="message-label">Delivered 2 days ago</div>
23.       </div>
24. ...

复制

That is all, Framework7 will add all required classes to these messages. You just need to keep "message-sent", "message-received" classes

Initialize Messages with JavaScript

Now, when we have Messages' HTML, we need to initialize it. We need to use related App's method:

myApp.messages(messagesContainer, parameters) - initialize Messages with options

• messagesContainer - HTMLElement or string (with CSS Selector) of Messages container HTML element. Required.
• parameters - object - object with Messages parameters. Optional.
• Method returns initialized Messages instance

For example:

1. var myMessages = app.messages('.messages', {
2.     autoLayout: true
3. });

复制

Note that Messages container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within  pageInit event or callback

Messages Parameters

Let's look on list of all available parameters:

Parameter Type Default Description

autoLayout	boolean	true	Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically
newMessagesFirst	boolean	false	Enable if you want to use new messages on top, instead of having them on bottom
messages	array		Array with initial messages. Each message in array should be presented as object with message parameters
messageTemplate	string	* Look bellow	Single message Template7 template

Message Template

You can modify message template by passing your custom Template7-formatted template. By default it is:

1. {{#if day}}
2. <div class="messages-date">{{day}} {{#if time}}, <span>{{time}}</span>{{/if}}</div>
3. {{/if}}
4. <div class="message message-{{type}} {{#if hasImage}}message-pic{{/if}} {{#if avatar}}message-with-avatar{{/if}} message-appear-
5.     {{#if name}}<div class="message-name">{{name}}</div>{{/if}}
6.     <div class="message-text">{{text}}</div>
7.     {{#if avatar}}<div class="message-avatar" style="background-image:url({{avatar}})"></div>{{/if}}
8.     {{#if label}}<div class="message-label">{{label}}</div>{{/if}}
9. </div>

复制

Messages Methods & Properties

After we initialize Messages we have its initialized instance in variable (like myMessages variable in example above) with helpful methods and properties:

Properties Methods

myMessages.params	Object with passed initialization parameters
myMessages.container	Dom7 element with messagebar container HTML element.
myMessages.addMessage(messageParameters, method, animate);	Add new message to the end or to the beginning depending on methodparameter messageParameters - object parameters of message to add. Required. method - string - ('append' or 'prepend') dictates to add new message in the end or in the beginning of messages container. Optional, if not specified, then it will add message depending on newMessagesFirstparameter animate - boolean - (by default true) You may pass here false and message will be added immediately without any transiton and scrolling animation. Optional. Method returns HTMLElement of added messsage
myMessages.appendMessage(messageParameters, animate);	Add new message to the end (to the bottom)
myMessages.prependMessage(messageParameters, animate);	Add new message to the beginning (to the top)
myMessages.addMessages(messages, method, animate);	Add multiple messages per once. messages - array with messages to add. Each message in array should be presented as object with message parameters Required. Method returns array of HTMLElements with added messsages
myMessages.removeMessage(message);	Remove message message - HTMLElement or string (with CSS Selector) of message element to remove. Required Method returns true if specified message was removed
myMessages.removeMessages(messages);	Remove multiple messages messages - array (with HTMLElements) or string (with CSS Selector) of messages to remove. Required Method returns true if specified messages was removed
myMessages.scrollMessages();	Scroll messages to top/bottom depending on newMessagesFirst parameter
myMessages.layout();	Apply messages auto layout
myMessages.clean();	Clean/remove all the messages
myMessages.destroy();	Destroy messages instance

Single Message Parameters

Let's look on single message parameters object that we should use to addMessage, appendMessage and prependMessage methods:

参数 类型 默认 说明

text	string		消息文本，也可以使用HTML字符串，如果你想要添加图片消息，则应该传递<img src="...">。必选
name	string		发送者名称。可选
avatar	string		发送者头像url。可选
type	string	'sent'	消息类型，'sent'或'received'。可选
label	string		Message label. Optional
day	string		日期，例如 - 'Today', 'Monday', 'Yesterday', 'Fri', '22.05.2014'。可选
time	string		Time string, for example - '22:45', '10:30 AM'. Optional

Initialize Messages with HTML

If you don't need to use Messages methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messages-init" class to .messages. In this case we may pass required parameters using data- attributes.

1. ...   
2.   <div class="page-content messages-content">
3.     <!-- Additional "messages-init" class-->
4.     <div class="messages messages-init" data-auto-layout="true" data-new-messages-first="false">
5.       <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
6.  
7.       <div class="message message-sent">
8.         <div class="message-text">Hello</div>
9.       </div>
10.  
11.       ...
12.  
13.     </div>
14.   </div>
15. ...

复制

Parameters that used in camelCase, for example autoLayout, in data- attributes should be used as hypens-case as data-auto-layout

Access to Messages's Instance

If you initialize Messages using HTML it is still possible to access to Messages's instance. It is "f7Messages" property of messages's container HTML element:

1. var myMessages = $$('.messages')[0].f7Messages;
2.  
3. // Now you can use it
4. myMessages.layout();

复制

Example

1. <div class="page toolbar-fixed">
2.   <div class="page-content messages-content">
3.     <div class="messages">
4.       <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
5.       <div class="message message-sent">
6.         <div class="message-text">Hello</div>
7.       </div>
8.       <div class="message message-sent">
9.         <div class="message-text">How are you?</div>
10.       </div>
11.       <div class="message message-received">
12.         <div class="message-name">Kate</div>
13.         <div class="message-text">I am fine, thanks</div>
14.         <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
15.       </div>
16.       <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
17.       <div class="message message-sent">
18.         <div class="message-text">Nice photo?</div>
19.       </div>
20.       <div class="message message-sent message-pic">
21.         <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
22.         <div class="message-label">Delivered</div>
23.       </div>
24.       <div class="message message-received">
25.         <div class="message-name">Kate</div>
26.         <div class="message-text">Wow, awesome!</div>
27.         <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
28.       </div>
29.     </div>
30.   </div>
31. </div>

复制

  实例预览

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. // 会话flag
6. var conversationStarted = false;
7.  
8. // Init Messages
9. var myMessages = myApp.messages('.messages', {
10.   autoLayout:true
11. });
12.  
13. // Init Messagebar
14. var myMessagebar = myApp.messagebar('.messagebar');
15.  
16. // Handle message
17. $$('.messagebar .link').on('click', function () {
18.   // Message text
19.   var messageText = myMessagebar.value().trim();
20.   // Exit if empy message
21.   if (messageText.length === 0) return;
22.  
23.   // Empty messagebar
24.   myMessagebar.clear()
25.  
26.   // 随机消息类型
27.   var messageType = (['sent', 'received'])[Math.round(Math.random())];
28.  
29.   // 接收的消息的头像和名称
30.   var avatar, name;
31.   if(messageType === 'received') {
32.     avatar = 'http://lorempixel.com/output/people-q-c-100-100-9.jpg';
33.     name = 'Kate';
34.   }
35.   // Add message
36.   myMessages.addMessage({
37.     // Message text
38.     text: messageText,
39.     // 随机消息类型
40.     type: messageType,
41.     // 头像和名称
42.     avatar: avatar,
43.     name: name,
44.     // 日期
45.     day: !conversationStarted ? 'Today' : false,
46.     time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
47.   })
48.  
49.   // 更新会话flag
50.   conversationStarted = true;
51. });

复制