Ionic—聊天机器人模块开发

最新推荐文章于 2024-05-29 09:38:29 发布

汪喆_Jack

最新推荐文章于 2024-05-29 09:38:29 发布

阅读量321

点赞数

分类专栏： Ionic 文章标签： Ionic

本文链接：https://blog.csdn.net/qq_34829447/article/details/85148748

版权

Ionic 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.聊天模块页面列表设计与开发

1.开发设计

开发内容：开发聊天用户的列表布局与绑定
ion-item上使用click事件不是太好，故直接navPush属性设置点击跳转到的组件，通过navParam属性设置点击跳转组件时传递的参数
```
<ion-item [navPush]="ChatdetailsPage" [navParam]="userInfo.userId">
```
创建聊天详情页面ionic g page chatdetails

2.实例代码

chatbubbles.html

<ion-header>
  <ion-navbar>
    <ion-title>冒泡</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item [navPush]="ChatdetailsPage" [navParams]="userInfo">
      <ion-avatar item-left>
        <img src="">
      </ion-avatar>
      <h2>迪丽热巴</h2>
      <p>热巴小姐姐Q你了一下哦~</p>
    </ion-item>
  </ion-list>
</ion-content>

chatbubbles.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {ChatdetailsPage} from '../chatdetails/chatdetails';

@Component({
  selector: 'page-chatbubbles',
  templateUrl: 'chatbubbles.html',
})
export class ChatbubblesPage {

  userInfo:any;
  ChatdetailsPage:any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
    ) {
      //模拟返回聊天用户列表
      this.userInfo = {
        userId:'1',
        userName:'迪丽热巴',
      }
      this.ChatdetailsPage = ChatdetailsPage;
    }
}

二.聊天对话页面布局

1.开发设计

获得传递过来的username并显示在最上方navParams.get('userName')
编写消息聊天布局内容

2.实例代码

chatdeatils.html

<ion-header>
  <ion-navbar>
    <ion-title>{{chatUserName}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="message-wrap">
    <div class="message right">
      <img src="../../assets/imgs/logo.png" class="user-img"/>
      <div class="msg-detail">
        <div class="msg-info">
          <p>Jack&nbsp;1分钟前</p>
        </div>
        <div class="msg-content">
          <p class="line-breaker">自己发的消息内容</p>
        </div>
      </div>
    </div>
  </div>
</ion-content>

chatdetails.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-chatdetails',
  templateUrl: 'chatdetails.html',
})
export class ChatdetailsPage {

  chatUserName:string;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController) {
      //获得传递过来的username
      this.chatUserName = navParams.get('userName')
  }
}

chatdetails.scss

page-chatdetails {
    $userBackgroundColor: #387ef5;
    $toUserBackgroundColor: #fff;
    ion-content .scroll-content {
      background-color: #f5f5f5;
    }
    ion-footer {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.11);
      background-color: #fff;
      height: 255px;
    }
    .line-breaker {
      white-space: pre-line;
    }
    .input-wrap {
      padding: 0 5px;
      ion-textarea {
        position: static;
      }
      ion-col.col {
        padding: 0;
      }
      button {
        width: 100%;
        height: 55px;
        font-size: 1.3em;
        margin: 0;
      }
      textarea {
        border-bottom: 1px #387ef5;
        border-style: solid;
      }
    }
    .message-wrap {
      padding: 0 10px;
      .message {
        position: relative;
        padding: 7px 0;
        .user-img {
          position: absolute;
          border-radius: 45px;
          width: 45px;
          height: 45px;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
        }
        .msg-detail {
          width: 100%;
          display: inline-block;
          p {
            margin: 0;
          }
          .msg-info {
            p {
              font-size: .8em;
              color: #888;
            }
          }
          .msg-content {
            position: relative;
            margin-top: 5px;
            border-radius: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            color: #fff;
            width: auto;
            span.triangle {
              background-color: #fff;
              border-radius: 2px;
              height: 8px;
              width: 8px;
              top: 12px;
              display: block;
              border-style: solid;
              border-color: #ddd;
              border-width: 1px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              position: absolute;
            }
          }
        }
      }
      .message.left {
        .msg-content {
          background-color: $toUserBackgroundColor;
          float: left;
        }
        .msg-detail {
          padding-left: 60px;
        }
        .user-img {
          left: 0;
        }
        .msg-content {
          color: #343434;
          span.triangle {
            border-top-width: 0;
            border-right-width: 0;
            left: -5px;
          }
        }
      }
      .message.right {
        .msg-detail {
          padding-right: 60px;
          .msg-info {
            text-align: right;
          }
        }
        .user-img {
          right: 0;
        }
        ion-spinner {
          position: absolute;
          right: 10px;
          top: 50px;
        }
        .msg-content {
          background-color: $userBackgroundColor;
          float: right;
          span.triangle {
            background-color: $userBackgroundColor;
            border-bottom-width: 0;
            border-left-width: 0;
            right: -5px;
          }
        }
      }
    }  
}

三.聊天对话页面底部输入框设计

1.开发设计

输入框以及表情选择页面的输入与开发
开发技巧
- 开发底栏组件使用ion-footer
- ionic没有边框的属性:no-border
- 使用ion-grid/ion-row/ion-col实现响应式编程

2.实例代码

chatdetails.html

<ion-header>
  <ion-navbar>
    <ion-title>{{chatUserName}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="message-wrap">
    <div class="message right">
      <img src="../../assets/imgs/logo.png" class="user-img"/>
      <div class="msg-detail">
        <div class="msg-info">
          <p>Jack&nbsp;1分钟前</p>
        </div>
        <div class="msg-content">
          <p class="line-breaker">Hi,热巴小姐姐</p>
        </div>
      </div>
    </div>
  </div>
</ion-content>
<!-- ionic没有边框的属性:no-border -->
<ion-footer no-border style="height: 55px;">
  <ion-grid class="input-wrap">
    <ion-row>
      <ion-col col-2>
        <button ion-button clear ion-only item-right>
          <ion-icon name="md-happy"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-8>
        <ion-textarea placeholder="请输入内容"></ion-textarea>
      </ion-col>
      <ion-col col-2>
        <button ion-button clear ion-only item-right>
          <ion-icon name="send"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

四.聊天对话页面表情输入模块的开发

1.开发思路

创建providers用于获得emoji表情ionic g provider emoji

2.实例代码

emoji.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class EmojiProvider {

  constructor(public http: HttpClient) {
    console.log('Hello EmojiProvider Provider');
  }

  //获取所有表情的数组（已经分组好了的）
  getEmojis() {
    const EMOJIS = "? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?" +
      " ☹️ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?" +
      " ? ? ? ? ? ☠️ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ✊ ? ? ? ✌️ ? ? ? ? ? ? ☝️ ✋ ?" +
      " ? ? ? ? ? ? ✍️ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?‍♀️ ? ? ? ? ?‍♀️ ? ?‍♀️ ? ?‍♀️ ?" +
      " ?‍♀️ ? ?️‍♀️ ?️ ?‍⚕️ ?‍⚕️ ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍? ?‍?" +
      " ?‍? ?‍? ?‍? ?‍? ?‍✈️ ?‍✈️ ?‍? ?‍? ?‍⚖️ ?‍⚖️ ? ? ? ? ? ? ? ? ?‍♀️ ? ? ?‍♂️ ? ?‍♂️ ? ?‍♂️ ? ?‍♂️ ?‍♀️ ?‍♂️ ?‍♀" +
      "️ ?‍♂️ ? ?‍♂️ ? ?‍♂️ ? ?‍♂️ ? ?‍♂️ ? ? ? ? ?‍♂️ ?‍♀️ ? ?‍♀️ ? ? ? ? ? ?‍❤️‍? ?‍❤️‍? ? ?‍❤️‍?‍? ?‍❤️‍?‍? ? ?‍?‍?" +
      " ?‍?‍?‍? ?‍?‍?‍? ?‍?‍?‍? ?‍?‍? ?‍?‍? ?‍?‍?‍? ?‍?‍?‍? ?‍?‍?‍? ?‍?‍? ?‍?‍? ?‍?‍?‍? ?‍?‍?‍? ?‍?‍?‍? ?‍? ?‍?" +
      " ?‍?‍? ?‍?‍? ?‍?‍? ?‍? ?‍? ?‍?‍? ?‍?‍? ?‍?‍? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⛑ ? ? ? ? ? ?" +
      " ? ? ☂️";

    //进行分组的操作
    let array = EMOJIS.split(' ');
    let groupNumber = Math.ceil(array.length / 24); //四舍五入，尽量取大数 15.1->16 , 15.6->16
    let items = [];

    //分组填充表情
    for (let i = 0; i < groupNumber; i++) {
      items.push(array.slice(24 * i, 24 * (i + 1)))
    }
    return items;
  }
}

未完待续…

五.聊天对话页面自动回复逻辑开发

未完待续…

汪喆_Jack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionic—聊天机器人模块开发

一.聊天模块页面列表设计与开发1.开发设计开发内容：开发聊天用户的列表布局与绑定ion-item上使用click事件不是太好，故直接navPush属性设置点击跳转到的组件，通过navParam属性设置点击跳转组件时传递的参数&lt;ion-item [navPush]="ChatdetailsPage" [navParam]="userInfo.userId"&gt;创建聊...
复制链接

扫一扫