清濁-《鴻蒙應(yīng)用程序開發(fā)-董昱》-第五章JavaScript UI設(shè)計(jì)
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
引言
一、本文的目的
1.本文是讀書筆記，學(xué)習(xí)筆記。包含書中內(nèi)容的對(duì)比總結(jié)、關(guān)鍵提煉、知識(shí)補(bǔ)充、思維導(dǎo)圖。在JS UI開發(fā)的學(xué)習(xí)過程，會(huì)著重思考與Java UI開發(fā)的差異。
2.鑒于官方文檔關(guān)于JS UI的講解很散亂、不聚焦，在北向HCIA學(xué)習(xí)路上就需要各位大佬出的書和視頻來助力，近期會(huì)從三本書籍去學(xué)習(xí)JS UI開發(fā)去學(xué)習(xí)和祖做筆記，并對(duì)三本書關(guān)于這一塊兒知識(shí)的講解做一個(gè)總結(jié)，最后解析JS UI官方示例工程。書籍分別是《鴻蒙應(yīng)用程序開發(fā)-董昱》、《鴻蒙操作系統(tǒng)應(yīng)用開發(fā)實(shí)踐-中科院》、《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典-徐文禮》
二、學(xué)習(xí)《鴻蒙應(yīng)用程序開發(fā)-董昱》的體驗(yàn)
1.代碼很規(guī)范!很規(guī)范!很規(guī)范!有注解
2.董昱老師的示例代碼目前已學(xué)習(xí)到的，沒有是直接從官方文檔的示例代碼拿下來的，很用心了。示例代碼塊的上方都有所在文件的位置!!!!不需要焦慮代碼該敲在哪兒的問題了。
3.在JS UI這塊兒官方文檔的知識(shí)很散亂，不聚焦，董昱老師的講解很系統(tǒng)
4.董昱老師對(duì)參數(shù)的解釋很到位
5.方法的圖解、概念的圖示都很到位
6.最后也是最關(guān)鍵的一點(diǎn)!董昱老師的《鴻蒙應(yīng)用程序開發(fā)》有免費(fèi)的配套課程!!!!鴻蒙應(yīng)用程序開發(fā)視頻教程
7.學(xué)習(xí)JS開發(fā)官方文檔，以下兩個(gè)文檔比較好。
一、JavaScript UI設(shè)計(jì)
5.0概述
Java UI與JS UI
區(qū)別
- Java UI開發(fā) 安卓型(事件式編程范式)
- JS UI開發(fā) Web前端(聲明式編程范式)
聯(lián)系
- JS UI更加傾向于界面開發(fā)，在復(fù)雜業(yè)務(wù)邏輯方面，需要Java來幫忙。
- 在輕量級(jí)智能穿戴設(shè)備上的JS UI會(huì)更輕量級(jí)一點(diǎn)，并不能使用所有的JS UI特性
HML與HTML
區(qū)別
- HML：鴻蒙標(biāo)記語言，表述用戶界面結(jié)構(gòu)
- HTML：超文本標(biāo)記語言，描述 web文檔的一種標(biāo)記語言(大家熟知不做贅述)
聯(lián)系
- 一門標(biāo)記語言
- 一種文件類型
- HTML與HML的用法及其相似
5.1 初識(shí)Js UI
5.1.1 JS實(shí)例與頁面
(1)概念辨析
1.創(chuàng)建工程
繼承的類有變化
- 之前：Ability
- 現(xiàn)在：AceAbility
主要管理JS目錄下的文件
關(guān)于：common.images文件夾的疑惑，其實(shí)就是形式上變了一點(diǎn)點(diǎn)而已，不影響的。
2.實(shí)例與頁面
實(shí)例(JavaScript實(shí)例)：
- 一組與功能相關(guān)的用戶界面和功能
- 默認(rèn)的實(shí)例名稱為default
實(shí)例與Ability
- 每個(gè)獨(dú)立的實(shí)例都被獨(dú)立的Ability管理
- default實(shí)例默認(rèn)被MainAbility管理
實(shí)例與Page
- 在實(shí)例中，可以創(chuàng)建多個(gè)用戶界面，其中每個(gè)用戶界面被稱為一個(gè)頁面(Page)
實(shí)例、頁面、Ability可視化關(guān)系圖
JS UI的頁面(Page)與Java UI中的界面(AbilitySlice)
- 兩者相似
- 要用于承載單個(gè)頁面的具體邏輯實(shí)現(xiàn)和界面UI，是應(yīng)用顯示、運(yùn)行和跳轉(zhuǎn)的最小單元
實(shí)例配置
位置：config.json
屬性：
- name：實(shí)例名，默認(rèn)default
- pages：聲明實(shí)例所包含的頁面
- Page屬性是頁面路徑組成的數(shù)組
- 頁面路徑是以實(shí)例目錄為根目錄的路徑，不帶后綴
window：聲明與虛擬像素相關(guān)的選項(xiàng)
- designWidth：虛擬寬度(px像素此時(shí)也是虛擬)
- autoDesignWidth：是否啟動(dòng)(fasle且不設(shè)虛擬寬度則px為實(shí)際物理寬度)
代碼：
(2)概念補(bǔ)充
關(guān)于視覺中的基礎(chǔ)概念補(bǔ)充HarmonyOS官方文檔-設(shè)計(jì)-視覺風(fēng)格-基礎(chǔ)概念
虛擬像素單位：vp
- 虛擬像素(virtual pixel)是一臺(tái)設(shè)備針對(duì)應(yīng)用而言所具有的虛擬尺寸(區(qū)別于屏幕硬件本身的像素單位)。它提供了一種靈活的方式來適應(yīng)不同屏幕密度的顯示效果。
字體像素單位：fp
- 字體像素(font pixel) 大小默認(rèn)情況下與 vp 相同，即默認(rèn)情況下 1 fp = 1vp。如果用戶在設(shè)置中選擇了更大的字體，字體的實(shí)際顯示大小就會(huì)在 vp 的基礎(chǔ)上乘以 scale 系數(shù)，即 1 fp = 1 vp * scale。
關(guān)于尺寸單位的補(bǔ)充HarmonyOS官方文檔-Native API-JS API-語法-CSS語法參考
邏輯像素px(文檔中以
1. 默認(rèn)卡片具有的邏輯寬度為150px，實(shí)際顯示時(shí)會(huì)將頁面布局縮放至屏幕實(shí)際寬度，如100px在寬度為300的卡片上，實(shí)際渲染為200物理像素(從150px向300物理像素，所有尺寸放大2倍)。
2. 額外配置autoDesignWidth為true時(shí)，邏輯像素px將按照屏幕密度進(jìn)行縮放，如100px在屏幕密度為3的設(shè)備上，實(shí)際渲染為300物理像素。應(yīng)用需要適配多種設(shè)備時(shí)，建議采用此方法。
5.1.2 新JS實(shí)例
兩種方法
創(chuàng)建新的JS UI的PA，并同時(shí)創(chuàng)建實(shí)例
解疑：Launcher Ability
僅創(chuàng)建一個(gè)新的實(shí)例
Ability與實(shí)例的指定
跟Java中Ability與AbilitySlice的指定是類似的
- Java中通過setUIContent()
- Js中通過setInstanceName()
注：
1.默認(rèn)情況MainAbility加載default實(shí)例，不需要通過setInstanceName()傳入default這個(gè)實(shí)例名稱字符串。
2.setInstanceName(String name)的參數(shù)“name”指實(shí)例名稱，實(shí)例名稱與config.json文件中module.js.name的值對(duì)應(yīng)。
5.1.3 初識(shí)頁面
講JS開發(fā)目錄的介紹，著重講清楚了i18n目錄的來歷、結(jié)構(gòu)、用處。
其他內(nèi)容見HarmonyOS官方文檔-開發(fā)-UI-JS UI框架-初步體驗(yàn)JS FA應(yīng)用-JS FA概述
5.1.4頁面跳轉(zhuǎn)
(1)概念
頁面棧：JS UI中，支持頁面的層級(jí)結(jié)構(gòu)，即上層頁面遮蓋下層頁面，形成棧結(jié)構(gòu)。
頁面路由：頁面的跳轉(zhuǎn)關(guān)系被稱為頁面路由，由JS UI的router模塊來管理，需要js文件的export default的代碼塊前進(jìn)行導(dǎo)入
- import router from '@system.router';
(2)router模塊
ctrl+鼠標(biāo)左鍵router進(jìn)去以后，對(duì)英文注解進(jìn)行翻譯
方便記憶的方法總結(jié)(老師書上還對(duì)參數(shù)做了一定的解釋，特別棒)
- push(obj: Router Options)：跳轉(zhuǎn)(覆蓋)
- replace(obj: RouterOptions):跳轉(zhuǎn)(銷毀)
- back(obj?: BackRouterOptions):返回
- clear():清除(被遮蓋的頁面)
- getLength():堆棧中的頁數(shù)
- getState():獲取有關(guān)當(dāng)前頁面狀態(tài)的信息，返回IRouterState對(duì)象，該對(duì)象包括index、name、path。
- index：整型，表示當(dāng)前頁面所在的頁面棧中的位置，從底層到頂層是從1開始計(jì)數(shù)的
- name：字符串，表示當(dāng)前頁面的文件名
- path：字符串，表示當(dāng)前頁面的路徑
- /**
- * @Syscap SysCap.ACE.UIEngine
- */
- export default class Router {
- /**
- * Navigates to a specified page in the application based on the page URL and parameters.
- * 根據(jù)頁面URL和參數(shù)導(dǎo)航到應(yīng)用程序中的指定頁面。
- * @param obj
- */
- static push(obj: RouterOptions): void;
- /**
- * Replaces the current page with another one in the application. The current page is destroyed after replacement.
- * 用應(yīng)用程序中的另一頁替換當(dāng)前頁。替換后，當(dāng)前頁面將被銷毀。
- * @param obj
- */
- static replace(obj: RouterOptions): void;
- /**
- * Returns to the previous page or a specified page.
- * 返回上一頁或指定頁。
- * @param obj
- */
- static back(obj?: BackRouterOptions): void;
- /**
- * Clears all historical pages and retains only the current page at the top of the stack.
- * 清除所有歷史頁面，并在堆棧頂部僅保留當(dāng)前頁面。
- */
- static clear(): void;
- /**
- * Obtains the number of pages in the current stack.
- * 獲取當(dāng)前堆棧中的頁數(shù)。
- * @returns Number of pages in the stack. The maximum value is 32.
- */
- static getLength(): string;
- /**
- * Obtains information about the current page state.
- * 獲取有關(guān)當(dāng)前頁面狀態(tài)的信息。
- * @returns Page state.
- */
- static getState(): RouterState;
- }
出入棧與方法的對(duì)應(yīng)
- push：新頁面入棧
- back：當(dāng)前頁面出棧
- replace：把當(dāng)前頁面出棧、替換的新頁面入棧
- clear：把當(dāng)前頁面以下的所有頁面都出棧
(3)實(shí)現(xiàn)index頁面跳轉(zhuǎn)到secpage頁面
index.js中實(shí)現(xiàn)跳轉(zhuǎn)代碼
- //index.js
- //導(dǎo)入router模塊
- import router from '@system.router';
- export default {
- data: {
- harmony:null
- },
- onInit() {
- this.harmony ="董昱老師YYDS"
- },
- //跳轉(zhuǎn)到secpage的方法
- toSecPage(){
- //通過push方法入棧
- router.push({
- //指定跳轉(zhuǎn)位置
- uri:'pages/index/secpages/secpages',
- //傳遞數(shù)據(jù)
- params:{
- harmony: this.harmony
- }
- });
- }
- }
進(jìn)行一些基本的設(shè)置以后，動(dòng)圖奉上!
(4)使用被傳遞的數(shù)據(jù)，并實(shí)現(xiàn)從SecPage返回index
在secpage.js里接收index傳過來數(shù)據(jù)，并通過console.info(message)方法將字符串變量以HiLog的形式輸出
- //secpage.js
- import router from '@system.router';
- export default {
- data: {
- title: '跳轉(zhuǎn)成功'
- },
- onInit(){
- //輸出剛被傳遞出來的Harmony字符串
- console.info(this.harmony);
- },
- back(){
- router.back();
- }
- }
5.1.5 頁面的生命周期函數(shù)
這一塊兒，書中沒有官方文檔講得詳細(xì)，圖解也沒有那么易懂，所以采取的互相補(bǔ)充的方式
HarmonyOS官方文檔-JS API參考-手機(jī)、平板、智能屏和智能穿戴開發(fā)-框架說明-生命周期
(1)頁面生命周期(總結(jié)+補(bǔ)充)
頁面生命周期(書中只講了前5個(gè)即從初始化到銷毀的生命周期)
(2)頁面A的生命周期接口的調(diào)用順序
- 打開頁面A：onInit() -> onReady() -> onShow()
- 在頁面A打開頁面B：onHide()
- 從頁面B返回頁面A：onShow()
- 退出頁面A：onBackPress() -> onHide() -> onDestroy()
- 頁面隱藏到后臺(tái)運(yùn)行：onInactive() -> onHide()
- 頁面從后臺(tái)運(yùn)行恢復(fù)到前臺(tái)：onShow() -> onActive()
注意：
- 調(diào)用生命周期函數(shù)，可以通過conslole.info()進(jìn)行打印
- 通過onBackPress()方法監(jiān)聽系統(tǒng)返回事件
- 一個(gè)完整的頁面生命周期中，至少會(huì)被調(diào)用一次，并且onInit() 、onReady()、onDestroy()僅能被調(diào)用一次
(3)Java UI中與JS UI中Page Ability的對(duì)比(補(bǔ)充)
相關(guān)官方文檔
JS UI
Java UI
Page的組成單元
- Java UI中是AbilitySlice(AbilitySlice主要用于承載單個(gè)頁面的具體邏輯實(shí)現(xiàn)和界面UI，是應(yīng)用顯示、運(yùn)行和跳轉(zhuǎn)的最小單元)
- JS UI中是JavaScript實(shí)例(見5.1.1)
組成單元的生命周期與Page Ability的生命周期
組成單元的生命周期依托于Page的生命周期。組成單元的生命周期與Page的相應(yīng)回調(diào)類似，但組成單元還具有獨(dú)立于Page的生命周期變化，如同一Page中的AbilitySlice之間導(dǎo)航時(shí)，此時(shí)Page的生命周期狀態(tài)不會(huì)改變。
圖解
Java UI
Js UI
5.1.6 應(yīng)用對(duì)象(應(yīng)用生命周期)
(1)應(yīng)用生命周期(4個(gè))
注意
- 在任何一個(gè)頁面中，通過this.$app代碼即可獲取當(dāng)前的應(yīng)用對(duì)象，應(yīng)用對(duì)象應(yīng)用自身的生命周期，開發(fā)者可以在應(yīng)用對(duì)象中實(shí)現(xiàn)JavaScript全局變量。
- 在onCreate()、onDestroy()兩種方法中可以實(shí)現(xiàn)數(shù)據(jù)庫的管理，例如：在前者方法中執(zhí)行一些初始化操作(網(wǎng)絡(luò)連接、賬號(hào)檢查)、在后者方法中檢查數(shù)據(jù)庫是否關(guān)閉，如果未關(guān)閉則要立即關(guān)閉。
(2)共享應(yīng)用對(duì)象的變量(全局變量)
應(yīng)用對(duì)象是一個(gè)單例，在應(yīng)用對(duì)象中定義的變量可以在所有頁面中進(jìn)行調(diào)用。
在app.js中添加1個(gè)變量jumpCount，用于記錄用戶的頁面跳轉(zhuǎn)次數(shù)，然后創(chuàng)建該變量的Get/Set方法
- //app.js
- export default {
- data:{
- jumpCount:null
- },
- //獲取頁面跳轉(zhuǎn)次數(shù)
- getJumpCount(){
- return this.jumpCount;
- },
- //設(shè)置頁面的跳轉(zhuǎn)次數(shù)
- setJumcount(){
- this.jumpCount =count;
- },
- //頁面的跳轉(zhuǎn)次數(shù) +1
- increaseJumpCount(){
- this.jumpCount ++;
- },
- onCreate() {
- this.jumpCount =0; //初始化頁面的跳轉(zhuǎn)次數(shù)為0
- console.info('AceApplication onCreate');
- },
- onDestroy() {
- console.info('AceApplication onDestroy');
- }
- };
對(duì)index.js和secpage.js進(jìn)行相應(yīng)的設(shè)置最后的日志
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
