『江鸟中原』鸿蒙---聊天应用（JS）

鸿蒙大作业，一个简单的基于JS的聊天应用

环境搭建

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release。
• HarmonyOS SDK版本：API version 9。

硬件要求

• 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
• HarmonyOS系统：3.1.0 Developer Release。

环境搭建

1. 安装DevEco Studio，详情请参考下载和安装软件。
2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：

• 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
• 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

3. 开发者可以参考以下链接，完成设备调试的相关配置：

• 使用真机进行调试
• 使用模拟器进行调试

相关概念

• input组件：交互式组件，包括单选框，多选框，按钮和单行文本输入框。
• 自定义组件：自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。

简要介绍

主要分为登录界面和聊天界面两部分，下面是代码展示和运行实现

登录界面

代码展示

.css文件

.container {
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-image: url('/common/images/launchPage/ic_launch_page.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.countdown-box {
    position: fixed;
    width: 72vp;
    height: 28vp;
    border-radius: 18vp;
    background-color: #9E9E9E;
    top: 10vp;
    right: 15vp;
    justify-content: center;
    align-items: center;
}

.countdown-text {
    text-align: center;
    font-size: 14fp;
    color: #FFFFFF;
    font-weight: 400;
}

.hml文件

<div class="container">
    <div class="countdown-box" @click="toHomePage">
        <text class="countdown-text">{{ $t('strings.skip') }}{{ countdown }}</text>
    </div>
</div>

.js文件

import router from '@ohos.router';
import CommonConstants from '../../common/constant/commonConstants';

export default {
  data: {
    countdown: CommonConstants.COUNTDOWN,
    timer: null
  },
  onShow() {
    this.timer = setInterval(() => {
      --this.countdown;
      if (this.countdown === 0) {
        this.toHomePage();
      }
    }, 1000);
  },
  toHomePage() {
    clearInterval(this.timer);
    router.replace({
      url: CommonConstants.ROUTER_HOME_PAGE
    });
  }
}

运行实现

聊天界面

代码展示

.css文件

.chat-container {
    display: flex;
    flex-direction: column;
    height: 500px;
}

 .chat-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     background-color: #f1f1f1;
 }

 .chat-messages {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
 }

 .message {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 }

 .message-sender {
     font-weight: bold;
 }

 .message-content {
     margin-left: 10px;
 }

 .chat-input {
     margin-top: 20px;
 }

.hml文件

  <div class="chat-container">
        <div class="chat-header">
            <image style="width: 50px; height: 50px; " src="../../common/images/my/ic_person.png"></image>
            <button @click="toggleChat">Toggle Chat</button>
        </div>
        <div class="chat-messages" if="{{showChat}}">
            <div class="message" for="{{message in messages}}" >
                <text class="message-sender">{{ $t(message.sender) }}</text>
                <text class="message-content">{{ $t(message.content) }}</text>
            </div>
        </div>
        <div class="chat-input" if="{{showChat}}">
            <input type="text" value="{{newMessage}}" onchange="changeModel" placeholder="Type your message here..." />
            <button @click="sendMessage">Send</button>
        </div>
    </div>

.js文件

export default {
  data: {
    showChat: true,
    messages: [
      {
        id: 1, sender: 'Alice', content: 'Hello Bob!'
      },
      {
        id: 2, sender: 'Bob', content: 'Hello Alice!'
      },
      {
        id: 3, sender: 'Alice', content: 'How are you doing?'
      },
      {
        id: 4, sender: 'Bob', content: 'Im doing well. How about you?'
      }
    ],
    newMessage: ''
  },


  toggleChat() {
    this.showChat = !this.showChat;
  },
  sendMessage() {
    const message = { id: Date.now(), sender: 'Alice', content: this.newMessage };
    this.messages.push(message);
    this.newMessage = '';
  },
  changeModel(val_obj){
    this.newMessage = val_obj.text;
  }

}

运行实现

总结

通过本次学习，了解了一些新的组件的使用方法，更加深入的学习了鸿蒙的相关知识，后续会继续学习，添加一些新的功能。