免費(fèi)AI編程助手
APICloud 七天培訓(xùn)課 第二天
/ title: 7天培訓(xùn)課2 / <style<style> </style>
第二天：理解APICloud應(yīng)用執(zhí)行流程，掌握界面布局相關(guān)API使用，了解屏幕適配原理，從0開始搭建整體APP框架，完成所有界面跳轉(zhuǎn)，輸出完整的APP靜態(tài)數(shù)據(jù)版本。
教程更新：Github地址
學(xué)習(xí)目標(biāo)>>查看配套的視頻講解
--
- APICloud應(yīng)用的執(zhí)行流程，Main Widget和Root Window的創(chuàng)建時(shí)機(jī)
- 為什么啟動(dòng)會(huì)加載index.html和執(zhí)行apiready函數(shù)
- APICloud屏幕適配的原理，彈性響應(yīng)式和流式結(jié)合的布局方式
- 如何搭建APP的UI結(jié)構(gòu)
主要內(nèi)容
--
1.1 APICloud應(yīng)用執(zhí)行流程說明
2.1 主Widget容器（Main Widget）
2.2 根窗口（Root Window）
3.1 了解config文件作用
3.2 掌握config文件使用
4.1 content事件
4.2 apiready事件
5.1 查看api對象功能列表
5.2 api對象常用方法使用
6.1 viewport設(shè)置
6.2 UI尺寸
6.3 量圖標(biāo)準(zhǔn)
7.1 APICloud前端框架的作用和設(shè)計(jì)思想
7.2 APICloud前端框架使用
8.1 沉浸式狀態(tài)欄效果說明
8.2 沉浸式效果實(shí)現(xiàn)
8.3 修改狀態(tài)欄樣式
9.1 Widget相關(guān)API
9.2 Window相關(guān)API
9.3 Layout相關(guān)API
9.4 Frame相關(guān)API
10.1 每個(gè)頁面UI結(jié)構(gòu)分析
10.2 按照UI架構(gòu)設(shè)計(jì)創(chuàng)建對應(yīng)的UI組件及H5文件
10.3 編寫每個(gè)Window或Frame所對應(yīng)的H5頁面文件
10.4 實(shí)現(xiàn)Frame之間切換
10.5 優(yōu)化onclick交換響應(yīng)
10.6 實(shí)現(xiàn)界面之間跳轉(zhuǎn)
10.7 實(shí)現(xiàn)頁面之間參數(shù)傳遞
10.8 監(jiān)聽Android返回鍵，實(shí)現(xiàn)退出APP
10.9 阻止iOS滑動(dòng)返回
<div id="P1"></div>
1. 理解APICloud應(yīng)用執(zhí)行流程
-
1.1 APICloud應(yīng)用執(zhí)行流程說明
推薦視頻：APICloud視頻之初級(jí)代碼篇第3講 APICloud整體介紹
<div id="P2"></div>
2. Widget中代碼執(zhí)行之前，由引擎默認(rèn)創(chuàng)建的兩個(gè)UI組件實(shí)例
--
2.1 主Widget容器（Main Widget）
是一個(gè)APP所有的UI組件的父容器，由引擎初始化完畢后自動(dòng)創(chuàng)建，如果關(guān)閉了主Widget，那么整個(gè)應(yīng)用也就退出了。
2.2 根窗口（Root Window）
是Window組件的一個(gè)實(shí)例，由引擎初始化完畢后自動(dòng)創(chuàng)建，用于加載content事件所指定的HTML文件(通常為widget根目錄下的index.html),Window的name固定為'root'。
<div id="P3"></div>
3. config文件解析
--
APICloud引擎初始化完成后的第一個(gè)操作就是解析config.xml文件
3.1 了解config文件作用
3.2 掌握config文件使用
推薦視頻：APICloud視頻之初級(jí)代碼篇第12講 APICloud配置文件簡介
<div id="P4"></div>
4. 引擎的兩個(gè)重要事件
--
4.1 content事件:
此事件是在引擎解析config.xml文件中的Contont標(biāo)簽時(shí)產(chǎn)生，是事件隊(duì)列中的第一個(gè)事件。引擎通過處理此事件得到應(yīng)用（Main Widget）的根窗口（Root Window）需要自動(dòng)加載的HTML文件。
4.2 apiready事件:
此事件是在api對象準(zhǔn)備完畢后產(chǎn)生，在每個(gè)Window或Frame的HTML代碼中都需要監(jiān)聽此事件，以確定APICloud擴(kuò)展對象已經(jīng)準(zhǔn)備完畢，可以調(diào)用了。
<div id="P5"></div>
5. api對象
--
api對象是APICloud在全局作用域內(nèi)唯一的一個(gè)擴(kuò)展對象，api對象下包含了一個(gè)APP最常使用的擴(kuò)展方法和屬性，如窗口操作、事件監(jiān)聽、網(wǎng)絡(luò)請求、設(shè)備訪問等等。api對象無需引入，可以直接使用。而APICloud的擴(kuò)展模塊，都需要通過api.require方法引入后才能使用。
5.1 查看api對象功能
5.2 api對象常用方法使用
<div id="P6"></div>
6. 屏幕適配
--
對于Window或Frame所加載的頁面，如何編寫一套代碼完美適配所有屏幕。
6.1 viewport設(shè)置：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />推薦視頻（關(guān)于viewport配置原理）：APICloud視頻之初級(jí)代碼篇第7講 APICloud應(yīng)用結(jié)構(gòu)分析
6.2 UI尺寸：
一套合適尺寸的UI， 推薦：720x1280
6.3 量圖標(biāo)準(zhǔn)：
優(yōu)先考慮絕對計(jì)量類的單位 px，應(yīng)先在UI效果圖中（如720x1280尺寸圖）量出元素的寬或高對應(yīng)的 px 值，再除以屏幕倍率（如分辨率為720x1280設(shè)備的屏幕倍率通常為 2) 得到書寫樣式時(shí)的確切數(shù)值。
推薦文檔：屏幕適配原理及實(shí)現(xiàn)
<div id="P7"></div>
7. 前端框架
--
7.1 APICloud前端框架的作用和設(shè)計(jì)思想
去除瀏覽器的默認(rèn)樣式和交互行為，簡化dom操作，APP一切的顯示和行為由自己來定義。
推薦視頻：APICloud視頻之初級(jí)代碼篇第8講 前端框架
7.2 APICloud前端框架使用
推薦文檔：前端框架開發(fā)指南
注意：不建議引用大的JS或CSS框架
<div id="P8"></div>
8. 狀態(tài)欄處理
--
8.1 沉浸式狀態(tài)欄效果說明
8.2 沉浸式效果實(shí)現(xiàn)
- 在config.xml文件配置是否開啟:
<preference name="statusBarAppearance" value="true" />
- 在Window或Frame的apiready事件后，調(diào)用$api.fixStatusBar()方法;
8.3 修改狀態(tài)欄樣式
推薦視頻： APICloud視頻之初級(jí)代碼篇第7講 APICloud應(yīng)用結(jié)構(gòu)分析
<div id="P9"></div>
9. 界面布局相關(guān)API
--
9.1 Widget相關(guān)API
9.2 Window相關(guān)API
9.3 Layout相關(guān)API
FrameGroup
SlidLayout
DrawerLayout
9.4 Frame相關(guān)API
- api.openFrame()
- api.closeFrame()
- api.setFrameAttr()
- api.bringFrameToFront()
- api.sendFrameToBack()
- api.frameName
- api.frameWidth
- api.frameHeight
<div id="P10"></div>
10. 搭建APP整體框架，完成APP靜態(tài)數(shù)據(jù)版本
--
10.1 頁面UI結(jié)構(gòu)分析
10.2 按照UI架構(gòu)設(shè)計(jì)創(chuàng)建對應(yīng)UI組件及H5文件
根據(jù)UI架構(gòu)設(shè)計(jì)文檔(ui-architecture.xmind)，創(chuàng)建需要的Window或Frame，以及Window或Frame所需加載的H5頁面文件
10.3 編寫Window或Frame所對應(yīng)的H5頁面
- 使用HTML標(biāo)簽構(gòu)建頁面元素: 注意要使用語義化標(biāo)簽
- header
- nav
- section
- footer
- 使用CSS為頁面元素添加樣式: 常用元素樣式定義常用規(guī)范
- display
- position
- width
- height
- box-sizing
- 使用彈性盒子布局(flexbox): 注意考慮瀏覽器兼容性
- display: -webkit-box
- display: -webkit-flex
- display: flex
- -webkit-box-orient: vertical
- -webkit-flex-flow: column
- flex-flow: column
- -webkit-blox-orient: horizontal
- -webkit-flex-flow: row
- flex-flow: row
- -webkit-box-flex: 1
- -webkit-flex: 1
- flex: 1
10.4 實(shí)現(xiàn)Frame之間切換
- 手勢滑動(dòng)切換
- 點(diǎn)擊菜單切換
10.5 優(yōu)化點(diǎn)擊交互響應(yīng)
消除webkit內(nèi)核默認(rèn)的onclick事件的300ms響應(yīng)延遲
- tapmode屬性
- api.parseTapmode方法
10.6 實(shí)現(xiàn)界面之間跳轉(zhuǎn)
按照產(chǎn)品原型實(shí)現(xiàn)各UI界面之前的切換
10.7 實(shí)現(xiàn)頁面之間的參數(shù)傳遞
- 參數(shù)pageParam
- api.pageParam
10.8 監(jiān)聽Android返回鍵，實(shí)現(xiàn)退出APP
- 監(jiān)聽keyback事件
10.9 阻止iOS滑動(dòng)返回
- 設(shè)置slidBackEnabled參數(shù)
更多建議：