1.目錄結(jié)構(gòu)
1.1 main.js
main.js是 uni-app 的入口文件倦卖，主要作用是：
? 初始化vue實(shí)例。
? 定義全局組件。
? 定義全局屬性。
? 安裝插件扣讼，如：pinia、vuex 等缨叫。
1.2 App.vue
- App.vue入口組件
? App.vue是uni-app的入口組件椭符，所有頁(yè)面都是在App.vue下進(jìn)行切換
? App.vue本身不是頁(yè)面，這里不能編寫視圖元素耻姥，也就是沒有<template>元素 - App.vue的作用：
?應(yīng)用的生命周期
? 編寫全局樣式
? 定義全局?jǐn)?shù)據(jù) globalData
1.3 全局和局部樣式
- 全局樣式
? App.vue 中style的樣式為全局樣式销钝，作用于每一個(gè)頁(yè)面（style標(biāo)簽不支持scoped，寫了導(dǎo)致樣式無效）琐簇。
? App.vue 中通過 @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式蒸健，一樣作用于每一個(gè)頁(yè)面。
? uni.scss 文件也是用來編寫全局公共樣式婉商，通常用來定義全局變量似忧。
? uni.scss 中通過 @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式，一樣作用于每一個(gè)頁(yè)面据某。 - 局部樣式
? 在 pages 目錄下 的 vue 文件的style中的樣式為局部樣式橡娄，只作用對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 App.vue 中相同的選擇器癣籽。
? vue文件中的style標(biāo)簽也可支持scss等預(yù)處理器挽唉，比如：安裝dart-sass插件后，style標(biāo)簽便可支持scss寫樣式了筷狼。
? style標(biāo)簽支持scoped嗎瓶籽？不支持，不需寫埂材。 - 注意：應(yīng)用生命的周期僅可在App.vue中監(jiān)聽塑顺，在頁(yè)面監(jiān)聽無效。
1.4 uni.scss
-uni.scss 全局樣式文件
? 為了方便整體控制應(yīng)用風(fēng)格。 默認(rèn)定義了uni-app框架內(nèi)置全局變量严拒，當(dāng)然也可以存放自定義的全局變量等
? 在uni.scss中定義的變量扬绪，我們無需 @import 就可以在任意組件中直接使用。
? 使用uni.scss中的變量裤唠，需在 HBuilderX 里面安裝 scss 插件（dart-sass插件）挤牛，
? 然后在該組件的 style 上加 lang="scss"，重啟即可生效种蘸。
- 注意事項(xiàng)：
? 這里的uni-app框架內(nèi)置變量和后面uni-ui組件庫(kù)的內(nèi)置變量是不一樣的墓赴。
? uni.scss定義的變量是全局可以直接使用，App.vue定義的變量只能在當(dāng)前組件中使用航瞭。
1.5 全局?jǐn)?shù)據(jù)（頁(yè)面調(diào)用接口）
- getApp() 函數(shù)( 兼容h5诫硕、weapp、app )：
? 用于獲取當(dāng)前應(yīng)用實(shí)例刊侯，可用于獲取globalData 章办。 - getCurrentPages() 函數(shù)( 兼容h5、weapp滔吠、app )
? 用于獲取當(dāng)前頁(yè)面棧的實(shí)例纲菌，以數(shù)組形式按棧的順序給出挠日。
? 數(shù)組：第一個(gè)元素為首頁(yè)疮绷，最后一個(gè)元素為當(dāng)前頁(yè)面。
? 僅用于展示頁(yè)面棧的情況嚣潜，請(qǐng)勿修改頁(yè)面棧冬骚，以免造成頁(yè)面狀態(tài)錯(cuò)誤。
? 常用方法如下圖所示：
1.6 page.json
? page.json全局頁(yè)面配置（兼容h5懂算、weapp只冻、app ）
? pages.json 文件用來對(duì) uni-app 進(jìn)行全局配置，類似微信小程序中app.json计技。
? 決定頁(yè)面的路徑喜德、窗口樣式、原生的導(dǎo)航欄垮媒、底部的原生tabbar 等舍悯。
1.7 manifest.json
? manifest.json應(yīng)用配置
? Android平臺(tái)相關(guān)配置
? iOS平臺(tái)相關(guān)配置
? Web端相關(guān)的配置
? 微信小程序相關(guān)配置
? wxbc30134b589795b0
? ....
1.8 內(nèi)置組件
以前是html標(biāo)簽，比如<div>睡雇，現(xiàn)在是小程序組件萌衬，比如<view>。 那么標(biāo)簽和組件有什么區(qū)別它抱，不都是用尖括號(hào)包圍起來一段英文嗎秕豫？ 其實(shí)標(biāo)簽是老的概念，標(biāo)簽屬于瀏覽器內(nèi)置的東西观蓄。但組件混移，是可以自由擴(kuò)展的祠墅。 類似你可以把一段js封裝成函數(shù)或模塊，你也可以把一個(gè)ui控件封裝成一個(gè)組件歌径。
uni-app參考小程序規(guī)范饵隙，提供了一批內(nèi)置組件。
下為html標(biāo)簽和uni-app內(nèi)置組件的映射表：
- div 改成 view
- span沮脖、font 改成 text
- a 改成 navigator
- img 改成 image
默認(rèn)寬度 320px金矛、高度 240px
僅支持相對(duì)路徑、絕對(duì)路徑勺届，支持導(dǎo)入驶俊，支持 base64 碼； - input 僅僅是輸入框免姿。 原h(huán)tml規(guī)范中input不僅是輸入框饼酿，還有radio、checkbox胚膊、時(shí)間故俐、日期、文件選擇功能紊婉。在uni-app和小程序規(guī)范中药版，input僅僅是輸入框。其他功能uni-app有單獨(dú)的組件或API：radio組件喻犁、checkbox組件槽片、時(shí)間選擇、日期選擇肢础、圖片選擇还栓、視頻選擇、多媒體文件選擇(含圖片視頻)传轰、通用文件選擇剩盒。
- form、button慨蛙、label辽聊、textarea、canvas股淡、video 這些還在身隐。
- select 改成 picker
- iframe 改成 web-view
- ul、li沒有了唯灵，都用view替代贾铝。做列表一般使用uList組件
- audio 不再推薦使用，改成api方式，背景音頻api文檔 其實(shí)老的HTML標(biāo)簽也可以在uni-app里使用垢揩，uni-app編譯器會(huì)在編譯時(shí)把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽玖绿，比如把div編譯成view。但不推薦這種用法叁巨，調(diào)試H5端時(shí)容易混亂斑匪。
常用內(nèi)置組件
? view：視圖容器。類似于傳統(tǒng)html中的div锋勺，用于包裹各種元素內(nèi)容蚀瘸。（視圖容器可以使用div嗎？可以庶橱，但div不跨平臺(tái)）
? text：文本組件贮勃。用于包裹文本內(nèi)容。
? button：在小程序端的主題 和 在其它端的主題色不一樣（可通過條件編譯來統(tǒng)一風(fēng)格）苏章。
? image：圖片寂嘉。默認(rèn)寬度 320px、高度 240px
? 僅支持相對(duì)路徑枫绅、絕對(duì)路徑泉孩，支持導(dǎo)入，支持 base64 碼并淋；
? scrollview：可滾動(dòng)視圖區(qū)域寓搬，用于區(qū)域滾動(dòng)。
? 使用豎向滾動(dòng)時(shí)预伺，需要給 <scroll-view> 一個(gè)固定高度订咸，通過 css 設(shè)置 height
? 使用橫向滾動(dòng)時(shí)曼尊，需要給<scroll-view>添加white-space: nowrap;樣式酬诀，子元素設(shè)置為行內(nèi)塊級(jí)元素。
? APP和小程序中骆撇，請(qǐng)勿在 scroll-view 中使用 map瞒御、video 等原生組件。
? 小程序的 scroll-view 中也不要使用 canvas神郊、textarea 原生組件肴裙。
? 若要使用下拉刷新，建議使用頁(yè)面的滾動(dòng)涌乳，而不是 scroll-view 蜻懦。
? swiper：滑塊視圖容器，一般用于左右滑動(dòng)或上下滑動(dòng)比如banner輪播圖夕晓。
? 默認(rèn)寬100%宛乃，高為150px，可設(shè)置swiper組件高度來修改默認(rèn)高度，圖片寬高可用100%征炼。
1.9尺寸單位（rpx）
? uni-app 支持的通用 css 單位包括 px析既、rpx（推薦單位）、vh谆奥、vw
? px 即屏幕像素眼坏，rpx 是響應(yīng)式像素（ responsive pixel ），可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)酸些。
? 規(guī)定屏幕寬為750rpx宰译。如在 iPhone6 上，屏幕寬度為375px魄懂，共有750個(gè)物理像素囤屹。
則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素逢渔。
? 建議： 開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為設(shè)計(jì)稿的標(biāo)準(zhǔn)（即：設(shè)計(jì)稿寬度為750px）肋坚。
1.10背景圖片
? uni-app 支持使用在 css 里設(shè)置背景圖片，使用方式與普通 web 項(xiàng)目大體相同肃廓，但需要注意以下幾點(diǎn)：
? 支持 base64 格式圖片智厌，支持網(wǎng)絡(luò)路徑圖片。
? 小程序不支持在 css 中使用本地文件盲赊，包括背景圖和字體文件铣鹏，需轉(zhuǎn)成 base64 后使用。
? 使用本地背景圖片或字體圖標(biāo)需注意：
? 為方便開發(fā)者哀蘑，在背景圖片小于 40kb 時(shí)诚卸，uni-app 編譯到不支持本地背景圖的平臺(tái)時(shí)，會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式绘迁；
? 圖片大于等于 40kb合溺，會(huì)有性能問題，不建議使用太大的背景圖缀台，如開發(fā)者必須使用棠赛，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上膛腐，從網(wǎng)絡(luò)地址引用睛约。
? 本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對(duì)路徑。
? 相對(duì)路徑：../../common/base.css
? 絕對(duì)路徑：@/static/common/base.css
2.運(yùn)行uni-app
- 在瀏覽器運(yùn)行
? 選中uniapp 項(xiàng)目哲身，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器辩涝，即可體驗(yàn) uni-app 的 web 版。 - 在微信開發(fā)者工具運(yùn)行
? 選中uniapp項(xiàng)目勘天，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開發(fā)者工具怔揩，即可在微信開發(fā)者工具里面體驗(yàn) uni-app棍丐。
? 其它注意事項(xiàng)：
? 1.微信開發(fā)者工具需要開啟服務(wù)端口：小程序開發(fā)工具設(shè)置 -> 安全（目的是讓HBuilder可以啟動(dòng)微信開發(fā)者工具）
? 2.如第一次使用，需配置微信開發(fā)者工具的安裝路徑（會(huì)提示下圖）沧踏。
? 點(diǎn)擊工具欄運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 運(yùn)行設(shè)置歌逢，配置相應(yīng)小程序開發(fā)者工具的安裝路徑
? 3.自動(dòng)啟動(dòng)失敗，可用微信開發(fā)者工具手動(dòng)打開項(xiàng)目（項(xiàng)目在unpackage/dist/dev/mp-weixin路徑下）翘狱。 - 在運(yùn)行App到手機(jī)或模擬器（需要先安裝模擬器）
? 先連接真機(jī) 或者 模擬器（Android的還需要配置adb調(diào)試橋命令行工具）
? 選中uniapp項(xiàng)目秘案，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行App到手機(jī)或模擬器，
? 即可在該設(shè)備里面體驗(yàn)uni-app（支持中文路徑）
3.安裝mumu模擬器
- 第一步：下載mumu模擬器：https://mumu.163.com/mac/index.html
- 第二步：安裝mumu模擬器
- 第三步：配置adb調(diào)試橋命令行工具（用于 HBuilder X 和Android模擬器建立連接潦匈，來實(shí)時(shí)調(diào)試和熱重載阱高。HBuilder X 是有內(nèi)置adb的 )
? HBuilderX正式版的adb目錄位置：安裝路徑下的 tools/adbs 目錄
? 而MAC下為HBuilderX.app/Contents/tools/adbs目錄；
? HBuilderX Alpha版的adb目錄位置：安裝路徑下的 plugins/launcher/tools/adbs 目錄( 需先運(yùn)行后安裝了插槽才會(huì)有該目錄 )
? 而MAC下為/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目錄
? 在adbs目錄下運(yùn)行./adb 茬缩，即可使用adb命令（Win和Mac一樣）赤惊。
? 如想要全局使用 adb 命令，window電腦可在：設(shè)置 -> 高級(jí)設(shè)計(jì) -> 環(huán)境變量中設(shè)置 - 第四步：HBuilder X 開發(fā)工具連接mumu模擬器凰锡，使用adb調(diào)試橋來連接
? adb connect 127.0.0.1:7555 （ 端口是固定的未舟，啟動(dòng)mumu模擬器默認(rèn)是運(yùn)行在7555端口） - 第五步：選中項(xiàng)目 -> 運(yùn)行 ->運(yùn)行App到手機(jī)或模擬器-> 選中Android基座（基座其實(shí)是一個(gè)app殼）
4.安裝其它模擬器
- Mac 電腦：
? 可以安裝 Xcode 或者 Android Studio 軟件。推薦 XCode掂为。 - Window電腦：
? 安裝mumu裕膀、夜神、雷電模擬器等（推薦）
? 可以安裝 Android Studio 軟件（模擬器大勇哗、速度慢昼扛、卡）。
