第5章uni-app基礎(chǔ)本章學(xué)時：理論4學(xué)時，實(shí)驗(yàn)4學(xué)時教學(xué)目標(biāo)理解uni-app的Flex布局和rpx的含義。掌握view、scroll-view、swiper、form、button、image組件的用法。能通過uni-app官網(wǎng)文檔查詢組件的詳細(xì)資料。掌握路由與頁面跳轉(zhuǎn)API的用法。理解網(wǎng)絡(luò)請求的回調(diào)函數(shù)的含義。理解Promise語法。掌握數(shù)據(jù)緩存API的用法。掌握文件上傳API的用法。掌握uni-ui表單組件的用法，掌握驗(yàn)證規(guī)則的配置方法。理解easycom組件規(guī)范。教學(xué)內(nèi)容、重點(diǎn)與難點(diǎn)教學(xué)內(nèi)容uni-app應(yīng)用程序概述包括uni-app項(xiàng)目目錄結(jié)構(gòu)、Vue的頁面結(jié)構(gòu)、插值表達(dá)式、v-on、v-show、v-if、v-for和v-bind等指令、樣式綁定和計算屬性。內(nèi)置組件包括創(chuàng)建組件、組件的注冊和使用、父組件通過props向子組件傳遞數(shù)據(jù)、子組件通過$emit觸發(fā)事件向父組件傳遞數(shù)據(jù)。（3）擴(kuò)展API包括應(yīng)用生命周期函數(shù)、頁面生命周期函數(shù)和組件生命周期函數(shù)。（4）easycom組件規(guī)范以上內(nèi)容參見PPT。其中有關(guān)uni-app應(yīng)用程序的創(chuàng)建和運(yùn)行方法參見附錄1。建議：理論4個學(xué)時可以分配2個給flex布局，rpx和內(nèi)置組件，2個給擴(kuò)展API、擴(kuò)展組件及easycom組件規(guī)范。實(shí)驗(yàn)4個學(xué)時則相應(yīng)地分配。重點(diǎn)Flex布局的主軸與交叉軸。路由和頁面跳轉(zhuǎn)API。網(wǎng)絡(luò)請求API。文件上傳API。uni-ui表單組件。難點(diǎn)基于Promise語法處理網(wǎng)絡(luò)請求的返回結(jié)果。配置uni-ui表單組件的驗(yàn)證規(guī)則。教學(xué)方式課堂結(jié)合PPT講解核心知識點(diǎn)，并配合適當(dāng)?shù)牟僮餮菔?。教學(xué)過程設(shè)計理論教學(xué)過程舊知復(fù)習(xí)對第4章的內(nèi)容做概要性的回顧，指出重點(diǎn)在于理解組成Vue頁面的三個標(biāo)簽所編寫的內(nèi)容：template寫頁面的結(jié)構(gòu)，style寫頁面的樣式。而script寫頁面的腳本，其中data()定義頁面所用到的變量，而methods屬性里定義頁面所用到的函數(shù)。檢查第4章習(xí)題的第1大題的完成情況。新知講解uni-app應(yīng)用程序概述通過PPT介紹uni-app頁面常用的flex布局方式，重點(diǎn)講清楚主軸和交叉軸的概念，以及相應(yīng)的對齊方式。通過示例5-1來展示flex布局的用法，同時介紹rpx在屏幕適配時的作用。對于內(nèi)置組件可以選擇其中一至兩個介紹（比如scroll-view組件和form組件），通過操作演示的方式講解其用法。其余留作實(shí)驗(yàn)教學(xué)內(nèi)容。uni-app所提供的內(nèi)置組件，擴(kuò)展API和擴(kuò)展組件非常豐富，在課堂上引導(dǎo)學(xué)生要學(xué)會結(jié)合官網(wǎng)學(xué)習(xí)內(nèi)置組件的用法。擴(kuò)展API將路由跳轉(zhuǎn)時通過url傳遞參數(shù)的方法、通過回調(diào)函數(shù)和Promise處理網(wǎng)絡(luò)請求的返回結(jié)構(gòu)作為重點(diǎn)內(nèi)容講解。其余留作實(shí)驗(yàn)教學(xué)內(nèi)容。擴(kuò)展組件通過操作演示uni-ui組件如何導(dǎo)入到uni-app項(xiàng)目中。重點(diǎn)講解uni-uiforms組件驗(yàn)證規(guī)則的配置方法。示例5-16有一定的難度，供學(xué)有余力的學(xué)生學(xué)習(xí)。easycom組件規(guī)范通過PPT做簡要介紹。實(shí)驗(yàn)教學(xué)過