uni-app學習

1. 學習uni-app

1.1. 概述

1. 號稱一次編寫多端運行的前端框架，架構圖如下

2. 對某些不同平台的特殊功能，可以通過條件進行自動編譯，也就是寫兩套代碼，不同的環境會選擇不同代碼編譯

1.2. 推薦工具

1. 其本身推薦的開發工具是HBuilderX，官方IDE下載地址

1.3. 開始趟坑

1.3.1. 新建頁面

1. 由於一開始我建錯目錄，刪掉重新建過，不斷報這個錯

文件查找失敗：'./pages/info/info/info.vue' at main.js:3

2. 原因就是用HBuilderX新建目錄的時候會在pages.json中添加路徑，它讀路徑的順序也是從上到下，然后一直讀的是錯的那個😓
3. 解決辦法就是去掉原來錯誤的路徑

uni-app官方地址

1.4. 系統學習

1.4.1. input綁定數據

1. 這個看起來比原來的vue麻煩些，通過下面這種方式綁定，輸入input內容，text跟着改變

<view class="content">
	<input type="text" :value="title"  @input="change"/>
	<text>{{title}}</text>
</view>

methods: {
	change(e){
		this.title = e.detail.value;
	}
}

1.4.2. 知識點

<block> 橫向排列
unshift 數組頭部添加元素

1.4.2.1. 樣式

/* #ifdef H5 */
height: auto;
/* #endif */

1.4.2.2. Flex布局（css樣式）

1. flex container：flex容器
2. flex item：flex項目（元素）
3. flex direction：布局方向
   1. row 橫向順序
   2. row-reverse 橫向逆序
   3. column 豎向順序
   4. colum-reverse 豎向逆序
4. 元素排序方向：主軸，垂直方向是交叉軸
5. flex-wrap：使容器內的元素換行，默認不換行
6. justify-content：設置元素再主軸上的對齊方式
   1. flex-start 左對齊
   2. flex-end 右對齊
   3. center 居中對齊
   4. space-between 元素間間距相同
   5. space-around 兩邊留有空白，兩邊空白距離和元素間空白距離1：2的關系
7. align-items：設置元素在交叉軸上的對齊方式
   1. flex-start 起點對齊
   2. flex-end 末點對齊
   3. center 居中對齊
   4. baseline 保證元素中文字基准線同一條
   5. stretch 拉伸（默認）
8. align-content：設置軸線的對齊方式（軸線當做元素）
   1. flex-start 起點對齊
   2. flex-end 末點對齊
   3. space-between
   4. space-around
   5. stretch

1.4.2.3. Flex元素屬性（css樣式）

1. order：用於設置flex容器內部的每個元素的排列順序，默認0
2. flex-grow：控制元素放大比例，默認0，不變，把剩余空間按比例給相應的組件
3. flex-shrink：控制元素縮小比例，默認為1，設置為0表示不進行縮放
4. flex-basis：設置元素固定或自動空間的占比，不需要吃掉剩余空間
5. align-self：重寫align-items父屬性，在子元素寫這個，特立獨行的意思

1.5. 網絡請求

1. uni.request類似於ajax
2. onLoad 只加載一次 onShow每次顯示頁面都加載

1.6. 樣式

1. white-space: nowrap; 不換行
2. flex-wrap: wrap;換行
3. justify-content: space-between;元素間留間隙

1.7. 頁面跳轉

1. uni.navigateTo 可返回的跳轉

1.8. 注意點

1. e.currentTarget.dataset.gindex; 這里傳參原本是gIndex，取值需要轉小寫來取

1.9. 圖片下載

1. 微信小程序的圖片下載需要配置服務器域名，否則不能下載，配置在小程序管理里找，同事需要配置域名的有request,socket,uploadFile,downloadFile

1.10. 知識點

1. 0faeff 藍色頭背景，比較好看

1.11. 常用生命周期

1. onLoad
2. onShow
3. onReady
4. onHide
5. onUnload
6. onPullDownRefresh
7. onShareAppMesage
8. onTabItemTap

1.12. class支持語法

1. :class="{active:isActive}"，后一個是data中定義的boolean值，表示是否使用active這個class
2. [activeIndex==0?'isActive':''] 三元運算

未完待續