客戶培訓(xùn)appcan移動技術(shù)開發(fā)

AppCan平臺開發(fā)技術(shù)培訓(xùn)關(guān)注官方微信點擊熱點話題分享到朋友圈獎品關(guān)注AppCan官方微信并轉(zhuǎn)發(fā)可以領(lǐng)獎品哦QQ群、各地區(qū)微信群二維碼開班典禮2024/1/24講師介紹學(xué)員介紹目錄2024/1/243、項目開發(fā)流程新建項目、模擬器調(diào)試、真機(jī)調(diào)試、實時預(yù)覽2、項目介紹功能介紹、開發(fā)工具、項目演示4、“美食”首頁功能實現(xiàn)頁面拼裝、封裝樣式、UI控件、JSSDK5、“美食”詳情頁功能實現(xiàn)頁面布局、數(shù)據(jù)獲取、插件調(diào)用、會員評論及顯示6、

“美食”個人中心功能實現(xiàn)頁面布局、會員信息修改功能、注冊、登錄功能1、AppCan平臺介紹互聯(lián)網(wǎng)+、一站式平臺1、AppCan平臺介紹生活學(xué)習(xí)工作1、AppCan平臺介紹傳統(tǒng)APP開發(fā)門檻高、開發(fā)難IOS開發(fā)工程師Android開發(fā)工程師項目經(jīng)理1、AppCan平臺介紹開發(fā)難成本高企業(yè)在移動化道路上最頭疼的問題1、AppCan平臺介紹1、AppCan平臺介紹1、AppCan平臺介紹HTML+原生的混合開發(fā)方式2、項目介紹2024/1/24項目名稱：美食項目演示2、項目介紹開發(fā)工具：企業(yè)版SDK移動應(yīng)用開發(fā)工具IDEMacMini應(yīng)用開發(fā)服務(wù)器協(xié)同開發(fā)工具本地私有打包服務(wù)器開發(fā)工具：IDE新特性封裝了uexWindow多窗口機(jī)制，實現(xiàn)了移動端的iframe效果2、項目介紹開發(fā)工具：IDE新特性人性化開發(fā)環(huán)境-UI控件封裝2、項目介紹開發(fā)工具：IDE新特性人性化開發(fā)環(huán)境-內(nèi)置多套模板2、項目介紹開發(fā)工具：IDE新特性人性化開發(fā)環(huán)境-自定義模板2、項目介紹開發(fā)工具：IDE新特性支持安裝包全包或部分加密2、項目介紹開發(fā)工具：IDE新特性支持真機(jī)調(diào)試2、項目介紹開發(fā)工具：IDE新特性豐富的原生插件資源2、項目介紹協(xié)同開發(fā)系統(tǒng)介紹云端用戶管理應(yīng)用管理員普通用戶超級管理員3、項目開發(fā)流程云端創(chuàng)建項目云端應(yīng)用創(chuàng)建【應(yīng)用管理員身份登錄系統(tǒng)】3、項目開發(fā)流程同步應(yīng)用【開發(fā)者或應(yīng)用管理員身份登錄】3、項目開發(fā)流程模擬器調(diào)試3、項目開發(fā)流程真機(jī)調(diào)試3、項目開發(fā)流程斷點調(diào)試3、項目開發(fā)流程知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)4、首頁功能實現(xiàn)主窗口浮動窗口布局分析廣告區(qū)功能區(qū)列表區(qū)知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、彈性盒子模型該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間樣例知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、彈性盒子模型該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間樣例代碼結(jié)構(gòu)<divclass=“box”><divclass=“box1”>1</div><divclass=“box2”>2</div><divclass=“box3”>3</div></div>知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、彈性盒子模型該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間樣例CSS代碼<styletype=“text/css”>.box{display:box;/*指定父盒子為盒子模型*/

box-orient:horizontal;/*指定子盒子沿橫向或縱向排列，縱向值為：vertical*/}.box1{background-color:red;}.box2{background-color:blue;}.box3{background-color:green;}</style>知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、彈性盒子模型該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間樣例知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、彈性盒子模型該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間樣例Box-flex屬性用于設(shè)置子盒子分配父盒子空間比例知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、AppCan封裝樣式為了讓開發(fā)者快速對界面進(jìn)行布局，對常用樣式進(jìn)行了封裝封裝規(guī)劃：取屬性單詞首字母如ub[u代表UI，b代表box],定義彈性盒子屬性知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、AppCan封裝樣式為了讓開發(fā)者快速對界面進(jìn)行布局，對常用樣式進(jìn)行了封裝針對剛才我們講過的所以彈性盒子屬性統(tǒng)一封裝在ui-box.css文件中，不需要各位單獨去寫樣式，直接調(diào)用即可，如：Ub：定義彈性盒子模型，用于父盒子Ub-ver：定義子盒子縱軸排列，用于父盒子Ub-rev：定義子盒子反向排序，用于父盒子Ub-f1：定義子盒子占父盒子比例，用于子盒子知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、AppCan封裝樣式為了讓開發(fā)者快速對界面進(jìn)行布局，對常用樣式進(jìn)行了封裝對于盒子本身的屬性如邊框、間距、填充等基本樣式都封裝在ui-base.css文件中，如：Umar-a：定義盒子外邊距uba：定義盒子邊框uinn：定義盒子內(nèi)邊距，即填充ulev0：定義盒子內(nèi)文字大小Uc-a：定義盒子邊框為圓角知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、AppCan封裝樣式為了讓開發(fā)者快速對界面進(jìn)行布局，對常用樣式進(jìn)行了封裝對于盒子本身的屬性如邊框、間距、填充等基本樣式都封裝在ui-base.css文件中，如：Umar-a：定義盒子外邊距uba：定義盒子邊框uinn：定義盒子內(nèi)邊距，即填充ulev0：定義盒子內(nèi)文字大小Uc-a：定義盒子邊框為圓角知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備3、AppCan封裝UI控件為了讓開發(fā)者快速對界面進(jìn)行布局，對常用UI控件進(jìn)行了封裝，如按鈕、列表、導(dǎo)航等知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)布局實現(xiàn)1、主窗口雙擊index.html文件進(jìn)入主窗口，修改標(biāo)題文字修改配色文件基礎(chǔ)標(biāo)題顏色為綠色知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)布局實現(xiàn)2、浮動窗口知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)布局實現(xiàn)2、浮動窗口之廣告區(qū)實現(xiàn)方法：打開浮動窗口文件，插入圖片滑塊控件并添加圖片知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)布局實現(xiàn)2、浮動窗口之功能區(qū)實現(xiàn)方法：手動布局第1層第2層第2層第2層第2層第3層第3層知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)布局實現(xiàn)2、浮動窗口之功能區(qū)實現(xiàn)方法：手動布局知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、AppCanJSSDK介紹AppCanjavascriptsdk是AppCan根據(jù)自己的需求封裝的一個開發(fā)庫，對底層的接口進(jìn)行更高層的封裝，該庫依賴backbonejs、zeptojs、underscorejs，默認(rèn)打包在基礎(chǔ)庫中，開發(fā)者不需要進(jìn)行額外的引用，另外在該庫的基礎(chǔ)上提供了豐富的插件，能讓開發(fā)者更高效的開發(fā)app。具體可參照：

知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、窗口模塊—組成具體可參照：

FooterContentBodyPageheader顯示區(qū)HTMLHeadscript腳本區(qū)知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、窗口模塊—打開主窗口方法appcan.window.open(name,data,aniId,type,dataType,width,height,animDuration)name:新窗口的的名稱，如果窗口存在直接打開，如果不存在先創(chuàng)建然后打開data:新窗口填充的數(shù)據(jù)dataType:新窗口填充的數(shù)據(jù)類型aniId:動畫類型Idtype:窗口類型animDuration:動畫執(zhí)行時間知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、窗口模塊—對話框appcan.window.alert(title,content,buttons,callback)

彈出一個確認(rèn)彈出窗口,如果只有一個按鈕彈出是警告框，如果是一個以上的按鈕彈出的是提示框

title:彈出框的標(biāo)題

content:彈出框的內(nèi)容

buttons:彈出框的按鈕列表最多是三個知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、窗口模塊—對話框appcan.window.confirm(title,content,buttons,callback)

彈出一個提示框

title:彈出框的標(biāo)題

content:彈出框的內(nèi)容

buttons:彈出框的按鈕列表最多是三個知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、窗口模塊—界面間通信appcan.window.evaluateScript(name,scriptContent,type)

在指定的窗口腳本執(zhí)行

name:要執(zhí)行腳本的窗口名稱

scriptContent:要執(zhí)行的腳本

type:窗口類型知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備3、打開浮動窗口FooterContentHeaderFrame知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備3、打開浮動窗口appcan.frame.open(id,url,left,top,name,index,change)

id:要打開浮動窗口的名稱url:浮動窗口要加載的頁面的地址,如果url是一個數(shù)組則打開多頁面浮動窗口left:浮動窗口距離左邊的距離

top:浮動窗口距離上邊的距離name:強(qiáng)制改變打開窗口的名稱index:設(shè)置選中的多頁面窗口的默認(rèn)索引change:如果多頁面浮動窗口改變時會觸發(fā)該回調(diào)知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)功能實現(xiàn)首頁打開“美食專題”、“當(dāng)?shù)孛朗场?、“更多功能”、“個人中心”窗口實現(xiàn)方法1、使用自定義模板拼裝4個頁面【】2、給每個按鈕起個名字2、打開主窗口方法知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備1、本地存儲即源界面把需要傳遞的數(shù)據(jù)寫入全局對象中，目標(biāo)界面通過全局對象獲取到寫入的數(shù)據(jù)，完成參數(shù)的傳遞，我們在全局參數(shù)傳遞中，使用appcan.locStorage對象來實現(xiàn)

存值：

appcan.locStorage.setVal(key,val)取值：appcan.locStorage.val(key)知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備2、本地存儲全局參數(shù)更多應(yīng)用于具有確定先后順序的場景，源窗口寫然后啟動目標(biāo)窗口，目標(biāo)窗口啟動時獲取參數(shù)。但很多場景并沒有固定的先后順序，更多的是相互間的狀態(tài)變化。對于此種場景，我們可以采用窗口事件機(jī)制來提供支撐。appcan.window.subscribe接口來監(jiān)聽訂閱一個自定義的頻道appcan.window.publish向訂閱的頻道，發(fā)送消息知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)知識準(zhǔn)備3、異步數(shù)據(jù)請求方法appcan.request.ajax(options)如：appcan.ajax({url:'',type:'GET',data:{a:'helloword',b:'page'},offline:true,offlineDataPath:'wgt://aaa/',success:function(data){alert(data);},error:function(e){alert(e);}});知識點1、首頁布局2、窗口跳轉(zhuǎn)3、列表數(shù)據(jù)獲取

4、首頁功能實現(xiàn)數(shù)據(jù)獲取功能實現(xiàn)關(guān)鍵點：1、數(shù)據(jù)獲取及顯示2、列表數(shù)據(jù)跳到詳細(xì)頁面3、存儲相應(yīng)數(shù)據(jù)ID知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)5、詳情頁功能實現(xiàn)知識準(zhǔn)備1、功能邏輯點擊首頁某條數(shù)據(jù)并存儲商品ID詳情頁獲取用戶及商品ID，根據(jù)商品ID獲取詳細(xì)數(shù)據(jù)并展示，根據(jù)用戶ID判斷用戶是否收藏此商品發(fā)布評論和收藏商品必須先登錄知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)知識準(zhǔn)備2、AppCan插件網(wǎng)絡(luò)通訊系統(tǒng)功能第三方API界面布局知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)功能實現(xiàn)方法：模板+手動布局知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)功能實現(xiàn)關(guān)鍵點：獲取商品及用戶ID|數(shù)據(jù)顯示將靜態(tài)轉(zhuǎn)為動態(tài)知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)功能實現(xiàn)關(guān)鍵點：用戶已登錄判斷其是否收藏，收藏后圖標(biāo)顯示為黃色用戶未登錄轉(zhuǎn)到登錄頁面頁面間傳值知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)功能實現(xiàn)關(guān)鍵點：評論顯示用戶未登錄轉(zhuǎn)到登錄頁面頁面間傳值知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

5、詳情頁功能實現(xiàn)功能實現(xiàn)關(guān)鍵點：高德地圖插件調(diào)用方法知識點1、頁面布局2、數(shù)據(jù)獲取3、收藏功能4、評論功能5、打開地圖

6、個人中心功能實現(xiàn)知識點1、頁面布局2、用戶信息修改3、用戶登錄4、我的收藏5、用戶注冊

6、個人中心功能實現(xiàn)功能實現(xiàn)關(guān)鍵點：模板拼裝知識點1、頁面布局2、用戶信息修改3、用戶登錄4、我的收藏