Uni-app基礎知識

uni-app組成和跨端原理 | uni-app官網uni-app,uniCloud,serverless,uni-app組成和跨端原理,基本語言和開發規范,編譯器,運行時（runtime）,邏輯層和渲染層分離https://uniapp.dcloud.net.cn/tutorial/1.adb連接模擬器

? ? ? ? 找到adb所在位置（一般在hbuilder安裝目錄下的 \plugins\launcher-tools\tools\adbs 下）

????????當前文件夾直接cmd

????????adb常用命令：

#查看adb連接的設備列表

adb devices

#連接本地模擬器（我這端口時mumu模擬器默認的端口）

adb connect 127.0.0.1:7555

2.uni-app項目結構介紹

├── common            # 通用的資源，如樣式、工具函數等
├── components        # 自定義組件
├── pages             # 各頁面目錄，每個頁面是一個文件夾
│   ├── index
│   │   ├── index.vue # 首頁頁面
├── static            # 靜態資源，如圖片、字體等
├── unpackage         # 打包后的文件
├── App.vue           # 應用的入口文件
├── main.js           # Vue初始化文件
├── manifest.json     # 配置應用名稱、appid、logo、版本等
├── pages.json        # 配置頁面路由、導航條、選項卡等
├── uni.scss          # 通用樣式文件
└── package.json      # npm 包管理配置文件

?2.1 main.js

????????main.js是項目的入口文件，用來初始化vue實例，定義全局屬性、組件，安裝插件

2.2 App.vue

? ? ? ? app.vue是項目的入口組件，所有頁面在此切換，用來監聽應用生命周期、編寫全局樣式、定義全局數據

2.2.1 全局樣式

<style>/*每個頁面公共css */.title{color: aqua;}
</style>

?有個就近原則，如果你設置的全局樣式與某個頁面的樣式重名，全局樣式的對應屬性對該頁面不生效

2.2.2 全局數據

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},//定義全局數據globalData: {name: 'luobei',age: 18}}
</script>

? ? ? ? 頁面中獲取全局數據

<script>export default {data() {return {title: 'Hello!'}},onLoad() {//1.拿到全局數據const app = getApp()console.log(app.globalData);},methods: {}}
</script>

2.3 pages.json

? ? ? ? pages.json用來對項目進行全局配置，決定頁面的路徑、窗口樣式、導航欄、底部tabbar等

2.3.1 窗口樣式?

    "globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}

?navigationBarTextStyle：設置導航欄上文字的顏色；
navigationBarTitleText：設置導航欄的標題文本；
navigationBarBackgroundColor：設置導航欄的背景顏色；
backgroundColor：設置整個頁面的背景顏色；

2.3.2 頁面路徑?

    "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],

數組中的每一項表示一個頁面，包含頁面的路徑和樣式配置；
pages中的設置樣式的優先級在globalStyle之上；

2.3.3 底部導航欄

"tabBar": {"color": "#999999","selectedColor": "#000000","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "Home","iconPath": "static/icon-home.png","selectedIconPath": "static/icon-home-selected.png"},{"pagePath": "pages/profile/profile","text": "Profile","iconPath": "static/icon-profile.png","selectedIconPath": "static/icon-profile-selected.png"}]
}

borderStyle：backgroundColor：整個 tabBar 的背景顏色；
tabBar 上邊框的顏色，僅支持 black 和 white 兩種值；
list：定義 tabBar 中的每一個選項（tab）；?

?2.4 mainfest.json

? ? ? ? 應用配置文件，hbuilder支持可視化配置

應用信息配置：包括應用名稱、版本、描述、圖標、協議、端口等基本信息；
平臺配置：定義應用在不同平臺（如 App、微信小程序、H5 等）的特殊配置；
權限配置：聲明應用需要的權限；
SDK配置：集成第三方服務的 SDK 配置；
發布配置：設置應用發布到不同平臺的相關信息；

2.5 uni-app的生命周期

生命周期函數	描述	觸發時機
`onLoad`	頁面加載時觸發。	頁面初始化時，只會觸發一次，參數為上一個頁面傳遞的 options。
`onShow`	頁面顯示/切入前臺時觸發。	每次打開頁面時。
`onReady`	頁面初次渲染完成時觸發。	頁面首次渲染完成時，只觸發一次。
`onHide`	頁面隱藏/切入后臺時觸發。	如 `navigateTo` 或底部 tab 切換到其他頁面，小程序切入后臺等。
`onUnload`	頁面卸載時觸發。	如 `redirectTo` 或 `navigateBack` 到其他頁面。
`onPullDownRefresh`	監聽用戶下拉動作。	需要在頁面配置 `enablePullDownRefresh` 為 `true`。
`onReachBottom`	頁面上拉觸底事件的處理函數。	需要在頁面配置 `onReachBottomDistance`。
`onShareAppMessage`	用戶點擊右上角分享時觸發。	返回自定義的分享內容。
`onPageScroll`	監聽頁面滾動。	頁面滾動時。
`onResize`	頁面尺寸改變時觸發。	小程序中無此鉤子。
`onTabItemTap`	點擊 tab 時觸發。	需要在頁面配置 `tabBar`。

3.uni-app內置組件?

3.1 視圖容器

view：視圖容器，可以包含其他組件和視圖。

<view class="container"> <text>Hello, uni-app!</text> </view>

scroll-view：可滾動視圖容器。

<scroll-view scroll-y="true" style="height: 200px;"> <view>Item 1</view> <view>Item 2</view> <view>Item 3</view> </scroll-view>

swiper：輪播圖容器。

<swiper autoplay="true" interval="3000"> <swiper-item> <view>Slide 1</view> </swiper-item> <swiper-item> <view>Slide 2</view> </swiper-item> <swiper-item> <view>Slide 3</view> </swiper-item> </swiper>

3.2 基礎內容

text：文本組件。

<text>這是一個文本</text>

image：圖片組件。

#可以相對路徑（../）、絕對路徑（@/）、導入的圖片（script中import的圖片）、base64字符串

<image src="/static/logo.png" mode="widthFix"></image>

icon：圖標組件。

<icon type="success" size="30"></icon>

3.3 表單組件

input：輸入框組件。

<input type="text" placeholder="請輸入內容"></input>

button：按鈕組件。

<button type="primary">點擊我</button>

checkbox：復選框組件。

<checkbox-group> <label><checkbox value="1"/>選項一</label> <label><checkbox value="2"/>選項二</label> </checkbox-group>

3.4 媒體組件

video：視頻播放組件。

<video src="/static/video.mp4" controls></video>

audio：音頻播放組件。

<audio src="/static/audio.mp3" controls></audio>

camera：相機組件。

<camera mode="normal"></camera>

4.uni-app擴展組件（uni-ui）

uni-app官網uni-app,uniCloud,serverless,在HBuilderX 新建uni-app項目的模板中，選擇uni-ui模板,通過 uni_modules 單獨安裝組件,通過 uni_modules 導入全部組件,npm安裝https://uniapp.dcloud.net.cn/component/uniui/quickstart.html? ? ? ?Uni-UI 是 Uni-App 提供的擴展組件庫，包含了一系列常用的 UI 組件，可以方便地在 Uni-App 項目中使用。

4.1 uni-ui安裝使用?

4.1.1 導入整個uni-ui

????????或者

4.1.2單獨安裝某個組件

5.uni-app頁面之間傳遞參數

5.1 通過URL參數傳遞

? ? ? ? 假如從A頁面跳轉B頁面并傳遞參數

? ? ? ? A.vue中：

<template><view><button @click="navigateToDetail">跳轉到B頁</button></view>
</template><script>
export default {methods: {navigateToDetail() {uni.navigateTo({url: '/pages/B/B?name=luobei&age=18'});}}
}
</script>

? ? ? ? B.vue中接收參數：

<template><view><text>姓名：{{ name }}</text><text>年齡：{{ age }}</text></view>
</template><script>
export default {data() {return {name: '',age: ''};},onLoad(options) {// 接收 URL 參數this.name = options.name;this.age = options.age;}
}
</script>

5.2 通過全局對象傳遞參數

? ? ? ? 在App.vue中定義全局數據

<script>
export default {onLaunch() {console.log('App Launch');},globalData: {userInfo: {name: 'luobei',age: 18}}
}
</script>

? ? ? ? A.vue中設置全局參數

<template><view><button @click="setGlobalData">設置全局數據</button></view>
</template><script>
export default {methods: {setGlobalData() {getApp().globalData.userInfo = {name: 'new name',age: 25};}}
}
</script>

? ? ? ? B.vue中讀取全局參數

<template><view><text>姓名：{{ userInfo.name }}</text><text>年齡：{{ userInfo.age }}</text></view>
</template><script>
export default {data() {return {userInfo: {}};},onShow() {// 獲取全局數據this.userInfo = getApp().globalData.userInfo;}
}
</script>