一、前言

本學期，我有幸選修了《鴻蒙移動應用開發》課程。為完成期末作業並深化對鴻蒙開發邏輯的理解，我選擇基於開源社區優質代碼進行二次開發，在“模仿—分析—重構”的過程中探索鴻蒙應用的優化路徑與創新可能。儘管最終完成的項目在功能完整性、性能表現等方面仍存在一定不足，但整個實踐過程讓我對鴻蒙應用開發的底層邏輯、組件使用及項目架構有了更透徹的理解，切實將課堂所學轉化為了實操能力，幫助我更透徹地理解了鴻蒙應用開發的底層邏輯與核心知識點 ，為後續深入學習鴻蒙開發築牢了基礎。


二、概述

本項目是仿微信聊天應用，旨在通過還原社交軟件的核心交互邏輯，深度掌握鴻蒙ArkUI聲明式開發、數據管理及移動應用架構設計能力。項目以微信經典聊天界面為參照，實現了用户登錄註冊、消息列表動態渲染、文本消息收發、輸入框交互等核心功能，調用了免費的第三方機器人接口模擬聊天的流暢體驗。

【江鳥中原】鴻蒙聊天應用開發_仿微信【江鳥中原】鴻蒙聊天應用開發_仿微信_02【江鳥中原】鴻蒙聊天應用開發_仿微信_03


雖然我這個版本的項目還沒接入真實的後端服務，像圖片、語音這類多媒體消息功能也還在慢慢完善中，但它已經覆蓋了移動聊天應用的核心開發流程。這不僅是對我這學期的一次檢驗，也為之後想拓展分佈式多端協同、音視頻通話這些進階功能打下了挺紮實的基礎。


三、項目介紹

3.1 用户登錄

登錄頁面：包含用户名 / 密碼輸入框、登錄按鈕和註冊跳轉入口。我用 @State 裝飾器綁定了輸入框的狀態，能實時校驗輸入內容不能為空；登錄按鈕會根據輸入內容是否完整動態啓用或禁用，禁用的時候按鈕會置灰，當輸入有誤時，會提示用户名或密碼錯誤。登錄成功則進入Index頁面，點擊註冊進入Register頁面。

         【江鳥中原】鴻蒙聊天應用開發_仿微信_04      【江鳥中原】鴻蒙聊天應用開發_仿微信_05


登錄核心代碼如下：

private handleLogin(): void {
    if (!this.canLogin() || this.isLoading) return;

    this.isLoading = true;
    setTimeout(() => {
      this.isLoading = false;
      // 登錄校驗+反饋+跳轉
      if (this.username === 'admin' && this.password === '123456') {
        this.saveLoginState('fake-jwt-token'); 
        promptAction.showToast({ message: '登錄成功' });
        this.navigateToHome();
      } else {
        promptAction.showToast({ message: '用户名或密碼錯誤' });
      }
    }, 1500);
  }

  // 跳轉到主頁
  private navigateToHome(): void {
    router.pushUrl({ url: 'pages/Index' })
      .catch((err) => {
        console.error('跳轉主頁失敗:', err);
        promptAction.showToast({ message: '頁面跳轉失敗' });
      });
  }

  // 跳轉到註冊頁面
  private navigateToRegister(): void {
    router.pushUrl({ url: 'pages/Register' })
      .catch((err) => {
        console.error('跳轉註冊頁失敗:', err);
        promptAction.showToast({ message: '註冊頁面跳轉失敗' });
      });
  }

3.2 用户註冊

註冊頁面：用ArkUI組件搭的表單佈局，頁面包含暱稱、密碼、確認密碼輸入框，還有協議勾選框，註冊按鈕會根據輸入是否合法動態切換狀態。註冊成功後直接跳轉到主頁進入。如果已有賬號，則可點擊立即登陸，返回登錄界面直接登錄。

                           【江鳥中原】鴻蒙聊天應用開發_仿微信_06

核心代碼如下：

// 暱稱
      TextInput({ placeholder: '請輸入暱稱' })
        .onChange((val: string) => this.nickname = val)
        .width('100%')
        .height(48)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .padding({ left: 16, right: 16 })

      // 密碼
      TextInput({ placeholder: '請輸入密碼' })
        .type(InputType.Password)
        .onChange((val: string) => this.password = val)
        .width('100%')
        .height(48)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .padding({ left: 16, right: 16 })

      // 確認密碼
      TextInput({ placeholder: '請確認密碼' })
        .type(InputType.Password)
        .onChange((val: string) => this.confirmPassword = val)
        .width('100%')
        .height(48)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .padding({ left: 16, right: 16 })
        
     private canRegister(): boolean {
      return this.agreeTerms &&
        this.nickname.length > 0 &&
        this.password.length >= 6 &&
        this.confirmPassword.length > 0;
    
  }

3.3 聊天功能

該功能在微信聊天界面基礎上，通過接入第三方AI機器人接口，實現實時對話交互，為用户提供自然流暢的智能問答、信息查詢、趣味閒聊等服務。其中，聊天界面複用了現有的聊天列表佈局，把用户發的消息氣泡做成右對齊的綠色，機器人的做成左對齊的灰色，雙方消息一眼就能分清；機器人現在只支持發文字消息，不過也預留了圖片、卡片消息的擴展空間。用户輸入內容後，會通過模擬接口觸發機器人回覆 。效果如下：

【江鳥中原】鴻蒙聊天應用開發_仿微信_07   【江鳥中原】鴻蒙聊天應用開發_仿微信_08

核心代碼如下：

sendTextMessage(content: string) {
    //把輸入框輸入的數據添加到messageList
    let message = new MessageInfoModel({
      messageContent: content,
      sendUser: currentUser,
      connectUser: this.talker
    } as MessageInfo)
    this.messageList.push(message)
    this.getResponseMessage(content)
    //滾到底部
    this.scroller.scrollEdge(Edge.Bottom)
    //添加數據(沒有倉庫會自動創建)
    StoreClass.addChatMessage(this.talker.user_id, message)
  }
  //定義機器人回覆方法
  async getResponseMessage(content: string) {
    try {
      const res = await getMessageInfo(content)

      let message = new MessageInfoModel({
        messageContent: res?.info?.text,
        sendUser: this.talker,
        connectUser: currentUser
      } as MessageInfo)
      //將回復的信息存入消息列表
      this.messageList.push(message)
      //添加數據(沒有倉庫會自動創建)
      StoreClass.addChatMessage(this.talker.user_id, message)
    } catch (e) {
      console.log(e)
    }
    this.scroller.scrollEdge(Edge.Bottom)
  }


3.4 聯繫人搜索

該功能的設計仿照微信的聯繫人搜索：頁面頂部的搜索欄完全復刻微信原生樣式，採用淺灰色的圓角設計，搜索框內默認顯示 “搜索” 的提示文字；搜索框根據用户輸入關鍵詞進行篩選，精準定位到符合條件的聯繫人；若清空搜索框內的內容，聯繫人列表會自動恢復展示全部聯繫人，完全貼合微信原生的搜索使用習慣。效果如下：

【江鳥中原】鴻蒙聊天應用開發_仿微信_09【江鳥中原】鴻蒙聊天應用開發_仿微信_10【江鳥中原】鴻蒙聊天應用開發_仿微信_11

核心代碼如下：

aboutToAppear(): void {
    this.filterList = DefaultUserList
  }

  //篩選聯繫人方法
  filterName() {
    this.filterList = DefaultUserList.filter((user: UserInfo) => {
      //如果聯繫人列表中存在輸入的聯繫人名稱，則將搜索的聯繫人數據返回filterList
      return user.username.includes(this.searchName)
    })
  }
   build() {
    Column() {
      //搜索欄
      Row() {
        Search({ placeholder: "搜索", value: $$this.searchName })
          .backgroundColor($r("app.color.white"))
      }
      .width("100%")
      .height(60)
      .padding({
        top: 10,
        left: 10,
        right: 10
      })

3.5 項目不足及後續工作方向

1.在聊天方面目前只能做到簡單的文字交流，無法發送圖片、語音或其他多媒體消息。目前的聊天頁面只處理了文本消息的發送與機器人回覆，缺少文件選擇、拍照、語音錄製等交互邏輯，因此用户只能進行純文字聊天，限制了使用的豐富度與真實感。

2.界面中，右側加號內的菜單列出了“發起羣聊”“添加朋友”“掃一掃”“收付款”等選項，在項目中，這些功能僅停留在UI展示或路由跳轉層面，沒有實際業務邏輯與頁面實現，導致產品可用性與完整性不足。

3.底部導航雖然有“發現”入口，僅展示了其包含“朋友圈”“掃一掃”“聽一聽”“小程序”四個選項，但各功能入口同樣缺乏業務邏輯支持，無法進入真實內容頁。即這個模塊只是靜態佈局，沒有實現對應的功能頁面與數據交互。

總結：項目目前的核心短板集中在多媒體消息能力缺失、常用類功能未落地、以及發現頁面功能未整合可用。這些問題使得應用的交互維度單一、實用場景受限，後續需補充文件選擇與上傳、掃碼邏輯、朋友圈及小程序等模塊的完整實現，才能接近真實微信的使用體驗。


【江鳥中原】鴻蒙聊天應用開發_仿微信_12【江鳥中原】鴻蒙聊天應用開發_仿微信_13【江鳥中原】鴻蒙聊天應用開發_仿微信_14


四、總結與展望

本項目以“仿微信聊天應用”為載體，完整經歷了從需求分析、架構設計到功能實現的全流程開發，對我而言既是一段系統的技術學習旅程，也是一次從理論認知到實踐落地的關鍵思維蜕變。

從實踐成果來看，項目已搭建起仿微信應用的核心開發框架，落地了用户登錄註冊、聯繫人搜索、文字聊天等基礎功能，覆蓋移動聊天應用核心開發鏈路。項目現階段仍存在諸多不足，這些待完善的環節也明確了後續優化方向,令其逐步向貼近真實微信的使用體驗靠攏。

此次開發實踐的價值，早已超越功能實現本身 —— 全流程歷練沉澱的需求拆解能力、問題定位思維，以及對鴻蒙開發核心邏輯的深度理解，共同構成了紮實的技術基石。未來，我將以現有成果為起點，帶着實踐中發現的問題，在持續迭代中打磨體驗、完善功能，讓項目真正承載起鴻蒙 “萬物互聯” 的技術內核。