鴻蒙應用開發(二)環境搭建

開發流程

IDE下載

首先下載HUAWEI DevEco Studio,介紹首次啟動DevEco Studio的配置向導:

  • 運行已安裝的DevEco Studio,首次使用,請選擇Do not import settings,單擊OK。
  • 安裝Node.js與ohpm。node.js 是基于 V8 引擎構建的開源運行時環境,用于運行JavaScript代碼。 ohpm 是OpenHarmony的包管理器,用于管理鴻蒙操作系統的軟件包。可以指定本地已安裝的Node.js或ohpm(Node.js版本要求為v14.19.1及以上,且低于v17.0.0;對應的npm版本要求為6.14.16及以上)路徑位置;我本地下載的node版本為v20.2.0,所以要使用在線下載。即在安裝時選擇Install按鈕,選擇下載源和存儲路徑后,進行在線下載,單擊Next進入下一步。
    在這里插入圖片描述
    然后一路next,這個地方要同意協議:
    在這里插入圖片描述
    等待下載完成,我這邊下載的時候,ohpm 下載異常,這時候選擇在線下載
    在這里插入圖片描述在這里插入圖片描述

配置環境變量

1- 打開終端工具,執行以下命令,根據輸出結果分別執行不同命令。

echo $SHELL 
  • 如果輸出結果為/bin/bash,則執行以下命令,打開.bash_profile文件。
vi ~/.bash_profile
  • 如果輸出結果為/bin/zsh,則執行以下命令,打開.zshrc文件。
vi ~/.zshrc
  • 單擊字母“i”,進入Insert模式。
  • 配置環境變量,添加HDC_SERVER_PORT端口信息、ohpm、node
export HDC_SERVER_PORT=7035
export OHPM_HOME=/Users/yangcong/Library/Huawei/ohpm //替換wield自己的ohpm地址
export PATH=${OHPM_HOME}/bin:${PATH}export NODE_HOME=/Users/yangcong/nodejs   //替換為自己下載的地址
export PATH=${NODE_HOME}/bin:${PATH}

如果忘記自己把node或者ohpm下載到哪了,可以到編輯器頁面進行查看
在這里插入圖片描述
在這里插入圖片描述

  • 編輯完成后,單擊Esc鍵,退出編輯模式,然后輸入“:wq”,單擊Enter鍵保存。
  • 如果不習慣使用vi命令修改,可以使用
open ~/.bash_profile
// zshrc 模式時使用下面命名
open ~/.zshrc

這樣可以直接以文本的形式打開文件,添加到環境變量末尾后關閉即可

  • 執行以下命令,使配置的環境變量生效。
    source ~/.bash_profile
    // zshrc 模式時使用下面命名
    source ~/.zshrc
    查看當前配置是否生效:
    在這里插入圖片描述
  • 環境變量配置完成后,關閉并重啟DevEco Studio。

診斷開發環境

在歡迎界面單擊Help > Diagnose Development Environment進行診斷。如果您已經打開了工程開發界面,也可以在菜單欄單擊Help > Diagnostic Tools > Diagnose Development Environment進行診斷。
在這里插入圖片描述
DevEco Studio開發環境診斷項包括電腦的配置、網絡的連通情況、依賴的工具或SDK等。如果檢測結果為未通過,請根據檢查項的描述和修復建議進行處理。
在這里插入圖片描述

工程介紹

APP包結構

應用/服務發布形態為APP Pack(Application Package,簡稱APP),它是由一個或多個HAP(Harmony Ability Package)包以及描述APP Pack屬性的pack.info文件組成。
一個HAP在工程目錄中對應一個Module,它是由代碼、資源、第三方庫及應用/服務配置文件組成,HAP可以分為Entry和Feature兩種類型。

  • Entry:應用/服務的主模塊,可獨立安裝運行。一個APP中,對于同一類型的設備,可以包含一個或多個Entry類型的HAP,如果同一類型的設備包含多個Entry模塊,需要配置distroFilter分發規則,使得應用市場在做應用的云端分發時,對該設備類型下不同規格的設備進行分發。
  • Feature:應用/服務的動態特性模塊。一個APP可以包含零到多個Feature類型的HAP。只有包含Ability的HAP才能夠獨立運行。
    基于Stage模型和FA模型開發的應用,應用程序包結構并不相同:
    在這里插入圖片描述
工程目錄結構

應用/服務支持API Version 4~9。API Version 4~7和API Version 8~9的構建工具和構建插件不同。其中,API Version 4~7構建體系是由Gradle構建工具和構建插件組成;API Version 8~9構建體系是由Hvigor構建工具和構建插件組成。所以API Version 4~7和API Version 8~9的工程目錄結構存在差異。下面按照不同開發語言分別介紹API Version 4~7和API Version 8~9的工程目錄結構。
ArkTS工程目錄結構(Stage模型)
在這里插入圖片描述

  • AppScope > app.json5:應用的全局配置信息。
  • entry:應用/服務模塊,編譯構建生成一個HAP。
    • src > main > ets:用于存放ArkTS源碼。
    • src > main > ets > entryability:應用/服務的入口。
    • src > main > ets > pages:應用/服務包含的頁面。
    • src > main > resources:用于存放應用/服務所用到的資源文件,如圖形、多媒體、字符串、布局文件等。關于資源文件的詳細說明請參考資源文件的分類。
    • src > main > module.json5:Stage模型模塊配置文件,主要包含HAP的配置信息、應用在具體設備上的配置信息以及應用的全局配置信息。
    • oh_modules:用于存放三方庫依賴信息。關于原npm工程適配OHPM包管理器操作,請參考OHPM包管理器。
    • build-profile.json5:當前的模塊信息、編譯信息配置項,包括buildOption、targets配置等。
    • hvigorfile.ts:模塊級編譯構建任務腳本。
    • oh-package.json5:配置三方包聲明文件的入口及包名。
      其他工程目錄,例如FA模型,Gradle舊版目錄等可查看工程介紹
開發第一個程序

針對不同的應用場景及技術背景,方舟開發框架提供了兩種開發范式,分別是基于ArkTS的聲明式開發范式(簡稱“聲明式開發范式”)和兼容JS的類Web開發范式(簡稱“類Web開發范式”)。

  • 聲明式開發范式:采用基于TypeScript聲明式UI語法擴展而來的ArkTS語言,從組件、動畫和狀態管理三個維度提供UI繪制能力。
  • 類Web開發范式:采用經典的HML、CSS、JavaScript三段式開發方式,即使用HML標簽文件搭建布局、使用CSS文件描述樣式、使用JavaScript文件處理邏輯。該范式更符合于Web前端開發者的使用習慣,便于快速將已有的Web應用改造成方舟開發框架應用。
    在開發一款新應用時,推薦采用聲明式開發范式來構建UI,主要基于以下幾點考慮:
  • 開發效率:聲明式開發范式更接近自然語義的編程方式,開發者可以直觀地描述UI,無需關心如何實現UI繪制和渲染,開發高效簡潔。
  • 應用性能:如下圖所示,兩種開發范式的UI后端引擎和語言運行時是共用的,但是相比類Web開發范式,聲明式開發范式無需JS框架進行頁面DOM管理,渲染更新鏈路更為精簡,占用內存更少,應用性能更佳。
  • 發展趨勢:聲明式開發范式后續會作為主推的開發范式持續演進,為開發者提供更豐富、更強大的能力。
    具體說明見 ArkUI框架 ,因此我們選擇使用官方推薦的聲明式開發規范。
Hello World
  1. 點擊Create Project,創建一個新工程
  2. 選擇Application —> Empty Abilty
    在這里插入圖片描述
  3. 填寫工程相關信息,保持默認值即可,單擊Finish。
    在這里插入圖片描述
  • Project name:工程的名稱,可以自定義,由大小寫字母、數字和下劃線組成。
    如果是創建的元服務,則:
    • 調試、運行時,在設備桌面上沒有應用圖標,請使用DevEco Studio的調試和運行功能,來啟動元服務。
    • 編譯構建APP時,每個HAP大小不能超過10MB。
  • Bundle name:標識應用的包名,用于標識應用的唯一性。
  • Save location:工程文件本地存儲路徑,由大小寫字母、數字和下劃線等組成,不能包含中文字符。
  • Compile SDK:應用/服務的目標API Version,在編譯構建時,DevEco Studio會根據指定的Compile API版本進行編譯打包。
  • Model:應用支持的模式,API Version 4~8只支持FA模式。
  • Enable Super Visual:支持低代碼開發模式,部分模板支持低代碼開發,可選擇打開該開關。
  • Language:開發語言。
  • Compatible SDK:兼容的最低API Version。
  • Device type:該工程模板支持的設備類型。
  1. 創建模擬器
  • 單擊DevEco Studio > Preferences > SDK,下拉框選擇HarmonyOS,勾選并下載Platforms下的System-image和Tools下的Emulator資源。虛擬機支持Phone、TV和Wearable設備,下載System-image時,請選擇對應設備的System-image。
    在這里插入圖片描述
    在這里插入圖片描述

點擊ok等待下載完成
5. 單擊菜單欄的Tools > Device Manager,在Local Emulator頁簽,可以單擊Edit設置本地模擬器的存儲路徑Local emulator location,點擊+New Emulator 創建一個本地模擬器。可以修改設備的名稱、尺寸、分辨率、內存等參數。和Android Studio 非常相似。
在這里插入圖片描述

  1. 回到項目中點擊run,編譯完成后 hello world 就能跑起來了
    在這里插入圖片描述

  2. 打開“Index.ets”文件,可以看到頁面由Text組件組成。“Index.ets”文件的示例如下:

// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

在默認頁面基礎上,我們添加一個Button組件,作為按鈕響應用戶點擊,從而實現跳轉到另一個頁面。“Index.ets”文件的示例如下:

// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕,以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}
  1. 構建第二個頁面
  • 在“Project”窗口,打開“entry > src > main > ets ”,右鍵點擊“pages”文件夾,選擇“New > ArkTS File”,命名為“Second”,點擊“Finish”。可以看到文件目錄結構如下:
    在這里插入圖片描述

  • 配置第二個頁面的路由。在“Project”窗口,打開“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”。示例如下:

{"src": ["pages/Index","pages/Second"]
}

這一步也可以在右鍵點擊“pages”文件夾時,選擇“New > Page”,則無需手動配置相關頁面路由。
9. 添加文本及按鈕。
參照第一個頁面,在第二個頁面添加Text組件、Button組件等,并設置其樣式。“Second.ets”文件的示例如下:

// Second.ets
@Entry
@Component
struct Second {@State message: string = '我是第二個頁面'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

實現頁面間的跳轉
頁面間的導航可以通過頁面路由router來實現。頁面路由router根據頁面url找到目標頁面,從而實現跳轉。使用頁面路由請導入router模塊。
第一個頁面跳轉到第二個頁面。
在第一個頁面中,跳轉按鈕綁定onClick事件,點擊按鈕時跳轉到第二頁。“Index.ets”文件的示例如下:

//Index.etsimport router from '@ohos.router'
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕,以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%').onClick(() => {console.info(`按鈕被點擊了~~`)//跳轉router.pushUrl({url:'pages/Second'}).then(() => {console.info('成功跳轉到了新的頁面')}).catch((err) => {console.error(`跳轉失敗,錯誤碼: ${err.code}, 錯誤信息: ${err.message}`)})})}.width('100%')}.height('100%')}
}

第二個頁面返回到第一個頁面。
在第二個頁面中,返回按鈕綁定onClick事件,點擊按鈕時返回到第一頁。“Second.ets”文件的示例如下:

// Second.ets
import router from '@ohos.router'@Entry
@Component
struct Second {@State message: string = '我是第二個頁面'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%').onClick(() => {console.info(`返回按鈕被點擊了~~`)try {// 返回第一頁router.back()console.info('成功返回第一頁~')} catch (err) {console.error(`返回失敗,錯誤碼: ${err.code}, 錯誤信息: ${err.message}`)}})}.width('100%')}.height('100%')}
}

問題記錄:

當我創建完模擬器之后,IDE并沒有識別出來,
解決方法:重啟IDE
在這里插入圖片描述

UI開發
方舟開發框架(簡稱ArkUI)為HarmonyOS應用的UI開發提供了完整的基礎設施,包括簡潔的UI語法、豐富的UI功能(組件、布局、動畫以及交互事件),以及實時界面預覽工具等,可以支持開發者進行可視化界面開發。
基本概念

  • UI:即用戶界面。開發者可以將應用的用戶界面設計為多個功能頁面,每個頁面進行單獨的文件管理,并通過頁面路由API完成頁面間的調度管理如跳轉、回退等操作,以實現應用內的功能解耦。
  • 組件:UI構建與顯示的最小單位,如列表、網格、按鈕、單選框、進度條、文本等。開發者通過多種組件的組合,構建出滿足自身應用訴求的完整界面。
    基于ArkTS的聲明式開發范式的方舟開發框架是一套開發極簡、高性能、支持跨設備的UI開發框架,提供了構建HarmonyOS應用UI所必需的能力,主要包括:
  • ArkTS
    • ArkTS是UI開發語言,基于TypeScript(簡稱TS)語言擴展而來,是TS的超集。擴展能力包含各種裝飾器、自定義組件、UI描述機制。狀態數據管理作為基于ArkTS的聲明式開發范式的特色,通過功能不同的裝飾器給開發者提供了清晰的頁面更新渲染流程和管道。狀態管理包括UI組件狀態和應用程序狀態,兩者協作可以使開發者完整地構建整個應用的數據更新和UI渲染。ArkTS語言的基礎知識請參考學習ArkTS語言。
  • 布局
    • 布局是UI的必要元素,它定義了組件在界面中的位置。ArkUI框架提供了多種布局方式,除了基礎的線性布局、層疊布局、彈性布局、相對布局、柵格布局外,也提供了相對復雜的列表、宮格、輪播。
  • 組件
    • 組件是UI的必要元素,形成了在界面中的樣子,由框架直接提供的稱為系統組件,由開發者定義的稱為自定義組件。系統內置組件包括按鈕、單選框、進度條、文本等。開發者可以通過鏈式調用的方式設置系統內置組件的渲染效果。開發者可以將系統內置組件組合為自定義組件,通過這種方式將頁面組件化為一個個獨立的UI單元,實現頁面不同單元的獨立創建、開發和復用,具有更強的工程性。
  • 頁面路由和組件導航
    • 應用可能包含多個頁面,可通過頁面路由實現頁面間的跳轉。一個頁面內可能存在組件間的導航如典型的分欄,可通過導航組件實現組件間的導航。
  • 圖形
    • 方舟開發框架提供了多種類型圖片的顯示能力和多種自定義繪制的能力,以滿足開發者的自定義繪圖需求,支持繪制形狀、填充顏色、繪制文本、變形與裁剪、嵌入圖片等。
  • 動畫
    • 動畫是UI的重要元素之一。優秀的動畫設計能夠極大地提升用戶體驗,框架提供了豐富的動畫能力,除了組件內置動畫效果外,還包括屬性動畫、顯式動畫、自定義轉場動畫以及動畫API等,開發者可以通過封裝的物理模型或者調用動畫能力API來實現自定義動畫軌跡。
  • 交互事件
    • 交互事件是UI和用戶交互的必要元素。方舟開發框架提供了多種交互事件,除了觸摸事件、鼠標事件、鍵盤按鍵事件、焦點事件等通用事件外,還包括基于通用事件進行進一步識別的手勢事件。手勢事件有單一手勢如點擊手勢、長按手勢、拖動手勢、捏合手勢、旋轉手勢、滑動手勢,以及通過單一手勢事件進行組合的組合手勢事件

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/213495.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/213495.shtml
英文地址,請注明出處:http://en.pswp.cn/news/213495.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JavaScript常用技巧專題二

文章目錄 一、前言二、生成隨機字符串三、轉義HTML特殊字符四、單詞首字母大寫五、將字符串轉換為小駝峰六、刪除數組中的重復值七、移除數組中的假值八、獲取兩個數字之間的隨機數九、將數字截斷到固定的小數點十、日期10.1、計算兩個日期之間天數10.2、從日期中獲取是一年中的…

【Java編程實現 9 * 9 乘法表格打印四種形態,七種打法】

Java編程實現 9 * 9 乘法表格打印四種形態,七種方法打印 廢話篇打印 9 * 9 乘法表格嵌套for循環實現左下角打印嵌套for循環實現左上角打印嵌套for循環實現右上角打印嵌套for循環實現右下角打印 使用while循環打印 9 * 9 乘法表格(一)使用whil…

1003 我要通過!

“答案正確”是自動判題系統給出的最令人歡喜的回復。本題屬于 PAT 的“答案正確”大派送 —— 只要讀入的字符串滿足下列條件,系統就輸出“答案正確”,否則輸出“答案錯誤”。 得到“答案正確”的條件是: 字符串中必須僅有 P、 A、 T這三種…

詳解Keras3.0 Layers API: Core layers

1、Input keras.Input(shapeNone,batch_sizeNone,dtypeNone,sparseNone,batch_shapeNone,nameNone,tensorNone, ) 參數說明 shape: 輸入張量的形狀。如果為None,則可以動態地指定形狀。batch_size: 批處理大小。如果為None,則可以動態地指定批處理大小…

基于SpringBoot+Vue前后端分離的景點數據分析平臺(Java畢業設計)

大家好,我是DeBug,很高興你能來閱讀!作為一名熱愛編程的程序員,我希望通過這些教學筆記與大家分享我的編程經驗和知識。在這里,我將會結合實際項目經驗,分享編程技巧、最佳實踐以及解決問題的方法。無論你是…

awt中文亂碼-Intellij IDEA

亂碼的根本原因在于秦始皇嘎太早了(bushi 解決方法:肉眼可見的編碼設置統一為GBK 1.打開設置找到文件編碼 2.肉眼可見的編碼統統改成GBK 有人該問了,為什么不改成utf-8,因為awt的編碼由操作系統決定,我的是win家庭中…

Nextui使用

安裝和使用 https://nextui.org/docs/frameworks/nextjs 自定義主題 https://nextui.org/docs/customization/customize-theme // tailwind.config.js const {nextui} require("nextui-org/react");/** type {import(tailwindcss).Config} */ module.exports {…

deepstream docker安裝

介紹 deepstream為dGPU和Jetson平臺提供dockers containers,這些鏡像可以方便開發者很快地部署deepstream應用。deepstream的docker images可以在NGC web中得到。 安裝Docker Docker 是一個開源的容器化平臺,它允許你構建,測試&#xff0c…

29. 如何在Spring所有BeanDefinition注冊完后做擴展?

如何在Spring所有BeanDefinition注冊完后做擴展? 通常可以使用beanFactoryPostProcessor 對已注冊的BeanDefinition進行修改或者通過它的子接口BeanDefinitionRegistryPostProcessor 再進行注冊額外擴展 BeanDefinitionRegistryPostProcessor 1、概述 public interface Bea…

0基礎學java-day18-( 坦克大戰【2】)

課件資源放在文末 1.線程-應用到坦克大戰 1.1 坦克大戰 0.3 【坦克類:包括坦克的基本屬性,以及坦克的移動方法】 package com.hspedu.tankgame03;/*** author 韓順平* version 1.0*/ public class Tank {private int x;//坦克的橫坐標private int y;…

XMemcached network layout exception java.nio.channels.ClosedChannelException

java.nio.channels.ClosedChannelException 表示嘗試在已關閉的通道上進行 I/O 操作,通常發生在網絡連接意外關閉后嘗試在關閉的通道上執行讀取或寫入操作。 XMemcached network layout exception 可能是由于 XMemcached 客戶端在嘗試與 Memcached 服務器通信時發生…

一些AG10K FPGA 調試的建議-Douglas

PLL AGM FPGA 在配置成功時,PLL 已經完成鎖定,lock 信號已經變高;如果原設計中用 lock 信號輸出實現系統 reset 的復位功能,就不能正確完成上電復位;同時,為了保證 PLL 相移的穩定,我們需要在 P…

C++筆記之重載和重寫辨別

C筆記之重載和重寫辨別 code review! 文章目錄 C筆記之重載和重寫辨別重載(overloading)重寫(Overriding) 在C中,重載(overloading)和重寫(overriding)是面向對象編程中…

筆記69:Conv1d 和 Conv2d 之間的區別

筆記地址:D:\work_file\(4)DeepLearning_Learning\03_個人筆記\4. Transformer 網絡變體 a a a a a a a a a a a

設計模式-門面模式(Facade)

提示:文章寫完后,目錄可以自動生成,如何生成可參考右邊的幫助文檔 文章目錄 前言一、定義二、結構 前言 在組件構建過程中,某些接口之間直接依賴會帶來很多問題,甚至無法直接實現。采用一層間接接口,來隔離…

SpringBoot報No qualifying bean of type ‘com.lzk.mapper.UserMapper‘ available

這個異常是SpringBoot程序沒有找到要Bean&#xff0c;這里提示找不到UserMapper&#xff0c;有以下三種解決方式&#xff1a; 在UserMapper上添加注解MapperMapper public interface UserMapper extends BaseMapper<User> { }在啟動類上進行Mapper包掃描&#xff0c;不用…

【IC前端虛擬項目】工程目錄組織說明

【IC前端虛擬項目】數據搬運指令處理模塊前端實現虛擬項目說明-CSDN博客 文檔目錄在“MVU芯片前端設計驗證虛擬項目”中&#xff0c;截至本篇文章時&#xff0c;包含了MVU_FS.md/project_req.md和mvu_vp_list.xlsx三個文件。 MVU_FS是模塊的方案文檔&#xff0c;除了feature和…

淺談CompletableFuture

作者簡介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中興通訊、美團架構師&#xff0c;現某互聯網公司CTO 聯系qq&#xff1a;184480602&#xff0c;加我進群&#xff0c;大家一起學習&#xff0c;一起進步&#xff0c;一起對抗互聯網寒冬 回顧FutureTask 之前我…

安全高效 江西變電站成功應用國家電網無人機巡檢

隨著電力需求的迅速增長&#xff0c;電網的巡檢、維護與保養變得越來越重要。為迎接這一挑戰&#xff0c;江西供電公司的一座變電站成功引入了復亞智能國家電網無人機巡檢系統&#xff0c;在提升巡檢水平、開創新型巡檢模式方面做出了重要嘗試&#xff0c;為電網設備的高效巡檢…

EDA 數字時鐘

提示&#xff1a;文章寫完后&#xff0c;目錄可以自動生成&#xff0c;如何生成可參考右邊的幫助文檔 文章目錄 前言一、數字時鐘是什么&#xff1f;二、EDA里面數碼管的顯示1.元件模型2.參考程序3. 實驗仿真波形4.實驗現象5. 仿真問題 三、顯示時鐘1. 時鐘電路模塊2.參考程序3…