uni-app移動應(yīng)用開發(fā)課件 1-初識uni-app

移動應(yīng)用

開發(fā)UniApp初始uni-app第

一

章學(xué)習(xí)目標(biāo)

知識目標(biāo)1.了解uni-app的發(fā)展歷程2.熟悉uni-app項(xiàng)目的開發(fā)工具3.掌握uni-app項(xiàng)目搭建4.熟悉uni-app項(xiàng)目的目錄結(jié)構(gòu)

能力目標(biāo)1.能夠熟練使用HBuilderX開發(fā)工具2.能夠創(chuàng)建并運(yùn)行uni-app項(xiàng)目3.能夠熟悉uni-app項(xiàng)目目錄結(jié)構(gòu)4.能夠?qū)崿F(xiàn)uni-app項(xiàng)目打包

素質(zhì)目標(biāo)1.具有良好的軟件編碼規(guī)范素養(yǎng)2.培養(yǎng)學(xué)生技能報國的愛國主義情懷、精益求精的工匠精神3.激發(fā)學(xué)生對本課程學(xué)習(xí)的興趣目錄CONTENTS第一個uni-app應(yīng)用uni-app打包uni-app發(fā)展歷程123案例：示例代碼4uni-app發(fā)展歷程第

一

節(jié)Dcloud：行業(yè)開創(chuàng)者2012年：研發(fā)小程序技術(shù)，優(yōu)化webview功能和性能，推出HBuilder開發(fā)工具。2015年：正式商用自己的小程序，產(chǎn)品名為“流應(yīng)用”。2015年9月：推進(jìn)微信團(tuán)隊(duì)開展小程序業(yè)務(wù)，分享webview體驗(yàn)優(yōu)化的經(jīng)驗(yàn)。2016年初：上線小程序業(yè)務(wù)。1.1.1uni-app的由來360手機(jī)助手小程序經(jīng)過多年積累，截至2021年3月，DCloud已擁有900多萬開發(fā)者；1DCloud一直都有小程序的iOS、Android引擎，因此uni-app的App端和小程序端保持高度一致；2DCloud在引擎上的持續(xù)投入，所以uni-app的App端功能、性能比大多數(shù)小程序引擎都優(yōu)秀；3DCloud對各平臺小程序太了解了，因此uni-app能成為抹平各端差異的跨端框架。4uni-app成功的因素1.1.1uni-app的由來1.1.2uni-app的特點(diǎn)1.平臺能力不受限3.性能體驗(yàn)優(yōu)秀5.學(xué)習(xí)及開發(fā)成本低2.一套代碼運(yùn)行到多個平臺4.周邊生態(tài)豐富第1個uni-app應(yīng)用第

二

節(jié)vscode、HBuilderX、webstorm、sublimetext前端界主流開發(fā)工具1.2.1uni-app開發(fā)工具uni-app的開發(fā)工具1.2.1uni-app開發(fā)工具HBuilderX編輯的特點(diǎn)采用C++的架構(gòu)，性能遠(yuǎn)超Java或Electron架構(gòu)綠色發(fā)行包只有10MB，很輕巧對vue做了大量優(yōu)化投入，開發(fā)體驗(yàn)遠(yuǎn)超其他開發(fā)工具可新建小程序等項(xiàng)目唯一一個新建文件默認(rèn)類型是markdown的編輯器界面比其他工具更清爽簡潔現(xiàn)代js開發(fā)中大量json結(jié)構(gòu)的寫法，提供了比其他工具更高效的操作支持java、nodejs插件，并兼容了很多vscode的插件及代碼塊。1.2.2新建項(xiàng)目創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟選擇【文件】-【新建】-【項(xiàng)目】選項(xiàng)在彈出的【新建項(xiàng)目】對話框中選擇【uni-app】類型，輸入項(xiàng)目名稱，并單擊【瀏覽】按鈕，選擇項(xiàng)目存放地址；選擇相應(yīng)uni-app項(xiàng)目模板，點(diǎn)擊創(chuàng)建1.2.3項(xiàng)目目錄結(jié)構(gòu)uni-ui項(xiàng)目目錄結(jié)構(gòu)Hellouni-app項(xiàng)目目錄結(jié)構(gòu)1.2.3項(xiàng)目目錄結(jié)構(gòu)文件（夾）名稱作用common存放公共js和css的文件夾components存放組件的文件夾pages存放所有頁面的文件夾static存放靜態(tài)資源的文件夾platforms存放各平臺專用頁面的文件夾unpackage打包目錄，新建項(xiàng)目是沒有的App.vue項(xiàng)目的全局配置文件，用來配置App全局樣式以及監(jiān)聽?wèi)?yīng)用生命周期main.js是項(xiàng)目的初始化入口文件manifest.json應(yīng)用配置文件，用于配置應(yīng)用名稱、appid、logo、版本等打包信息pages.json全局配置文件，用于配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息uni.scssuni-app的樣式包，整體控制應(yīng)用的風(fēng)格主要的文件（夾）目錄結(jié)構(gòu)1.2.3項(xiàng)目目錄結(jié)構(gòu)跨平臺支持組件存放目錄AppwxcomponentsH5wxcomponents微信小程序wxcomponents支付寶小程序mycomponents百度小程序swancomponents字節(jié)跳動小程序ttcomponentsQQ小程序wxcomponents跨平臺自定義組件存放目錄1.2.4運(yùn)行項(xiàng)目瀏覽器運(yùn)行1運(yùn)行到瀏覽器瀏覽器中運(yùn)行效果1.2.4運(yùn)行項(xiàng)目真機(jī)運(yùn)行2運(yùn)行到真機(jī)1.2.4運(yùn)行項(xiàng)目在微信開發(fā)者工具里運(yùn)行3運(yùn)行到微信開發(fā)者工具1.2.4運(yùn)行項(xiàng)目說明：運(yùn)行到“微信小程序模擬器”“微信開發(fā)者工具”必須搭建微信小程序環(huán)境。在“微信公眾平臺”上申請小程序賬號下載安裝“微信開發(fā)者工具”1.2.4運(yùn)行項(xiàng)目微信小程序注冊頁面申請一個小程序帳號小程序管理平臺開發(fā)設(shè)置1.2.4運(yùn)行項(xiàng)目微信開發(fā)者工具下載下載安裝微信開發(fā)者工具1.2.4運(yùn)行項(xiàng)目微信開發(fā)者工具界面配置微信開發(fā)者工具微信開發(fā)者工具安全設(shè)置uni-app打包第

三

節(jié)1.3.1打包原生App（云端）設(shè)置打包選項(xiàng)配置微信開發(fā)者工具打包日志打包成功提示1.3.2打包原生App（本地）原生App-本地打包配置微信開發(fā)者工具1.3.3發(fā)布為H5manifest.json可視化界面配置微信開發(fā)者工具發(fā)行為H5操作1.3.3發(fā)布為H5申請小程序帳號并獲取AppID：在HBuilderX中選擇【發(fā)行】-【小程序-微信（僅適用于uni-app）】選項(xiàng)，在彈出的微信小程序發(fā)行對話框中對應(yīng)的文本框內(nèi)輸入小程序名稱和AppID，單擊【發(fā)行】按鈕，即可在工程目錄unpackage/dist/build/mp-weixin中生成微信小程序項(xiàng)目代碼。在微信小程序開發(fā)者工具中，導(dǎo)入生成的微信小程序項(xiàng)目，測試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕，之后按照“提交審核”“發(fā)布”小程序標(biāo)準(zhǔn)流程，逐步操作即可。如在發(fā)行界面勾選了自動上傳微信平臺，則無需再打開微信工具手動操作，將直接上傳到微信服務(wù)器提交審核。實(shí)驗(yàn)步驟案例：示例代碼第

四

節(jié)制作步驟：1.新建項(xiàng)目。選擇【uni-app】-【hellouni-app】

2.熟悉項(xiàng)目目錄結(jié)構(gòu)，并將項(xiàng)目運(yùn)行在瀏覽器、真機(jī)、微信小程序，并通過云打包生成.apk文件uni-app成功的因素本章小結(jié)

主要講解uni-app的發(fā)展歷程，uni-app項(xiàng)目的開發(fā)環(huán)境、目錄結(jié)構(gòu)、項(xiàng)目新建、項(xiàng)目運(yùn)行、項(xiàng)目打包等內(nèi)容。學(xué)習(xí)并掌握uni-app項(xiàng)目的基本搭建。