前言

我是通過b站上面老師的講解，跟著老師編寫了一個簡單聊天助手app，簡答實用，對于剛開始接觸鴻蒙的我們來說很有幫助。

創(chuàng)建項目

所用軟件為DevEco Studio，點擊Create HarmonyOS Project，這里選擇了第一個空的項目，點擊next會跳至下一個頁面。

這里是項目的名稱，因為是一個demo，就沒有改變項目名字。sdk用的最新版，面對手機的一個項目，選擇完畢后點擊finish完成項目創(chuàng)建。

這樣一個簡單項目就創(chuàng)建好了。

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內(nèi)的元素橫向排列、居中對齊規(guī)定.container的范圍。

設置search-box組件，使其高度為50px，寬度為100%。

設置搜索組件，使其高度100%。


然后debug：

index.js

export default {
      data:{
      /**
      *   sex 整形 性別 (1. 男、2女)，
          size 整后 每頁數(shù)量(非必境，默認為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框的內(nèi)容
       */
       getInput(e){
          this.queryObj.chatName=e.value;
          console.log("獲取input框的內(nèi)容：" + 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*);
           }
});

最后頁面如圖所示

結語

我這個項目功能有點簡單，還沒有完善復制粘貼以及下拉更新等功能，后續(xù)會繼續(xù)完善更多功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-652412.html

到了這里，關于『牛角書』HarmonyOS鴻蒙實戰(zhàn) 開發(fā)一個簡單聊天助手APP的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！