一，uni-app 介紹 ：
官方網(wǎng)頁
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。
簡單說： 1次開發(fā) 多端運行
二，準(zhǔn)備工具
Hbuilderx （開發(fā)與編譯工具）
微信小程序開發(fā)工具（微信小程序預(yù)覽測試）
安卓模擬器/真機
運行app
三，新建項目 / 認識界面
1，新建項目
(1).點擊HbuilderX菜單欄文件>項目>新建
(2).選擇uni-app,填寫項目名稱，項目創(chuàng)建的目錄
2，認識界面
2.1 介紹項目目錄和文件作用
- pages.json ：文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等
- manifest.json ：文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。
- App.vue：是我們的跟組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，可以調(diào)用應(yīng)用的生命周期函數(shù)。
- main.js：是我們的項目入口文件，主要作用是初始化vue實例并使用需要的插件。
- uni.scss：文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格，uni.scss文件里預(yù)置了一批scss變量預(yù)置。
- unpackage：就是打包目錄，在這里有各個平臺的打包文件
- pages：所有的頁面存放目錄
- static：靜態(tài)資源目錄，例如圖片等
- components：組件存放目錄
3，全局配置和頁面配置
通過globalStyle進行全局配置
注意：
如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運行成功微信開發(fā)者工具在設(shè)置中安全設(shè)置，服務(wù)端口開啟
為了實現(xiàn)多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：
- 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范
- 組件標(biāo)簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范
- 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范
- 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了App及頁面的生命周期
- 為兼容多端運行，建議使用flex布局進行開發(fā)
四，運行多端
1，H5
2，小程序
01 打開開發(fā)工具的服務(wù)端口
02 HBuilderx配置 微信開發(fā)工具的地址
03 配置微信小程序id
04 運行到微信小程序
3，App
01 打開模擬器或者手機
02 配置模擬器的端口
各模擬器 端口號：
夜神模擬器端口號：62001
海馬模擬器端口號：26944
逍遙模擬器端口號：21503
MuMu模擬器端口號：7555
天天模擬器端口號：6555
03 運行到模擬器
4，注意項
- hbuilder可能需要下載對應(yīng)的插件
- 運行到安卓模擬器，有視圖差別
- 運行可以需要一定的詩句
五，語法：
1，模板語法
1.1，文本渲染
{{表達式}}v-text=“表達式”
表達式簡單的js運算{{2+3}}js方法調(diào)用{{title.length}}{{title.split("").reverse().join("")}}3元運算符<view>{{title.length>15?'長度很長':'字少事大'}}</view>
v-html 富文本
1.2，條件渲染
v-ifv-else-ifv-elsev-show通過三元運算符1.3，列表選項
字符串，數(shù)字，列表，對象都可以遍歷
<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，表單綁定
默認
:value="單向綁定"input
v-model=“雙向綁定”@change=“$event.detail.value”事件，事件的值$event.detail.value1.6，事件
1.6.1，事件綁定：
<view v-on:click="響應(yīng)"簡寫綁定：
<view @click="事件響應(yīng)"事件行內(nèi)處理
<view @click="num++"事件響應(yīng)函數(shù) (函數(shù)在methods定義)
<view @click="say"
<view @click="say"1.6.2，事件傳參
不寫參數(shù)
@click="say"
等同于
@click=“say()”
等同于
@click=“say($event)”$event 是一個固定寫法 代表事件對象
@click=“doit(str)”
doit(str="你好"){uni.showModal({title:str})}1.6.3，事件對象 $event/e
function say(e){
}
// target目標(biāo)對象
// dataSet 組件傳參
<view :data-title="title" @click="say">
function say(e){e.target.dataset.title
}2，uni-app頁面 配置
頁面配置 pages.json
globalStyle 默認頁面的樣式會應(yīng)用全局樣式
頁面寫了style 配置，那么用的配置覆蓋全局的配置
**pages** 頁面
path頁面路徑style 頁面樣式
3，vue選項
data ：數(shù)據(jù)methods： 方法computed ：計算watch：監(jiān)聽directive：指令filter：過濾
六，uni-app的生命周期
1，Vue的生命周期
創(chuàng)建
（1）. beforeCreate
（2）. created
可以使用this，沒有dom
作用：
- 初始數(shù)據(jù)
- 注冊監(jiān)聽事件
- 開啟定時器
- ajax請求
掛載
1. beforeMount
2. mounted
可以操作dom（節(jié)點）
作用：
- 操作dom
- ajax請求
更新
1. beforeUpdate
2. updated
卸載
1. beforeDestroy
2. destroyed
作用：
- 移除事件監(jiān)聽
- 移除停止定時器
2，小程序的生命周期
加載
onLoad
作用：
能夠獲取頁面的參數(shù)開啟ajax，定時器，事件監(jiān)聽像vue的created
顯示
onShow
作用：
播放媒體
準(zhǔn)備
onReady
作用：
獲取節(jié)點信息像vue的mounted
后臺運行
onHide
作用：
停止播放媒體
卸載
onUnload
作用：
停止事件監(jiān)聽與定時器
3，小程序的全局方法
下拉刷新
onPullDownRefresh
觸底更新
onReachBottom()
右上角分享
onShareAppMessage
頁面滾動
onPageScroll
分享到朋友圈
onShareTimeline
4，app的全局方法
4.1，手機的返回鍵被點擊
onBackPress
4.2，導(dǎo)航欄按鈕被點擊
onNavigationBarButtonTap
七，路由
1，路由組件
導(dǎo)航 navigator
url 跳轉(zhuǎn)頁面的地址
打開類型 open-type
navigate跳轉(zhuǎn)redirect重定向（當(dāng)前頁面不留歷史記錄）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，路由配置 + （底部選項欄配置）
語法解釋
"borderStyle": “邊框顏色”,
"selectedColor": “字體選中后的顏色”,
"backgroundColor":“底部欄背景顏色”,
“color”: “默認字體顏色”,
"list": [{ 選項列表
"pagePath": "頁面路徑",
"iconPath": “未選擇時的圖片（圖片路徑）”,
"selectedIconPath": “選擇時的圖片（圖片路徑）”,
"text": “底部選項文字”
},
// 配置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": "首頁"},{"pagePath": "pages/cate/cate","iconPath": "static/img/type.png","selectedIconPath": "static/img/type-hl.png","text": "分類"},{"pagePath": "pages/member/member","iconPath": "static/img/ceo.png","selectedIconPath": "static/img/ceo-hl.png","text": "會員"},{"pagePath": "pages/Cart/Cart","iconPath": "static/img/cart.png","selectedIconPath": "static/img/cart-hl.png","text": "購物車"},{"pagePath": "pages/mine/mine","iconPath": "static/img/mine.png","selectedIconPath": "static/img/mine-hl.png","text": "我的"}]},注意：
底部選項**最多設(shè)置5個，最少2個**
5，獲取當(dāng)前頁面 getApp
01 在App.vue
定義globalData:{num:100}
02 要使用的頁面獲取app
var app = getApp()
03獲取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}6，獲取頁面棧 getCurrentPages
var page = getCurrentPages();
uni.navigateBack({delta:page.length})獲取當(dāng)前的頁面棧，是一個數(shù)組（1-5）
page[page.length-1] 獲取當(dāng)前頁面的信息（不要去修改）
八，條件編譯
目的:
不同的平臺展示不同特性與功能條件編譯是用特殊的注釋作為標(biāo)記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
介紹：
寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結(jié)尾。
#ifdef：if defined僅在某平臺存在#ifndef：if not defined除了某平臺均存在%PLATFORM%：平臺名稱
1， 模板條件編譯
格式
<!-- #ifdef H5 -->**內(nèi)容**<!-- #endif -->條件
APP —— App端H5 —— 網(wǎng)頁MP —— 小程序MP-WEIXIN —— 微信小程序
2，css條件編譯
/* #ifdef APP */.active{color:red}
/* #endif */3，js條件編譯
// #ifdef APP-PLUSuni.showModal({title:"你好App用戶"})
// #endif4，條件配置
pages.json“style”:{"h5":{"titleNView":{"titleText":"我是H5"}},"app-plus": {"titleNView":false //隱藏導(dǎo)航欄}}// #ifdef MP-WEIXIN || APP
{"path":"pages/condition/we","style":{"navigationBarTitleText": "小程序?qū)Ｓ许撁?}
},
// #endif
