免費(fèi)AI編程助手
APICloud 七天培訓(xùn)課 第二天
/ title: 7天培訓(xùn)課2 / <style<style> </style>
第二天：理解APICloud應(yīng)用執(zhí)行流程，掌握界面布局相關(guān)API使用，了解屏幕適配原理，從0開(kāi)始搭建整體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í)行流程說(shuō)明
2.1 主Widget容器（Main Widget）
2.2 根窗口（Root Window）
3.1 了解config文件作用
3.2 掌握config文件使用
4.1 content事件
4.2 apiready事件
5.1 查看api對(duì)象功能列表
5.2 api對(duì)象常用方法使用
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)欄效果說(shuō)明
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è)頁(yè)面UI結(jié)構(gòu)分析
10.2 按照UI架構(gòu)設(shè)計(jì)創(chuàng)建對(duì)應(yīng)的UI組件及H5文件
10.3 編寫(xiě)每個(gè)Window或Frame所對(duì)應(yīng)的H5頁(yè)面文件
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)頁(yè)面之間參數(shù)傳遞
10.8 監(jiān)聽(tīng)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í)行流程說(shuō)明
推薦視頻：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文件使用
推薦文檔：config.xml應(yīng)用配置說(shuō)明
推薦視頻：APICloud視頻之初級(jí)代碼篇第12講 APICloud配置文件簡(jiǎn)介
<div id="P4"></div>
4. 引擎的兩個(gè)重要事件
--
4.1 content事件:
此事件是在引擎解析config.xml文件中的Contont標(biāo)簽時(shí)產(chǎn)生，是事件隊(duì)列中的第一個(gè)事件。引擎通過(guò)處理此事件得到應(yīng)用（Main Widget）的根窗口（Root Window）需要自動(dòng)加載的HTML文件。
4.2 apiready事件:
此事件是在api對(duì)象準(zhǔn)備完畢后產(chǎn)生，在每個(gè)Window或Frame的HTML代碼中都需要監(jiān)聽(tīng)此事件，以確定APICloud擴(kuò)展對(duì)象已經(jīng)準(zhǔn)備完畢，可以調(diào)用了。
<div id="P5"></div>
5. api對(duì)象
--
api對(duì)象是APICloud在全局作用域內(nèi)唯一的一個(gè)擴(kuò)展對(duì)象，api對(duì)象下包含了一個(gè)APP最常使用的擴(kuò)展方法和屬性，如窗口操作、事件監(jiān)聽(tīng)、網(wǎng)絡(luò)請(qǐng)求、設(shè)備訪問(wèn)等等。api對(duì)象無(wú)需引入，可以直接使用。而APICloud的擴(kuò)展模塊，都需要通過(guò)api.require方法引入后才能使用。
5.1 查看api對(duì)象功能
5.2 api對(duì)象常用方法使用
<div id="P6"></div>
6. 屏幕適配
--
對(duì)于Window或Frame所加載的頁(yè)面，如何編寫(xiě)一套代碼完美適配所有屏幕。
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)先考慮絕對(duì)計(jì)量類(lèi)的單位 px，應(yīng)先在UI效果圖中（如720x1280尺寸圖）量出元素的寬或高對(duì)應(yīng)的 px 值，再除以屏幕倍率（如分辨率為720x1280設(shè)備的屏幕倍率通常為 2) 得到書(shū)寫(xiě)樣式時(shí)的確切數(shù)值。
推薦文檔：屏幕適配原理及實(shí)現(xiàn)
<div id="P7"></div>
7. 前端框架
--
7.1 APICloud前端框架的作用和設(shè)計(jì)思想
去除瀏覽器的默認(rèn)樣式和交互行為，簡(jiǎn)化dom操作，APP一切的顯示和行為由自己來(lái)定義。
推薦視頻：APICloud視頻之初級(jí)代碼篇第8講 前端框架
7.2 APICloud前端框架使用
推薦文檔：前端框架開(kāi)發(fā)指南
注意：不建議引用大的JS或CSS框架
<div id="P8"></div>
8. 狀態(tài)欄處理
--
8.1 沉浸式狀態(tài)欄效果說(shuō)明
8.2 沉浸式效果實(shí)現(xiàn)
- 在config.xml文件配置是否開(kāi)啟:
<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 頁(yè)面UI結(jié)構(gòu)分析
10.2 按照UI架構(gòu)設(shè)計(jì)創(chuàng)建對(duì)應(yīng)UI組件及H5文件
根據(jù)UI架構(gòu)設(shè)計(jì)文檔(ui-architecture.xmind)，創(chuàng)建需要的Window或Frame，以及Window或Frame所需加載的H5頁(yè)面文件
10.3 編寫(xiě)Window或Frame所對(duì)應(yīng)的H5頁(yè)面
- 使用HTML標(biāo)簽構(gòu)建頁(yè)面元素: 注意要使用語(yǔ)義化標(biāo)簽
- header
- nav
- section
- footer
- 使用CSS為頁(yè)面元素添加樣式: 常用元素樣式定義常用規(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之間切換
- 手勢(shì)滑動(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)頁(yè)面之間的參數(shù)傳遞
- 參數(shù)pageParam
- api.pageParam
10.8 監(jiān)聽(tīng)Android返回鍵，實(shí)現(xiàn)退出APP
- 監(jiān)聽(tīng)keyback事件
10.9 阻止iOS滑動(dòng)返回
- 設(shè)置slidBackEnabled參數(shù)
更多建議：