『牛角书』HarmonyOS鸿蒙实战开发一个简单聊天助手APP

前言

我是通过b站上面老师的讲解，跟着老师编写了一个简单聊天助手app，简答实用，对于刚开始接触鸿蒙的我们来说很有帮助。

创建项目

所用软件为DevEco Studio，点击Create HarmonyOS Project，这里选择了第一个空的项目，点击next会跳至下一个页面。

这里是项目的名称，因为是一个demo，就没有改变项目名字。sdk用的最新版，面对手机的一个项目，选择完毕后点击finish完成项目创建。
在这里插入图片描述
这样一个简单项目就创建好了。

index.hml

<div class="container"><div class="search-box"><input class="search_input"type="text" onchange="getInput" >你好</input><button class:"search_bt" onclick="quuery">搜索</button></div>
<div class:"concat_main"><div class:"concat item"><div class:"duihua"><image src="/common/inages/ic_boy.png" class="ic_boy_girl"></image> <text>你好c/text><image src="/common/inages/copy.png"></image></div><div><image src="/common/inages/ic_boy.pnq"></imaqe> <text>请直奔主题，不想说这种客套话</text><image src="/common/images/copy.png"></image></div></div></div>
</div>
<list><list-item class "concat_item" for="{{ item in concats }}"><list-item class="duihua" for="{{ juzi in item }}"><image src="/common/images/ic_girl.png"class="ic_boy_girl”if="l juzi.ansSex == 2 }}">         </image<image src:"/common/images/ic_boy.png"class="ic_boy_girl" if:"ll juzi.ansSex = 1 HI"x</image><text class:"concat_text">{{ juzi.content }}</text><image src="/common/images/copy.png" class="copy"></image></list-item></list-item></list>

index.css

设计index组件中的样式
设计container组件的样式，使在.container内的元素横向排列、居中对齐规定.container的范围。

在这里插入图片描述
设置search-box组件，使其高度为50px，宽度为100%。

设置搜索组件，使其高度100%。

然后debug：

index.js

export default {data:{/***   sex 整形 性别 (1. 男、2女)，size 整后 每页数量(非必境，默认为10) page 整形 页码(非必填 从1开始)chatName 字符串 聊天名称(必填 如:“你好”*/query0bj:{sex:1,size: 18, page:1,chathame:"你好"， Loading;false},//对话信息   concats:[[//对话句子{"id":56,"content":"你好像我的一个朋友"，  "ansSex";1，"duihuald":11}{,"id":51，"content":"你咋那么老套?"，     "ansSex":2,"duihuald":11}，{"id":52，"content":"这说明我撩妹技术不太高，没人实验啊""ansSex":1,"duihuald":11
]},onInit(){},/*** 获取input框的内容*/getInput(e){this.queryObj.chatName=e.value;console.log("获取input框的内容：" + this.queryObj.chatName);},
/***点击搜索按钮*/query() {console.log("点击搜索按钮"）;this.getData();},
/***复制句子*@param e*@return*/copy(e) {console.log("复制句子:" + JSON.stringify(e));},        getData()if(th3squery001.loading)return }   else {this.query0bj.loading =true;}var that s this;fetch.fetch({url:"https://hairong.tomneb.xyz/api/hairong/duihua",data: that.query0bj.success:function(response){console.info("fetch success");console.infe("fetch success"+response);console.info("fetch success"+JSON.stringifv(response)); var data =JSON.parse(response.data)//{};if(data.state!=1){//todo 请求失败，return;}var concate=data.data||[];console.info("fetch sucess:concats:" + Json.stringify(concats));that.concats = concats;}complete:function(){that.query0bj.loading =false;}fail:function(){console.info(*fetch fail*);}
});