一：新建uni-app
二：執行可通過h5頁面，微信小程式，自己的手機。
三：工程目錄

pages:存放每個頁面元件
static:存放靜態資源
unpackage:打包後存在這裡
App.vue:根檔案
main.js:主入口檔案
manifest.json:一些app配置
pages.json:存放頁面路徑（樣式）和全域性路徑（樣式）
uni.scss:內建樣式

四：官網瞭解樣式
五：配置tabbar（樣式參考文件）
如果應用是一個多tab應用，可以通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁。（list至少有兩項）

六：condition啟動模式配置
啟動模式配置，僅開發期間生效，用於模擬直達頁面的場景，如：小程式轉發後，使用者點選所開啟的頁面。

七：元件：uni-app提供了豐富的基礎元件給開發者，開發者可以像搭積木一樣，組合各種元件拼接成自己的應用。（元件豐富，官方文件瞭解）

text文字元件

view（=div）

button（屬性豐富，參考官方文件）

媒體元件image

八：uni-app中的樣式

引入css的方式：
1 直接元件頁面內

引入icon字型圖表：
1 static中引入資料夾fonts

2 App.vue 公共樣式中引入
@import url("./static/fonts/iconfont.css");

3 iconfont.css 檔案中修改路徑

原路徑加上：[email protected]

4 view中引用：iconfont必須要

引入scss檔案:
1 下載scss編譯外掛
2 標籤

九：資料繫結（跟Vue99%差不多）

十：生命週期

下拉重新整理：onPullDownRefresh（屬於生命週期函式）
在js中定義onPullDownRefresh處理函式（和onLoad等生命週期函式同級），監聽該頁面使用者下拉重新整理事件。

1 先在json給予下拉重新整理許可權

2 監聽下拉重新整理：（下拉重新整理觸發的動作）

3 uni.stopPullDownRefresh 停止重新整理

4 可通過按鈕來觸發下拉重新整理

觸底載入新內容：onReachBottom

可以在json中配置，距離底部多遠觸發觸底載入函式：

附

十一：網路請求（get）

十二：資料快取
1 設定點選事件觸發uni.setStorage ; uni.getStorage;uni.removeStorage 分別儲存；查詢；刪除資料。
2 瀏覽器在Application的 Local Storage裡面查詢；微信小程式在Storage裡面查詢。

十三：上傳圖片（參考官方文件）

1 通過點選事件觸發uni.chooseImage函式上傳圖片
2 this.imgArr = res.tempFilePaths 將圖片地址賦予給圖片陣列
3 v-for迴圈呈現圖片

預覽圖片

十四：條件編譯的跨端相容
html內容：

js內容跨端相容：

css內容跨端相容：

十五：uni中的導航跳轉
宣告式導航

程式設計式導航

導航傳參：
地址後面直接 （？id=80&page=1） 就可以。接受引數的網頁onload裡面接收引數。

附：open-type屬性：跳轉頁面的方式（宣告式跳轉）

十六：uni-app中元件的建立（與vue相同）
元件的生命週期函式與vue相同
1 beforeCreate
2 create
3 beforeMount
4 mount
5 beforeUpdate
6 update
7 beforeDestroy
8 destroy

十七：uni-app元件的通訊
父向子傳值：
1 父元件中子元件繫結資料

2 子元件通過props:[‘ ‘} 接收父元件的資料

子向父元件傳值：
1 子元件通過點選事件呼叫方法：

2 方法中 this.$emit(‘myEven’, this.num):觸發父元件的myEven並且傳遞資料
3 父元件接收資料：

兄弟元件之間的傳值
a ----> b
1 a元件通過uni.$emit全域性觸發事件並且傳遞引數

2 b元件通過uni.$on全域性監聽並且接收引數（在created（）方法裡面進行）

十八：uni ui 擴充套件元件

1 下載
2 import 引入
3 註冊
4 呼叫方式（複製程式碼黏貼就可以）