一，uni-app 介紹 ：

官方網(wǎng)頁(yè)

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書(shū)/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

簡(jiǎn)單說(shuō)： 1次開(kāi)發(fā) 多端運(yùn)行

二，準(zhǔn)備工具

Hbuilderx （開(kāi)發(fā)與編譯工具）

微信小程序開(kāi)發(fā)工具（微信小程序預(yù)覽測(cè)試）

安卓模擬器/真機(jī)

運(yùn)行app

三，新建項(xiàng)目 / 認(rèn)識(shí)界面

1，新建項(xiàng)目

(1).點(diǎn)擊HbuilderX菜單欄文件>項(xiàng)目>新建

(2).選擇uni-app,填寫(xiě)項(xiàng)目名稱(chēng)，項(xiàng)目創(chuàng)建的目錄

2，認(rèn)識(shí)界面

2.1 介紹項(xiàng)目目錄和文件作用

1. pages.json ：文件用來(lái)對(duì) uni-app 進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等
2. manifest.json ：文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱(chēng)、圖標(biāo)、權(quán)限等。
3. App.vue：是我們的跟組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的，是頁(yè)面入口文件，可以調(diào)用應(yīng)用的生命周期函數(shù)。
4. main.js：是我們的項(xiàng)目入口文件，主要作用是初始化vue實(shí)例并使用需要的插件。
5. uni.scss：文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格，uni.scss文件里預(yù)置了一批scss變量預(yù)置。
6. unpackage：就是打包目錄，在這里有各個(gè)平臺(tái)的打包文件
7. pages：所有的頁(yè)面存放目錄
8. static：靜態(tài)資源目錄，例如圖片等
9. components：組件存放目錄

3，全局配置和頁(yè)面配置

通過(guò)globalStyle進(jìn)行全局配置

注意：

如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運(yùn)行成功微信開(kāi)發(fā)者工具在設(shè)置中安全設(shè)置，服務(wù)端口開(kāi)啟

為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度、運(yùn)行性能等因素，uni-app 約定了如下開(kāi)發(fā)規(guī)范：

• 頁(yè)面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
• 組件標(biāo)簽靠近小程序規(guī)范，詳見(jiàn)uni-app 組件規(guī)范
• 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見(jiàn)uni-app接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了App及頁(yè)面的生命周期
• 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開(kāi)發(fā)

四，運(yùn)行多端

1，H5

2，小程序

01 打開(kāi)開(kāi)發(fā)工具的服務(wù)端口

02 HBuilderx配置 微信開(kāi)發(fā)工具的地址

03 配置微信小程序id

04 運(yùn)行到微信小程序

3，App

01 打開(kāi)模擬器或者手機(jī)

02 配置模擬器的端口

各模擬器 端口號(hào)：

夜神模擬器端口號(hào)：62001
海馬模擬器端口號(hào)：26944
逍遙模擬器端口號(hào)：21503
MuMu模擬器端口號(hào)：7555
天天模擬器端口號(hào)：6555

03 運(yùn)行到模擬器

4，注意項(xiàng)

1. hbuilder可能需要下載對(duì)應(yīng)的插件
2. 運(yùn)行到安卓模擬器，有視圖差別
3. 運(yùn)行可以需要一定的詩(shī)句

五，語(yǔ)法：

1，模板語(yǔ)法

1.1，文本渲染

{{表達(dá)式}}v-text=“表達(dá)式”
表達(dá)式簡(jiǎn)單的js運(yùn)算{{2+3}}js方法調(diào)用{{title.length}}{{title.split("").reverse().join("")}}3元運(yùn)算符<view>{{title.length>15?'長(zhǎng)度很長(zhǎng)':'字少事大'}}</view>
v-html 富文本

1.2，條件渲染

v-ifv-else-ifv-elsev-show通過(guò)三元運(yùn)算符

1.3，列表選項(xiàng)

字符串，數(shù)字，列表，對(duì)象都可以遍歷

<view v-for="(item,index) in list" :key="index">{{index+1}}  {{item}}</view>

一定要保證兄弟元素間的key值是唯一

1.4， 屬性綁定

<button v-bind:disabled=“true”>
<button :disabled="true">

1.5，表單綁定

默認(rèn)

:value="單向綁定"

input

v-model=“雙向綁定”

@change=“$event.detail.value”事件，事件的值$event.detail.value

1.6，事件

1.6.1，事件綁定：

<view v-on:click="響應(yīng)"

簡(jiǎn)寫(xiě)綁定：

<view @click="事件響應(yīng)"

事件行內(nèi)處理

<view @click="num++"

事件響應(yīng)函數(shù) (函數(shù)在methods定義)

<view @click="say"
<view @click="say"

1.6.2，事件傳參

不寫(xiě)參數(shù)

@click="say"
等同于
@click=“say()”
等同于
@click=“say($event)”

$event 是一個(gè)固定寫(xiě)法 代表事件對(duì)象

@click=“doit(str)”
doit(str="你好"){uni.showModal({title:str})}

1.6.3，事件對(duì)象 $event/e

function say(e){
}
//   target目標(biāo)對(duì)象
//   dataSet 組件傳參
<view :data-title="title" @click="say">
function say(e){e.target.dataset.title
}

2，uni-app頁(yè)面 配置

頁(yè)面配置 pages.json

globalStyle 默認(rèn)頁(yè)面的樣式會(huì)應(yīng)用全局樣式

頁(yè)面寫(xiě)了style 配置，那么用的配置覆蓋全局的配置

**pages** 頁(yè)面

path頁(yè)面路徑style 頁(yè)面樣式

3，vue選項(xiàng)

data ：數(shù)據(jù)methods： 方法computed ：計(jì)算watch：監(jiān)聽(tīng)directive：指令filter：過(guò)濾

六，uni-app的生命周期

1，Vue的生命周期

創(chuàng)建

（1）. beforeCreate

（2）. created

可以使用this，沒(méi)有dom

作用：

1. 初始數(shù)據(jù)
2. 注冊(cè)監(jiān)聽(tīng)事件
3. 開(kāi)啟定時(shí)器
4. ajax請(qǐng)求

掛載

1. beforeMount

2. mounted

可以操作dom（節(jié)點(diǎn)）

作用：

1. 操作dom
2. ajax請(qǐng)求

更新

1. beforeUpdate

2. updated

卸載

1. beforeDestroy

2. destroyed

作用：

1. 移除事件監(jiān)聽(tīng)
2. 移除停止定時(shí)器

2，小程序的生命周期

加載

onLoad

作用：

能夠獲取頁(yè)面的參數(shù)開(kāi)啟ajax，定時(shí)器，事件監(jiān)聽(tīng)像vue的created

顯示

onShow

作用：

播放媒體

準(zhǔn)備

onReady

作用：

獲取節(jié)點(diǎn)信息像vue的mounted

后臺(tái)運(yùn)行

onHide

作用：

停止播放媒體

卸載

onUnload

作用：

停止事件監(jiān)聽(tīng)與定時(shí)器

3，小程序的全局方法

下拉刷新

onPullDownRefresh

觸底更新

onReachBottom()

右上角分享

onShareAppMessage

頁(yè)面滾動(dòng)

onPageScroll

分享到朋友圈

onShareTimeline

4，app的全局方法

4.1，手機(jī)的返回鍵被點(diǎn)擊

onBackPress

4.2，導(dǎo)航欄按鈕被點(diǎn)擊

onNavigationBarButtonTap

七，路由

1，路由組件

導(dǎo)航 navigator

url 跳轉(zhuǎn)頁(yè)面的地址

打開(kāi)類(lèi)型 open-type

navigate跳轉(zhuǎn)redirect重定向（當(dāng)前頁(yè)面不留歷史記錄）navigateBack返回relauch 重啟switchTab 跳轉(zhuǎn)底部欄

2，路由傳參

傳遞

url:path?name=mumu&age=18

接收

onLoad(option){}

option的值{name:“mumu”,age:18}

3，路由api

跳轉(zhuǎn)

uni.navigateTo({url})

重定向

uni.redirectTo({url})

返回

uni.navigateBack()

底部欄切換

uni.switchTab()

重啟

uni.reLaunch()

4，路由配置 + （底部選項(xiàng)欄配置）

語(yǔ)法解釋

"borderStyle": “邊框顏色”,
"selectedColor": “字體選中后的顏色”,
"backgroundColor":“底部欄背景顏色”,
“color”: “默認(rèn)字體顏色”,
"list": [{ 選項(xiàng)列表
"pagePath": "頁(yè)面路徑",
"iconPath": “未選擇時(shí)的圖片（圖片路徑）”,
"selectedIconPath": “選擇時(shí)的圖片（圖片路徑）”,
"text": “底部選項(xiàng)文字”
},

// 配置tabbar導(dǎo)航欄"tabBar": {"borderStyle": "#eaeaea","selectedColor": "#f12525","backgroundColor": "#ffffff","color": "#444444","list": [{"pagePath": "pages/index/index","iconPath": "static/img/home.png","selectedIconPath": "static/img/home-hl.png","text": "首頁(yè)"},{"pagePath": "pages/cate/cate","iconPath": "static/img/type.png","selectedIconPath": "static/img/type-hl.png","text": "分類(lèi)"},{"pagePath": "pages/member/member","iconPath": "static/img/ceo.png","selectedIconPath": "static/img/ceo-hl.png","text": "會(huì)員"},{"pagePath": "pages/Cart/Cart","iconPath": "static/img/cart.png","selectedIconPath": "static/img/cart-hl.png","text": "購(gòu)物車(chē)"},{"pagePath": "pages/mine/mine","iconPath": "static/img/mine.png","selectedIconPath": "static/img/mine-hl.png","text": "我的"}]},

注意：

底部選項(xiàng)**最多設(shè)置5個(gè)，最少2個(gè)**

5，獲取當(dāng)前頁(yè)面 getApp

01 在App.vue
定義globalData:{num:100}
02 要使用的頁(yè)面獲取app
var app = getApp()
03獲取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}

6，獲取頁(yè)面棧 getCurrentPages

var page  = getCurrentPages();
uni.navigateBack({delta:page.length})

獲取當(dāng)前的頁(yè)面棧，是一個(gè)數(shù)組（1-5）

page[page.length-1] 

獲取當(dāng)前頁(yè)面的信息（不要去修改）

八，條件編譯

目的:

不同的平臺(tái)展示不同特性與功能條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋?zhuān)瑢⒆⑨尷锩娴拇a編譯到不同平臺(tái)。

介紹：

寫(xiě)法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

• #ifdef：if defined 僅在某平臺(tái)存在
• #ifndef：if not defined 除了某平臺(tái)均存在
• %PLATFORM%：平臺(tái)名稱(chēng)

1， 模板條件編譯

格式

<!-- #ifdef H5 -->**內(nèi)容**<!-- #endif -->

條件

APP —— App端
H5 —— 網(wǎng)頁(yè)
MP —— 小程序
MP-WEIXIN —— 微信小程序

2，css條件編譯

/* #ifdef APP */.active{color:red}
/* #endif */

3，js條件編譯

// #ifdef APP-PLUSuni.showModal({title:"你好App用戶(hù)"})
// #endif

4，條件配置

pages.json“style”:{"h5":{"titleNView":{"titleText":"我是H5"}},"app-plus": {"titleNView":false //隱藏導(dǎo)航欄}}

// #ifdef MP-WEIXIN	|| APP	
{"path":"pages/condition/we","style":{"navigationBarTitleText": "小程序?qū)Ｓ许?yè)面"}
},
// #endif