AppCan初級工程師講師講義手冊[鍵入文檔標題][鍵入文檔副標題][在此處鍵入文檔摘要。摘要通常為文檔內容的簡短概括。在此處鍵入文檔摘要。摘要通常為文檔內容的簡短概括。]zhaochengxue[選取日期]

目錄一站式移動開發(fā)服務平臺 1AppCan的應用開發(fā)流程 16AppCan的UI布局與控件 35JSSDK 42網絡通訊與數據存儲 56API簡介 62MAS 66項目實戰(zhàn) 81一站式移動開發(fā)服務平臺幻燈片1話述：首先自我介紹，以自己最擅長的方式介紹自己如：我是培訓部XXX，今天由我給在座的各位分享本次課程，希望通過本次分享各位能夠有所收獲，分享過程中如果有什么問題可以隨時提問，本次課主要從以下三個方面進行分享，【切到下一張PPT】幻燈片2話述：分別是HybridApp開發(fā)技術、一站式移動開發(fā)平臺及一站式開發(fā)服務平臺，我們先分享第一個內容，【切到下一張PPT】幻燈片3幻燈片4話述：各位都知道，我們平常開的汽車，有燒油的，有電動的，也有油電混合動力的，這種混合動力我們稱之為Hybrid；APP開發(fā)技術有原生開發(fā)、有WEB語言開發(fā)，那有沒有兩種語言混合開發(fā)的技術？答案是肯定的，這就是HybridApp開發(fā)技術，如何理解呢？【切到下一張PPT】幻燈片5話述：原生APP是使用程序語言JAVA或SWIFT進行開發(fā)，用戶體驗好，跨平性差WEBAPP使用HTML5語言開發(fā)，跨平臺性好，用戶體驗差HybridApp則集兩者之優(yōu)勢橫空出世，像【講的同時切到下一張】face客戶端、掌上百度及淘寶客戶端都是使用混合技術開發(fā)的。幻燈片6話述：前面我們說過HybridApp開發(fā)技術是使用WEB及程序語言同時進行開發(fā)，到底誰占主體呢？【講的時候切到下一張PPT】幻燈片7話述：我們可以通過原生APP和混合APP開發(fā)過程中開發(fā)者的工作量來進行衡量誰占主體，我們的手機里裝著各種APP，打開APP呈現在我們面前的是一個個頁面【講的時候切到下一張PPT】幻燈片8話述：這些頁面是根據功能邏輯進行組織的，我們使用任何技術開發(fā)都是為了完成界面、邏輯和組織的研發(fā)。【講的時候切到下一張】幻燈片9話述：我們了解下使用原生技術開發(fā)APP工作量有多大。【講的時候切到下一張PPT】幻燈片10話述：【也可以按照圖轉化成自己的語言，重點介紹幾個】需要使用原生技術實現UI、通訊、內部邏輯例如數據校驗等；需要實現界面的動畫效果和參數傳遞處理界面的生存周期和邏輯封裝整合基礎庫供開發(fā)調用配置開發(fā)環(huán)境、工程、編譯參數并最終完成應用的編譯發(fā)布所有這些都需要原生開發(fā)人員完成開發(fā)，且不同平臺基本上都要完成一次【講的時候切到下一張PPT】幻燈片11話述：Hybrid開發(fā)技術即希望引入HTML或腳本技術來達到減少以致忽略原生開發(fā)人員工作量的目標，我們先介紹下國外混合模式開發(fā)平臺代表phonegap【講的時候切到下一張PPT】幻燈片12話述：phonegap開發(fā)模式為allinonepage，具體可參照備注列舉幾條或按圖說明白也可以，其實在使用phonegap開發(fā)過程中我們也會發(fā)現以下不足【講的時候切到下一張PPT】幻燈片13話述：可以一條一條過，或重點介紹幾條；對于國內混合模式開發(fā)技術代表AppCan的開發(fā)模式及相對于phonegap來說有哪些優(yōu)勢呢？接下來我們會逐一講解；【切到下一張PPT】幻燈片14話述：AppCan采用的是OneFeatureOnePage開發(fā)模式，按備注或圖介紹AppCan優(yōu)勢，AppCan技術是以HTML5開發(fā)人員作為開發(fā)主體，原生開發(fā)人員輔導的開發(fā)體系【講的時候切到下一張PPT】幻燈片15話述：HTML開發(fā)人員聚焦于獨立界面邏輯、交互的開發(fā)，我們通過插件引擎在體驗、能力、效率、安全各方面提供支撐；通過以上的對比，我們可以得出結論，在混合開發(fā)中網頁語言占主體，您只需要懂WEB前端語言就可以開發(fā)APP，相對開發(fā)難度低、入門快，對于企業(yè)來說成本是相對較低的，為了更好的為企業(yè)和開發(fā)者服務我們推出了一站式移動開發(fā)服務平臺，我們先看一站式移動開發(fā)平臺，這也是我們今天講的第二個內容，在這里主要給大家講解兩塊內容，一塊是平臺特性，一塊是產品線【講的時候切到下一張PPT】幻燈片16話述：我們先看下平臺架構【講的時候切到PPT17】幻燈片17話述：對于開發(fā)者而言，只需完成UI部分工作，只它工作我們已經為你做好了，如【可以按圖列舉幾個】，我們的平臺有哪些特性呢?【講的時候切到下一張PPT】特性的PPT一張張說就可以了幻燈片18幻燈片19幻燈片20幻燈片21幻燈片22幻燈片23幻燈片24幻燈片25幻燈片26話述：上面給大家介紹了平臺的特性，需要大家課下親自體驗下，接下來給大家介紹下我們的產品線【講的時候切到下一張PPT】幻燈片27話述：我們先看產品線之一MEAP平臺，包含兩大系統(tǒng)SDK和MAS，SDK包含兩款產品IDE和DSS，接下來重點講解下DSS及MAS系統(tǒng)功能及IDE與DSS\MAS之間的關系【講的時候切到PPT28】幻燈片28話述：按圖分角色說明就可以，【完成后切到下一張PPT】幻燈片29話述：當APP與企業(yè)傳統(tǒng)業(yè)務系統(tǒng)【如OA\CRM\數據庫等】對接數據時，一種方法是直接與傳統(tǒng)業(yè)務系統(tǒng)對接，另外一種方法是通過MAS與傳統(tǒng)業(yè)務對接，MAS已經封裝了幾種常用接口，通過MAS與傳統(tǒng)業(yè)務對接再把數據開發(fā)出去，可以保證數據的安全及接口開發(fā)的工作量【可自由發(fā)揮】。【講的時候切到下一張PPT】幻燈片30話述：企業(yè)移動信息化障礙就是移動化應用與企業(yè)各個業(yè)務系統(tǒng)之間的集成，為解決此問題我們推出了企業(yè)MBAAS【講的同時切到下一張PPT】幻燈片31話述：按PPT介紹就可以【就是一種云服務】幻燈片32話述：我們還有另外一大產品線，就是EMM平臺，該平臺提供了對人、設備、應用的管理服務，包括以下模塊【按PPT講】幻燈片33幻燈片34幻燈片35幻燈片36幻燈片37幻燈片38幻燈片39幻燈片40幻燈片41幻燈片42幻燈片43幻燈片44幻燈片45幻燈片46AppCan的應用開發(fā)流程幻燈片1話述：首先介紹一下本節(jié)課的主要的學習內容：AppCan應用的開發(fā)流程。本次課程的主要內容有：【切換到下一張PPT】幻燈片2話述：在本次培訓的，主要圍繞三個主題：AppCan開發(fā)環(huán)境的搭建、應用的開發(fā)流程、應用的開發(fā)流程。【切到下一張PPT】幻燈片3話述：話述：首先需要到官網上下載一下大眾版的IDE。引導學員學會訪問在線文檔。需要提醒學員注意，目前不支持xpsp2及其以下操作系統(tǒng)和MacOSX操作系統(tǒng)。當IDE下載完成的時候，就可以點擊他，按照提示直接安裝了。【切到下一張PPT】幻燈片4話述：IDE下載完成后，需要進行本地安裝，雙擊IDE圖標，進入IDE安裝程序歡迎界面。按照頁面提示信息，就可以成功安裝大眾版IDE。IDE安裝完成后，需要了解一下，相關的目錄信息。找到對應的安裝路徑。【切到下一張PPT】幻燈片5話述：AppCan-IDE:集成開發(fā)環(huán)境HDK:項目開發(fā)、調試、布署及打包等的相關資源Mas-Applications:存放Mas服務Mobile-Applications:存放App項目widgetapp:存放源碼幻燈片6話述：使用大眾版IDE，進行項目開發(fā)，首先需在要上注冊一個帳號，下面介紹一下帳號的注冊方法。【切到下一張PPT】幻燈片7話述：帳號注冊完成之后，我們就可以利用已有的帳號，完成的登錄。【切到下一張PPT】幻燈片8話述：成功登錄IDE后，給學員介紹一下相關頁面。并創(chuàng)建一個應用。重點介紹應用的ID和KEY。在官網上將應用創(chuàng)建好后，需要在IDE中完成應用的開發(fā)。需在啟動IDE。【切到下一張PPT】幻燈片9-10話述：啟動IDE，并同步項目。項目民經創(chuàng)建完成，開發(fā)者首先需要了解一具應用的目錄結構。【切到下一張PPT】幻燈片11話述：介紹項目目錄，根路徑文件phone目錄為項目的基礎目錄；icon.png是應用的圖標；index.html和index_content.html是實際應用界面代碼；config.xml是應用配置文件。CSS樣式目錄css目錄包含了AppCanHybrid應用的基礎，依賴于CSS文件；ui-base.css是通用css類，主要定義常用的css樣式；ui-box.css是AppCanHybrid應用的布局css類；ui-color.css是應用的配色方案文件；Appcan.control.css是基于UI基礎類之上定義的AppCan基礎控件。例如按鈕、列表等；appcan.icon.css是AppCan提供的默認圖片圖標；js目錄下包含了AppCanJSSDK的js庫文件；fonts目錄下是AppCan引用的font-awesome字體圖標庫文件，內置了豐富的圖標。JavaScript腳本目錄appcan.js是AppCanJSSDK的核心文件，用于封裝DOM對象處理、窗口操作、通訊服務等基礎操作；appcan.control.js是AppCanJS基礎控件，例如按鈕、開關等；appcan.listview.js是listview控件的js對象實現；appcan.slider.js是圖片滑塊的js對象實現；appcan.treeview.js是treeview對象的實現。再來看一下config.xml文件【切到下一張PPT】幻燈片12話述：重點介紹config.xml文件，主頁面如何加載。【切到下一張PPT】幻燈片13話述：重點介紹index.html文件，其中<metaname="viewport"content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">定義了我們的網頁采用設備精度，屏幕寬度，不縮放。這種配置可以充分發(fā)揮手機設備屏幕的顯示能力，使用戶界面更加美觀精致。這一部分默認引入了AppCan屏幕自適配方案的基礎CSS文件、圖標字庫awesome樣式文件和控件樣式文件。開發(fā)人員可以添加其他第三方CSS樣式或自定義樣式的引用。Body部分是應用界面布局和展示的主體部分。Body一般由一或者多個page組成。每個頁面我們需要為其起個名字，多個page我們一般在使用HTML技術實現多頁面處理時采用。多個page中，必須只有一個處于顯示狀態(tài)，其他配置需要使用uhide類進行隱藏。為了提高體驗性減少開發(fā)復雜度，一般只在一些簡單內容展示切換時使用。絕大部分場景我們都使用一個頁面。頁面一般由三個部分組成header、content和footer。Header部分是一般展示窗口的標題和標題按鈕。Content一般作為frame的屏幕映射存在，用于定位frame。Footer一般作為下導航或狀態(tài)展示。Header和Footer根據需求設定，并不一定必須存在。Body區(qū)域還包含了一些script標簽。這里主要用來引入我們依賴的js文件。<scriptsrc="js/appcan.js"></script><scriptsrc="js/appcan.control.js"></script>上述頁面布局模型能夠適配絕大部分場景。當然開發(fā)者也可完全使用其他框架重新構造頁面。再來看一下浮動窗口。【切到下一張PPT】幻燈片14話述：重點介紹index_content.html文件。主窗口是如何加載浮動窗口的。【切到下一張PPT】幻燈片15話述：在應用的開發(fā)過程中，需要實時預覽頁面效果。AppCan支持本地模擬調試，介紹如何進行本地模擬調試。【切到下一張PPT】幻燈片16話述：AppCan同時也支持斷點調試，在頁面中設置一個簡單的錯誤，講清楚如何設置斷點調試。【切到下一張PPT】幻燈片17-19話述：AppCan新增的一個功能，是真機調試，詳細介紹真機調試的步驟及注意事項。【切到下一張PPT】幻燈片20-23話述：總結前面所講的AppCan平臺上如何進行應用的創(chuàng)建及開發(fā)，當開發(fā)完成后，需要進行打包。應用的打包可以分為本地打包和服務器打包兩種，需要強調三種打包的區(qū)別，首先完成本地打包功能。【切到下一張PPT】幻燈片24話述：重點介紹在官網服務器的打包，首先需要將源碼提交到服務器，右鍵單擊phone目錄，點擊team，完成源碼提交到官網服務器。【切到下一張PPT】幻燈片25-26話述：介紹如何在官網服務器上進行打包。【切到下一張PPT】幻燈片27話述：最后介紹一下利用SDK打包。AppCanSDK移動應用開發(fā)系統(tǒng)，是專為AppCanHybrid開發(fā)團隊設計的移動應用開發(fā)環(huán)境。它幫助企業(yè)緊密地把HTML開發(fā)人員、Native開發(fā)人員、測試人員、代碼配置管理員、項目管理人員聯(lián)系起來，組成有序高效的開發(fā)團隊。AppCanSDK結合Hybrid開發(fā)特點，梳理和規(guī)范了移動應用開發(fā)流程，使應用開發(fā)效率和質量得到了最大的提升。AppCanSDK包含了一整套完善、開放和高效的移動開發(fā)管理工具。AppCanDSS系統(tǒng)是AppCanSDK的核心子系統(tǒng)，為AppCanSDK系統(tǒng)提供集成化的編譯和Web管理服務。登錄sdk:/login簡單介紹一下AppCanSDK系統(tǒng)管理能力管理人員設置

系統(tǒng)提供獨立的系統(tǒng)管理員，負責管理系統(tǒng)中的所有用戶。管理員可以指定用戶為應用管理員，負責應用項目的維護。每個應用可以有多個管理員。應用管理員可以為應用設定應用開發(fā)人員、測試人員。引擎管理

通過AppCanSDK，可以獲取最新的引擎更新版本以適配最新的系統(tǒng)和終端。同時還支持項目定制引擎管理，為項目上傳專有引擎以適配特殊場景。引擎管理支持版本管理，插件管理系統(tǒng)提供公共插件管理，通過AppCanSDK，獲取最新版本的插件或版本信息。同時系統(tǒng)還支持項目定制插件管理，為項目上傳專有插件以適配特殊場景。插件管理支持版本管理，支持對無效插件的禁用。云端編譯打包

系統(tǒng)提供Android、iOS系統(tǒng)的遠程編譯打包服務。通過WEB界面，開發(fā)人員、項目經理、配置管理員可以便捷地完成應用參數的配置，編譯生成用于測試或發(fā)布的移動應用安裝包。

編譯打包服務提供如下類型服務Hybrid應用打包

用于組合HTML5代碼、NativePlugin、HybridEngine，編譯生成目標移動應用。WEBApp打包

用于拼裝HTML5代碼，壓縮為網頁文件包，并自動生成符合HTML5離線方案的索引文件。

WEBApp可以不依附于MAS系統(tǒng)，直接作為移動HTML5網站為用戶提供服務。補丁打包

通過版本比較，獲取版本間差異，對差異性文件進行拼裝，生成補丁包。可部署于AppCanEMM系統(tǒng)中，為移動應用提供補丁更新服務。AppCanSDK系統(tǒng)有三種用戶角色：系統(tǒng)運維人員、項目管理員和開發(fā)者。系統(tǒng)運維

人員默認帳號為admin，初始口令為admin。項目管理員和開發(fā)者由系統(tǒng)運維人員配置

創(chuàng)建。角色不同，登錄系統(tǒng)后展現的功能也不同。以應用管理員角色登錄系統(tǒng)后，有首頁、應用管理、操作日志、帳號設置四個模塊。

首頁模塊將顯示該管理員的登錄信息、項目信息統(tǒng)計等與該管理員所管理的項目相關的信息。點擊應用管理圖標，將顯示該管理員所管理的所有應用，同時還可以添加應用，或者

導入已有的應用。項目插件AppCanSDK系統(tǒng)本身自帶豐富的插件供應用開發(fā)調用。如果開發(fā)者自己開發(fā)了插件，也可以加入到系統(tǒng)當中，系統(tǒng)中的所有應用項目均可使用此插件。需要注意的是，應用項目中使用了哪些插件，不論是系統(tǒng)自帶的還是開發(fā)者開發(fā)的擴展插件，都必須在應用項目打包時，通過選擇插件功能添加插件，否則插件不會打包到應用安裝文件中。要查看項目插件，可點擊應用列表中的項目插件，瀏覽該應用的項目插件列表點選“刪除”，將刪除該項目插件。點選“編輯”，可對項目插件信息進行編輯。

點選“更新版本”，可更新插件的版本。點選“查看歷史版本”，可顯示該插件的所有版本。

點選“添加插件”，在頁面中輸入相應的信息后，點擊“創(chuàng)建”，即可創(chuàng)建新的插件。開發(fā)者管理點擊“開發(fā)者管理”按鈕，將顯示該項目的開發(fā)人員列表和測試人員列表，同時還可

以將開發(fā)人員從當前項目的開發(fā)者列表中刪除。

點擊“添加開發(fā)者”按鈕，將顯示系統(tǒng)運維管理員(admin)添加的所有普通用戶列表，

也可以將某位用戶添加到當前項目的開發(fā)者列表中。

添加測試人員操作步驟類似。項目引擎點擊應用列表的“項目引擎”按鈕，可查看該應用的項目引擎（注意不是公共引擎）信息，包括引擎的當前版本和引擎更新記錄。管理員還可以在這里更新引擎的當前版本。在引擎的更新記錄中會顯示對應引擎的停用或啟用狀態(tài)，若狀態(tài)為啟用，在打包應用時可以選擇該引擎，否則，該引擎不可用【切到下一張PPT】幻燈片28話述：點擊hybrid打包，可以進行應用的打包點擊應用列表的hybrid打包按鈕，打包應用。

應用打包分為如下幾個步驟：

設置圖標

上傳并保存圖標幻燈片29話述：利用SVN提交代碼。【切到下一張PPT】幻燈片30話述：點擊hybrid打包，進行混合應用打包。【切到下一張PPT】幻燈片31話述：設置啟動頁可以為相應的客戶端上傳多分辨率的啟動頁，上傳后保存。啟動頁有全屏和非全屏之分，如果選擇iPad或Android客戶端，還要分橫屏和豎屏。插件選擇

點擊“添加插件“。選擇項目插件或者公共插件。在已選插件的公共插件列表中，可看到剛才選擇的插件。也可以刪除已選擇的插件。引擎選擇可以選擇Android系統(tǒng)或者iOS系統(tǒng)的引擎，然后可以選擇項目引擎或公共引擎。這里選擇項目引擎，點擊設置當前版本，當前引擎版本將變?yōu)閯偛胚x擇的版本。【切到下一張PPT】幻燈片32話述：開關設置

基于AppCanSDK系統(tǒng)的應用引擎開發(fā)的移動應用，內置多種開關設置，需要在應用打包前進行配置。【切到下一張PPT】幻燈片33話述：證書管理

包括企業(yè)證書、發(fā)布證書和Android證書管理。如果企業(yè)申請了企業(yè)證書，并且希望應用的發(fā)布下載通過Apple公司的AppStore，那么需要上傳iOS企業(yè)證書。按照界面提示要求填寫信息，并上傳相應的證書及發(fā)布文件，最后點擊“保存”即可。發(fā)布證書是Apple公司面向普通開發(fā)者的應用發(fā)布證書，有此證書的應用只能在AppStore中發(fā)布下載才能正常安裝。iOS企業(yè)證書和iOS發(fā)布證書兩個功能只提供對應證書的上傳功能，應用打包時可以選擇使用哪個證書。Android證書用于Android應用的數字簽名，證書中指定了應用的有效時間、開發(fā)者信息等內容。可以使用JDK中自帶的keytool工具生成自定義的數字簽名文件。【切到下一張PPT】幻燈片33話述：云端打包選擇要打包的系統(tǒng)證書，填寫版本號、標簽名稱等，點擊“生成安裝包”。生成安裝包后在應用列表點擊“查看版本”，可以看到應用已經打包完成。可以點選“下載”或者“提交測試”。至此，hybrid打包完成。【切到下一張PPT】幻燈片34話述：查看版本點擊“查看版本”按鈕，顯示當前項目的版本列表，包括hybrid打包、補丁包、WebApp打包，并且顯示各個版本的打包狀態(tài)和詳細信息等。在版本列表中點擊“提交測試”，該打包將出現在該項目的測試人員的測試列表中。同時測試狀態(tài)變?yōu)闇y試中，待測試人員測試通過后，測試狀態(tài)將變?yōu)闇y試通過。刪除應用點擊應用列表的“刪除應用”按鈕，對應的應用將從該管理人員管理的應用列表中刪除。注意：

如在云端打包中點擊生成安裝包時，出現提示“應用的config.xml文件不存在”，一般是應用項目的代碼沒有上傳或者代碼上傳有問題，需要重新上傳代碼。補丁包當對應用進行了一些小的升級后，可以生成補丁包。填寫原始標簽名稱和新標簽名稱后，點擊打包，生成補丁包。點擊“查看版本”查看生成的補丁包。AppCan的UI布局與控件幻燈片1話述：以自己的方式，介紹一下今天培訓的主題UI布局及控件，看一下主要目錄。【切到下一張PPT】幻燈片2話述：本次課程的主要內容，介紹一下今天培訓的主要內容：UI布局，UI控件及UI綜合案例。【切到下一張PPT】幻燈片3話述：介紹彈性盒子結構，什么是彈性盒子？講師按照PPT的內容講解明白即可。主要是區(qū)別流式布局。【切到下一張PPT】幻燈片4話述：在IDE中講解一個案例，讓學員近一步加深理解流式布局與盒子模型。簡單的流式布局例子：<divstyle='display:inline;border:1pxsolidblue'><divstyle='display:inline;background:#66ccff'>aaaa</div><divstyle='display:inline;background:#ffffff'>bbbb</div></div>本地預覽結果。【切到下一張PPT】幻燈片5話述：彈性盒子例子：<divstyle='display:-webkit-box;width:600px;border:1pxsolidblue'><divstyle='-webkit-box-flex:1;background:#66ccff'>aaaa</div><divstyle='background:#ffffff'>bbbb</div></div>本地預覽結果在此基礎上修改：【切到下一張PPT】幻燈片6話述：<divstyle='-webkit-box-flex:1;background:#66ccff'>aaaa</div>本地預覽效果在此基礎上修改【切到下一張PPT】幻燈片7話述：<divstyle='-webkit-box-flex:2;background:#66ccff'>aaaa</div>本地預覽效果。如果希望布局一個縱向的盒子結構，如何做，【切到下一張PPT】幻燈片8<divstyle='display:-webkit-box;height:400px;border:1pxsolidblue;-webkit-box-orient:vertical;'><divstyle='-webkit-box-flex:1;background:#66ccff;position:relative'><divstyle='position:absolute;width:100%;height:100%;'>aaaa</div></div><divstyle='-webkit-box-flex:2;background:#ffffff;position:relative'><divstyle='position:absolute;width:100%;height:100%;'>bbbb</div></div><divstyle='background:#66ccff'>cccc</div></div>分析代碼，本地預覽效果。【切到下一張PPT】幻燈片9-10話述：著重介紹AppCan封裝的CSS，介紹其封裝規(guī)則。【切到下一張PPT】幻燈片11話述：在IDE中，利用彈性盒子結構完成UI設計。具體如何操作，見操作手冊。【切到下一張PPT】幻燈片12在IDE中，利用彈性盒子結構完成列表部分UI設計。幻燈片13話述：為了使手機應用能夠根據訪問設備的不同分辨率自動調整頁面效果。AppCan平臺如何解決分辨率適配的問題？講師按照PPT的文述講清楚分分辨率適配的問題。講完之后，【切到下一張PPT】幻燈片14-17話述：AppCan提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，結合彈性盒子進行界面布局。柵格系統(tǒng)用于通過一系列的row（ub）與column（ub-f1等類）的組合來創(chuàng)建頁面布局，將內容放入這些創(chuàng)建好的布局中。講師按照PPT文述講清楚柵格系統(tǒng)。使用彈性盒子對頁面進行布局，ui-box.css中就定義了彈性盒子的一些css3樣式，彈性盒子模型是在指定大小的父容器里來為子元素分配空間，使用box架構可以更容易更方便的適配不同分辨率不同屏幕尺寸的手機介紹ui-box.css。講完之后，【切到下一張PPT】幻燈片18話述：AppCan平臺封裝了很多控件，供開發(fā)者使用，在IDE中介紹圖片滑塊的使用。重點講解參數的說明。【切到下一張PPT】幻燈片19話述：在IDE中完成列表控件的使用，重點講解參數的說明。【切到下一張PPT】幻燈片20話述：在IDE中完成選項卡控件的使用，重點講解參數的說明。【切到下一張PPT】幻燈片21話述：綜合案例：餐廳詳情頁面，安排學員自己完成，最后講師總結。JSSDK幻燈片1話述：在學習了AppCan的UI布局后，這一講，我們來了解下AppCan封裝的JSSDK。本次課主要從以下幾個方面進行介紹和分享，【切到下一張PPT】幻燈片2話述：首先，給大家介紹下AppCan的多窗口機制、應用生命周期和窗口的生命周期；然后介紹AppCan的封裝的對話框；最后介紹窗口之間的通訊機制。下面，我們先來給大家介紹一下AppCan的窗口。【切到下一張PPT】幻燈片3話述：窗口是AppCan應用最基本的單位。AppCan的應用界面采用的是多窗口機制。所謂的多窗口機制包括兩部分：1、引擎中，維護了一個窗口堆棧，就是打開的窗口會一個一個往上疊加，不管打開多少窗口，最后打開的那個窗口肯定是在最上面的。每個窗口用唯一的名稱來區(qū)別，也就是說名稱是窗口的標示。窗口的命名是在appcan.window.open()來定義賦值的，命名方式只要符合標識符命名規(guī)則即可，但是有個特殊的名稱——“root”,它是起始頁的名稱，這是引擎給在config.xml文件中指定的起始頁所起的名稱。2、多窗口還包括主窗口和浮動窗口。把窗口分為主窗口和浮動窗口，可以使我們的界面展示更為靈活——主窗口作為框架窗口，浮動窗口展示內容，并且浮動窗口可以解決很多類似局部div滾動、上拉下拉刷新效果等等。主窗口之上可以有多個浮動窗口，浮動窗口是附屬于主窗口的，主窗口關閉后，其上所有浮動窗口也都會關閉。但是關閉浮動窗口是不會關閉主窗口的。介紹完多窗口機制，接下來了解下應用和窗口的生命周期【切到第下一張PPT】幻燈片4話述：AppCan使用uexWidget對象管理維護應用和子應用的生存周期。如上圖所示，當應用有其他第三方應用啟動時，會調用uexWidget.onLoadByOtherApp回調，并可以獲取到其他應用傳遞來的參數。當其他應用打開，當前應用進入后臺，則會調用uexWidget.onSuspend，當應用重新進入后會調用uexWidget.onResume回調，我們可以在此加入代碼，例如處理超時登錄等情況。【切到下一張PPT】幻燈片5話述：當需要打開一個窗口的時候，首先是啟動uexWindow，然后加載全局腳本進行解析，完成后，加載window，window.onload函數通知網頁一切就緒了；當引擎發(fā)現網頁處理完成之后，開始為window對象附加UEX對象。等UEX對象都附加完畢后，再調用appcan.ready方法（uexWindow.uexOnload函數）。這里就要注意了：appcan.ready是AppCan頁面準備就緒的一個標志.然后下來就是窗口的運行，掛起或重新開始，然后通過appcan.window.close來關閉窗口。在這個函數調用后，我們不能夠再使用任何UEX對象。這里給大家強調的是在調用close前，一定要關閉interval（間隔、區(qū)間）或timeout(過期、超時)這兩個事件，如果不關閉會產生異常。所以最好在調用close之前先做一個判斷看看所有定時器是否已經關閉。然后調用destory銷毀，這樣會釋放掉所有的UEX對象資源。最終調用Shutdown，整個窗口關閉。這就是AppCan主窗口的生命周期，浮空窗口的生命周期【講的同時切到下一張】和主窗口是相類似的，但是要比主窗口簡化的多。幻燈片6話述：仿照主窗口生命周期簡單介紹一下浮動窗口的生命周期，（介紹完后浮空窗口的生命周期），接下來，我們來看一下主窗口的構成【講的時候切到下一張PPT】幻燈片7話述：一個標準的主窗口是由頭部header、內容區(qū)content和底部欄footer三部分構成的。一個window是全屏顯示的，其中header和footer是兩個定高區(qū)域，content是彈性區(qū)域（可以舉個例子說明一下，如果沒有footer，則content大小是全屏大小減去header大小）。了解了窗口的結構，接下來，我們來看下如何打開一個新的窗口【講的時候切到下一張PPT】幻燈片8話述：在Appcan中，我們封裝了一個appcan.window.open接口，用來進行窗口的打開操作。然后按照ppt介紹各個參數的作用。由于參數很多，并不是每個參數都是必須的，我們還可以使用鍵值對的形式來寫，下面我們來舉個例子【講的時候切到下一張PPT】幻燈片9話述：動態(tài)切換ppt，圖片跳轉過程介紹一下，然后打開ide，進行演示。【切到下一張PPT】幻燈片10話述：了解了window的構成，下面我們來介紹下浮動窗口frame。它是架在window上的一個獨立窗口，是界面內容展示的主體區(qū)域【講的時候切到下一張PPT】幻燈片11話述：按照ppt上解釋一下，再次強調一下多窗口機制中window和frame的關系。那么如何打開浮動窗口呢？【講的時候切到下一張PPT】幻燈片12話述：在AppCan中，封裝了appcan.frame.open接口來實現浮動窗口的打開。下面先來介紹一下接口參數，（按ppt挑重點的介紹常用參數）。然后我們來做個案例，看下使用情況【講的時候切到下一張PPT】幻燈片13話述：在每個主窗口對應的html文件的ready方法中，都會有一個浮動窗口的打開語句appcan.frame.open()。自己再舉一個打開浮動窗口的例子。除了在一個window中打開一個frame，AppCan的還支持多浮動窗口【講的時候切到下一張PPT】幻燈片14話述：AppCan可以專門提供了支持拖拽想過的MultiFrame組建來實現多浮動窗口。下面給大家舉個例子【講的時候切到下一張PPT】幻燈片15話述：如果實現多浮動窗口，需要在url處用數組來表示。浮動窗口切換演示效果模擬器看不到，需要真機調試。【案例演示完畢切到下一張PPT】幻燈片16話述：在開發(fā)中，我們經常需要給使用者一些直觀的提示，引導用戶操作。AppCan封裝了多個標準對話框，如alert警告、prompt提示和toast加載提示框。比如【講的時候切到下一張PPT】幻燈片17話述：系統(tǒng)默認的alert比較死板，使用Appcan封裝的對話框，可以靈活控制。然后到ide中，進行案例演示。【案例演示完畢切到下一張PPT】幻燈片18話述：Ide演示案例。把toast帶加載滾動條和不帶滾動條各舉一個例子。把toast使用場景介紹一下：一般在數據加載前顯示toast，數據加載成功后，手動關閉toast；如果僅僅作為提示，可以不需要滾動條。【案例演示完畢切到下一張PPT】幻燈片19話述：了解了AppCan封裝的對話框后，我們來看下本節(jié)的一個重點，也是應用中必須要用到的——傳參。在AppCan中，有兩種傳參機制：一種是通過全局參數來實現，一種是通過窗口事件機制來實現。先來看下第一種方式。我們通過appcan.locStorage對象來實現全局參數傳遞。用appcan.locStorage.setVal()來存值，appcan.locStorage.val()來取值。例如：【講時切到下一張PPT】幻燈片20話述：演示ppt，介紹要實現的功能。然后打開之前做好的靜態(tài)頁面，添加存取語句實現傳參。或者現寫一個小demo，來演示“存”和“取”的過程。【演示完畢切到下一張PPT】幻燈片21話述：從剛剛全局參數的案例中，大家應該可以看出，使用這種機制進行傳參必須預先確定先后關系，即必須先存后取。但很多情況下并沒有這么固定的先后順序，所以AppCan還提供了第二種通訊機制——窗口事件驅動。通過appcan.window.subscribe（）訂閱一個頻道，用appcan.window.publish（）向訂閱的頻道發(fā)送消息。來看案例【講時切到下一張PPT】幻燈片22話述：演示ppt，介紹要實現的功能。打開之前做好的界面，添加對應語句實現傳參功能，或者先寫一個類似小demo，實現“訂閱”和“傳參”的過程。【演示完畢切到下一張PPT】幻燈片23話述：按照ppt稍作解釋即可。除了通過原生技術完成窗口的動畫切換效果可以增加用戶體驗，窗口的拖拽刷新也是AppCan提高用戶體驗的一種手段【切到下一張PPT】幻燈片24話述：按照ppt稍作解釋即可，下面來看【切到下一張PPT】幻燈片25話述：打開薈生活源碼，將此部分功能進行代碼分析【切到下一張PPT】幻燈片26話述：把其他代碼發(fā)給學員，下去自行研究訂餐功能網絡通訊與數據存儲幻燈片1話述：按照自己的特色介紹一下本次課培訓的主題。【切到下一張PPT】幻燈片2話述：介紹一下本次課程的主要內容。【切到下一張PPT】幻燈片3話述：目前絕大部分移動應用都需要服務端的數據支撐來支持其具體業(yè)務實現。而在移動通訊開發(fā)中最常用的即為基于HTTP/HTTPS協(xié)議的數據交互。AppCan對于我們的通訊提供了appcan.request對象來支撐。appcan.request對象包含多個通訊方法ajax、get、getJSON、post和postForm，其中最核心的是ajax接口，其他接口是根據具體場景對ajax接口進行的簡化封裝。講師詳細介紹appcan.request.ajax()方法的使用及參數。appcan.request.ajax(options)

發(fā)起一個ajax請求,并獲取相應的內容

options:發(fā)起ajax的請求的參數，這個必須是一個對象

options.type:請求的類型，包括GET、POST等

options.url:要請求的地址

options.data:要請求的URL的參數,如果要上傳文件則data數據中必須傳一個對象包含一個path的key例如：data:{file:{path:'a.jpeg'}}上傳a.jpeg圖片

options.contentType:默認:false要傳給服務端的數據內容的'content-Type'通過header,如果設置其他content將會直接把data發(fā)送出去

options.dataType:服務端的響應類型，包括json,jsonp,script,xml,html,text中的一種

options.timeout:請求的超時時間

options.headers:要設置的請求頭

options.xhrFields:要重載的請求對象的字段

options.beforeSend(xhr,settings):請求發(fā)送之前的回調,返回false取消請求發(fā)送

options.success(data,status,xhr):請求發(fā)送成功后的回調

options.error(xhr,errorType,error):請求如果出現錯誤后的回調

plete(xhr,status):請求完成后的回調，不管是否出錯

gress(progress,xhr):上傳的進度，只有包含上傳文件的時候才會執(zhí)行該回調

options.certificate:添加證書信息{password:'',path:''}其中password是證書的密碼，path`是證書的地址

options.cache:是否緩存請求這是最基本的一個請求方法，如果請求方式，設置為get則可以換另一種方法。【切到下一張PPT】幻燈片4話述：get接口是對ajax通過get請求獲取數據的簡化封裝。介紹其方法和參數。來看一個實際案例。【切到下一張PPT】幻燈片5話述：通過PPT的一個案例講解get方法的使用及參數說明。Get方法還可以進一步簡化。【切到下一張PPT】幻燈片6話述：getJSON接口對get接口又進行了簡化，即認為返回數據必然是JSON格式。再來看一下，get請求。【切到下一張PPT】幻燈片7話述：AJAX接口除了實現GET請求外，還支持基于POST方法的數據提交支持，而POST接口就是對AJAX的POST方法上傳模式的簡化封裝。介紹POST方法的使用及參數說明。幻燈片8話述：HTML開發(fā)中最常見的數據提交方式是FORM表單提交，而postForm是post接口與FORM表單結合產生的簡化接口，它可以使我們的表單提交更加簡單。根據幻燈片9中的案例詳細介紹postForm方法的使用就參數說明。最后總結數據獲取的四種方法。來看一下實際應用。【切到下一張PPT】幻燈片9幻燈片10話述：在IDE中，利用appcan.request.ajax()方法獲取后臺的數據，并顯示在頁面中。【切到下一張PPT】幻燈片11話述：appcanlocStorage存儲模塊，這個模塊是關于存儲的封裝。我們可以使用這個對象快速的存儲和獲取數據，也可以完成界面間參數的傳遞。應用關閉后，數據也不會丟失。詳細介紹存儲相關的五個方法及參數說明。看一下，本地存儲，在項目中如何應用。【切到下一張PPT】幻燈片12話述：在IDE中，利用appcan.request.ajax()方法獲取后臺數據，實現頁面的動態(tài)加載。當點擊事件執(zhí)行時，加開商戶詳情頁面，同時，利用appcan.locStorage.setVal()方法將商戶列表頁中的商戶的ID,存儲。在商戶詳情頁面，獲取ID，通過ID,獲取對應商戶的其他信息。【切到下一張PPT】API簡介幻燈片1話述：以自己的方式介紹本次課程培訓的主題，分享一下本課培訓的主要內容。【切到下一張PPT】幻燈片2API是什么？【切到下一張PPT】幻燈片3話述：什么是API？講師按照PPT的內容給學員講清楚，API（ApplicationProgrammingInterface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節(jié)。AppCan平臺封裝了哪些API呢？【切到下一張PPT】幻燈片4話述：目前AppCan平臺封裝了50多種插件來擴充AppCan的開發(fā)能力。根據功能分為六個模塊。網絡通訊、系統(tǒng)功能、第三方API、界面布局、功能擴展、API對象。先來看一下網絡通訊【切到下一張PPT】幻燈片5話述：詳細介紹常用的網絡通信的API。講師介紹一些API應用的場景。【切到下一張PPT】幻燈片6話述：詳細介紹常用的系統(tǒng)功能的API。講師介紹這些API的主要功能及應用的場景。【切到下一張PPT】幻燈片7話述：利用uexCall.call()完成打電話的功能。同時也介紹一下uexCall的其他幾個方法。【切到下一張PPT】幻燈片8話述：介紹一下第三方常用的API及可以實現的功能。【切到下一張PPT】幻燈片9話述：在IDE中，利用uexWeixin完成商品詳情頁面的微信分享功能。【切到下一張PPT】幻燈片10話述：在IDE實現其功能【切到下一張PPT】幻燈片11話述：介紹常用的頁面布局的API。【切到下一張PPT】幻燈片12話述：在IDE中，利用uexScanner插件完成二維碼掃描的功能。最后總結！MAS幻燈片1話述：大家都知道，我們在進行APP開發(fā)的過程中，當前端頁面布局完成以后，從后臺動態(tài)獲取數據是我們必須要做的事情之一。那么，要想從后臺獲取我們需要的數據，就必須要有對應的接口與前后臺進行數據的交互。談及接口，那這些接口是怎么形成的呢？帶著這個問題，我們去認識一個接口封裝的工具，MAS！【切到第二張PPT】幻燈片2話述：那到底什么是MAS？上面提到的MAS接口如何去封裝？MAS移動業(yè)務整合系統(tǒng)是怎么回事？這是我們今天重點要了解的內容。首先我先看一下MAS的概念。【切到第三張PPT】幻燈片3話述：其實MAS就是MEAP轉接（整合）系統(tǒng)的縮寫。在第一節(jié)課程上，大家對MEAP的概念已經有所了解，這個MAS系統(tǒng)就是MEAP移動支撐平臺的分支。它標準的概念就是“移動業(yè)務整合系統(tǒng)”。通過MAS接口，后端對接用戶業(yè)務數據，將數據抽取到前端去顯示。在移動應用APP開發(fā)過程中，它起到了一個中間件的作用。下面的一張圖可以更】明確的說明MAS在APP項目開發(fā)中的地位。【切到第四張PPT】幻燈片4話述：各位請看這張圖，中間這部分就是我們講到的MAS服務器，是部署在用戶內網的一套數據整合系統(tǒng)。第一，它可以統(tǒng)一對后臺的接口進行管理，因為后臺的用戶業(yè)務系統(tǒng)比較多，用什么語言開發(fā)的都有，對于接口的管理都不太統(tǒng)一，對于不同的后臺系統(tǒng)，還需要找到懂對應開發(fā)語言的人員做接口的封裝與管理，這樣就大大增加了系統(tǒng)開發(fā)的成本。如果使用MAS系統(tǒng)進行接口統(tǒng)一管理的話，我們可以省掉不少專門封裝接口的人員用于干別的工作。我們電腦上安裝的IDE開發(fā)環(huán)境中有一個MAS接口開發(fā)的功能模塊，可以開發(fā)如AJAX、ODBC、SOAP等不同類型的MAS接口，接口開發(fā)完成并測試成功以后，我們就可以將接口上傳至MAS移動業(yè)務整合系統(tǒng)上去統(tǒng)一對接口的管理。此外，MAS系統(tǒng)不但可以封裝和管理接口，還可以對后臺數據進行整合，抽取我們關心的數據。第三，如果有多套MAS系統(tǒng)，可以起到負載均衡的作用。大家可以想一下，如果我在其中一套MAS系統(tǒng)上專門管理ODBC對接數據庫的接口，另外一套MAS系統(tǒng)中專門管理AJAX類型的接口，這樣就起到一個分流的作用，從而對后臺服務器起到減輕負荷的作用。MAS系統(tǒng)支持基于集群方案的部署，對于大數據的而言，其優(yōu)越的性能更能充分發(fā)揮出來。針對我們現有的開發(fā)環(huán)境，我們正在講述的MAS系統(tǒng)、IDE、后臺用戶業(yè)務系統(tǒng)之間的業(yè)務邏輯關系是什么呢？下面我們做一下分析。【切到第5張PPT】幻燈片5話述：IDE開發(fā)環(huán)境、用戶系統(tǒng)、和MAS平臺之間的詳細業(yè)務邏輯關系如下：（1）、我們的MEAP包括MAS管理平臺（即：移動業(yè)務整合系統(tǒng)）和SDK;（2）、SDK又包括IDE和DSS;（3）、在IDE環(huán)境中進行APP移動應用開發(fā)的時候，如果用戶的OA/ERP/DB系統(tǒng)可以直接向開發(fā)者提供接口的話，那么，我們可以以JSON的方式直接進行接口調用，從用戶系統(tǒng)中獲取我們在開發(fā)過程中所需的數據在APP上顯示；（4）、不過，如果目前有這么一種情況：某大型企業(yè)在開發(fā)一個項目時，為了數據的安全考慮，不愿向開發(fā)商直接提供數據源信息供APP應用開發(fā)者直接調用。開發(fā)者又需要通過客戶現有的系統(tǒng)來抓取想要在App上顯示的數據信息。開發(fā)商如何解決這一難題？（5）、要想解決上面的問題，這就需要我們自行創(chuàng)建接口來解決。AppCanIDE封裝了日常開發(fā)App所要用到的各種接口文件。我們可以使用IDE開發(fā)環(huán)境中內嵌的MAS服務創(chuàng)建不同類型的接口，然后在本地打包封裝，再上傳至AppCanMAS移動業(yè)務整合系統(tǒng)。通過MAS移動業(yè)務整合系統(tǒng)將用戶的業(yè)務系統(tǒng)數據，以企業(yè)總線的形式，將不同系統(tǒng)、不同類型的業(yè)務數據進行整合、加密等處理。APP開發(fā)者可以通過我們上傳的不同類型接口對用戶不同類型的數據進行調用，在APP上顯示；（6）、最后，將IDE開發(fā)完成的應用上傳至DSS進行打包。接下來我們做一下實際操作，下面是我們對接口的一個創(chuàng)建過程。【切到第6張PPT】幻燈片6話述：首先我們需要創(chuàng)建MAS服務。因為我們的接口是存在于項目當中的，而項目是創(chuàng)建到服務里面，要想使接口能正常調用，必須啟動MAS服務才能生效，所以必須要創(chuàng)建服務。圖中是創(chuàng)建MAS服務的幾個關鍵參數：服務的名稱根據需要自己命名，建議其名稱跟你們開發(fā)的項目本身有一定關系，這樣方便于我們管理。IP：輸入開發(fā)者本機的IP地址即可（），端口：輸入符合端口命名規(guī)則的端口號（如：8080），其他默認即可。MAS服務創(chuàng)建完成后，會產生對應的服務文件和文件夾。【講的時候切到PPT7】幻燈片7話述：這是我們剛才創(chuàng)建MAS服務所產生的文件和文件夾，都有對應的說明，可以擴展開進行解釋。其中，service.json文件中記錄了MAS服務的基本信息，其內容如下：【講的時候切到PPT8】幻燈片8話述：這個文件里所包含的信息有端口號、MAS服務的名稱、超時信息等。那么，創(chuàng)建完成MAS服務以后，我們接下來在服務里創(chuàng)建MAS項目。【講的時候切到PPT9】幻燈片9話述：創(chuàng)建MAS項目很簡單，只需要填寫一個項目名稱即可。【講的時候切到PPT10】幻燈片10話述：項目創(chuàng)建完成以后，會在MAS服務中產生一個與default平級的一個項目文件夾，內含一個初始化文件，一個記錄和配置接口創(chuàng)建的文件。創(chuàng)建項目的主要目的就是在里面創(chuàng)建我們需要的各種接口。下面我們對接口進行創(chuàng)建。【講的時候切到PPT11】幻燈片11話述：在IDE創(chuàng)建MAS接口功能模塊，可以創(chuàng)建6中類型的接口。分別對AJAX、ODBC等6種類型的接口進行分析。然后以ajax接口為例根據上圖進行接口的參數說明。接口創(chuàng)建完成后，會在項目里面產生一個接口的文件夾。【講的時候切到PPT12】幻燈片12話述：在圖上可以看到，我們創(chuàng)建的接口產生了一個文件夾，里面包含一個接口文件，我們可以通過這個文件對接口進行調試。【講的時候切到PPT13】幻燈片13話述：這是上一步創(chuàng)建接口的接口源碼，對源碼中常用參數進行分析，如：獲取方式、url、數據請語句等內容；接口我們已經創(chuàng)建完成，那到底能不能進行正常調用呢，下面我們對其進行調試。【切到PPT14】幻燈片14話述：要想正常調用接口，我們需要對MAS服務進行啟動，還需要了解接口的調用的規(guī)則。分別進行說明和演示。【講的時候切到PPT15】幻燈片15話述：接口調用成功以后，我們可以看到通過我們創(chuàng)建的接口訪問到的頁面效果。初步認識MAS接口以后，此時可以對AJAX接口進行擴展，結合薈生活項目，對登陸接口進行創(chuàng)建和調試和調用。【講的時候切到PPT16】幻燈片16話述：接下來我們認識一下另外一種類型的MAS接口--ODBC接口。演示創(chuàng)建ODBC接口，對每個參數進行說明。【講的時候切到PPT17】幻燈片17話述：上面我們在創(chuàng)建ODBC接口的過程中，大家已經注意到了，有一個參數叫Dsn=數據源名稱，這個參數需要我們對ODBC的數據源進行正確配置才能使用，否則取不到后臺數據。那么，數據源如何進行配置呢？數據源的配置可以根據自己熟悉的不同類型的數據庫進行靈活演示。【講的時候切到PPT18】幻燈片18話述：這是接口的源碼，其中Dsn參數就是我們剛才所配置成功的數據源，需要注意的是，我們配置的數據源與源碼中的數據源名稱要一致，并且大小寫區(qū)分嚴格。上圖就是我們通過ODBC接口從數據庫調取到的后臺數據。以上操作只是靜態(tài)的從數據庫獲取我們關心的數據，那么如何從后臺動態(tài)獲取呢？此時可以對“增刪改查”O(jiān)DBC接口案