0
点赞
收藏
分享

微信扫一扫

【江鸟中原】鸿蒙开发一个简单聊天助手

程序小小黑 2023-12-11 阅读 50

通过对鸿蒙的学习,我做了一个简单的聊天助手

我是中原工的李欣昂,以下是我的作业内容

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

【江鸟中原】鸿蒙开发一个简单聊天助手_css

这里是项目的名称,因为是一个demo,就没有改变项目名字。sdk用的最新版,面对手机的一个项目,选择完毕后点击finish完成项目创建。

【江鸟中原】鸿蒙开发一个简单聊天助手_搜索_02


【江鸟中原】鸿蒙开发一个简单聊天助手_JSON_03

index.hml

<input class="search_input"type="text" onchange="getInput" >你好 <button class:"search_bt" onclick="quuery">搜索

<div class:"concat_main">

<div class:"concat item">

<div class:"duihua">

你好c/text>

<div>
        <image src="/common/inages/ic_boy.pnq"></imaqe> 
        <text>请直奔主题,不想说这种客套话</text>
        <image src="/common/images/copy.png"></image>
        </div>
     </div>


<list-item class "concat_item" for="{{ item in concats }}"> <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

<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的范围。


【江鸟中原】鸿蒙开发一个简单聊天助手_css_04

设置search-box组件,使其高度为50px,宽度为100%。

【江鸟中原】鸿蒙开发一个简单聊天助手_搜索_05

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

【江鸟中原】鸿蒙开发一个简单聊天助手_JSON_06

【江鸟中原】鸿蒙开发一个简单聊天助手_JSON_07

然后debug:

【江鸟中原】鸿蒙开发一个简单聊天助手_JSON_08


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*);

          }

});

经过本学期的学习,我感觉到了自身还有很多不足,还要不断提升自己,继续完善此项目更多功能。







举报

相关推荐

0 条评论