鸿蒙大作业，一个简单的基于JS的聊天应用
环境搭建
软件要求
- DevEco Studio版本：DevEco Studio 3.1 Release。
- HarmonyOS SDK版本：API version 9。
硬件要求
- 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
- HarmonyOS系统：3.1.0 Developer Release。
环境搭建
- 安装DevEco Studio，详情请参考下载和安装软件。
- 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
- 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
- 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
- 开发者可以参考以下链接，完成设备调试的相关配置：
相关概念
简要介绍
主要分为登录界面和聊天界面两部分，下面是代码展示和运行实现
登录界面
代码展示
.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;
}
}运行实现
总结
通过本次学习，了解了一些新的组件的使用方法，更加深入的学习了鸿蒙的相关知识，后续会继续学习，添加一些新的功能。