AppCan初級(jí)認(rèn)證講師講義

AppCan初級(jí)工程師講師講義手冊(cè)[鍵入文檔標(biāo)題][鍵入文檔副標(biāo)題][在此處鍵入文檔摘要。摘要通常為文檔內(nèi)容的簡(jiǎn)短概括。在此處鍵入文檔摘要。摘要通常為文檔內(nèi)容的簡(jiǎn)短概括。]zhaochengxue[選取日期]

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

系統(tǒng)提供獨(dú)立的系統(tǒng)管理員，負(fù)責(zé)管理系統(tǒng)中的所有用戶。管理員可以指定用戶為應(yīng)用管理員，負(fù)責(zé)應(yīng)用項(xiàng)目的維護(hù)。每個(gè)應(yīng)用可以有多個(gè)管理員。應(yīng)用管理員可以為應(yīng)用設(shè)定應(yīng)用開發(fā)人員、測(cè)試人員。引擎管理

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

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

編譯打包服務(wù)提供如下類型服務(wù)Hybrid應(yīng)用打包

用于組合HTML5代碼、NativePlugin、HybridEngine，編譯生成目標(biāo)移動(dòng)應(yīng)用。WEBApp打包

用于拼裝HTML5代碼，壓縮為網(wǎng)頁(yè)文件包，并自動(dòng)生成符合HTML5離線方案的索引文件。

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

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

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

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

首頁(yè)模塊將顯示該管理員的登錄信息、項(xiàng)目信息統(tǒng)計(jì)等與該管理員所管理的項(xiàng)目相關(guān)的信息。點(diǎn)擊應(yīng)用管理圖標(biāo)，將顯示該管理員所管理的所有應(yīng)用，同時(shí)還可以添加應(yīng)用，或者

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

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

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

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

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

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

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

應(yīng)用打包分為如下幾個(gè)步驟：

設(shè)置圖標(biāo)

上傳并保存圖標(biāo)幻燈片29話述：利用SVN提交代碼?！厩械较乱粡圥PT】幻燈片30話述：點(diǎn)擊hybrid打包，進(jìn)行混合應(yīng)用打包?！厩械较乱粡圥PT】幻燈片31話述：設(shè)置啟動(dòng)頁(yè)可以為相應(yīng)的客戶端上傳多分辨率的啟動(dòng)頁(yè)，上傳后保存。啟動(dòng)頁(yè)有全屏和非全屏之分，如果選擇iPad或Android客戶端，還要分橫屏和豎屏。插件選擇

點(diǎn)擊“添加插件“。選擇項(xiàng)目插件或者公共插件。在已選插件的公共插件列表中，可看到剛才選擇的插件。也可以刪除已選擇的插件。引擎選擇可以選擇Android系統(tǒng)或者iOS系統(tǒng)的引擎，然后可以選擇項(xiàng)目引擎或公共引擎。這里選擇項(xiàng)目引擎，點(diǎn)擊設(shè)置當(dāng)前版本，當(dāng)前引擎版本將變?yōu)閯偛胚x擇的版本?！厩械较乱粡圥PT】幻燈片32話述：開關(guān)設(shè)置

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

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

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

發(fā)起一個(gè)ajax請(qǐng)求,并獲取相應(yīng)的內(nèi)容

options:發(fā)起ajax的請(qǐng)求的參數(shù)，這個(gè)必須是一個(gè)對(duì)象

options.type:請(qǐng)求的類型，包括GET、POST等

options.url:要請(qǐng)求的地址

options.data:要請(qǐng)求的URL的參數(shù),如果要上傳文件則data數(shù)據(jù)中必須傳一個(gè)對(duì)象包含一個(gè)path的key例如：data:{file:{path:'a.jpeg'}}上傳a.jpeg圖片

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

options.dataType:服務(wù)端的響應(yīng)類型，包括json,jsonp,script,xml,html,text中的一種

options.timeout:請(qǐng)求的超時(shí)時(shí)間

options.headers:要設(shè)置的請(qǐng)求頭

options.xhrFields:要重載的請(qǐng)求對(duì)象的字段

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

options.success(data,status,xhr):請(qǐng)求發(fā)送成功后的回調(diào)

options.error(xhr,errorType,error):請(qǐng)求如果出現(xiàn)錯(cuò)誤后的回調(diào)

plete(xhr,status):請(qǐng)求完成后的回調(diào)，不管是否出錯(cuò)

gress(progress,xhr):上傳的進(jìn)度，只有包含上傳文件的時(shí)候才會(huì)執(zhí)行該回調(diào)

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

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