uni-app官網(wǎng)

一种蝶、快速上手

1傀顾、通過(guò)hbuilderX可視化界面

1.1、 hbuilderX下載
1.2贱鄙、下載完成之后創(chuàng)建、運(yùn)行uni-app

• 點(diǎn)擊工具欄的文件》新建》項(xiàng)目

  
  
  image.png

• 選擇uni-app類型姨谷，輸入工程名逗宁，選擇模板，點(diǎn)擊創(chuàng)建梦湘，即可創(chuàng)建成功
  

  image.png

• 在微信開(kāi)發(fā)者工具里面運(yùn)行瞎颗。進(jìn)行所創(chuàng)建的項(xiàng)目件甥，點(diǎn)擊工具欄運(yùn)行》運(yùn)行到小程序模擬器》微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app
  

  image.png
  
  首次使用需要配置小程序ide的相關(guān)路徑哼拔，才可運(yùn)行成功引有。
  uni-app默認(rèn)把項(xiàng)目編譯到根目錄的unpackage目錄。
  
  image.png

• 
  在微信開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目時(shí)發(fā)現(xiàn)報(bào)：請(qǐng)選擇含app.json / project.config.json的目錄
  

  image.png
  
  目錄顯示如下：
  image.png
  
  解決：選擇含app.js文件倦逐，如圖：
  
  image.png

2譬正、通過(guò)vue-cli命令行

• 環(huán)境安裝

 // 全局安裝vue-cli
npm install -g @vue/cli 

• 創(chuàng)建uni-app

// 使用正式版（對(duì)應(yīng)HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

// 使用alpha版（對(duì)應(yīng)HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

• 運(yùn)行、發(fā)布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM%可取值如下：

二、框架

1健民、目錄結(jié)構(gòu)

image.png

2抒巢、生命周期

• 應(yīng)用生命周期：

• 頁(yè)面生命周期

3、路由

4嗽元、運(yùn)行環(huán)境判斷

• 開(kāi)發(fā)環(huán)境和運(yùn)行環(huán)境可以通過(guò)process.env.NODE_ENV來(lái)判斷敛纲。一般用于連接測(cè)試服務(wù)器或生產(chǎn)服務(wù)器的動(dòng)態(tài)切換。

if(process.env.NODE_ENV === 'development'){
    console.log('開(kāi)發(fā)環(huán)境')
}else{
    console.log('生產(chǎn)環(huán)境')
}

• 判斷平臺(tái)
  -- 編譯期判斷

// 編譯期判斷 編譯期判斷剂癌，即條件編譯淤翔，不同平臺(tái)在編譯出包后已經(jīng)是不同的代碼
// #ifdef H5
    alert("只有h5平臺(tái)才有alert方法")
// #endif
// 如上代碼只會(huì)編譯到H5的發(fā)行包里，其他平臺(tái)的包不會(huì)包含如上代碼佩谷。

-- 運(yùn)行期編譯
運(yùn)行期判斷是指代碼已經(jīng)打入包中旁壮，仍然需要在運(yùn)行期判斷平臺(tái)，此時(shí)可使用uni.getSystemInfoSync().platform判斷客戶端環(huán)境是 Android谐檀、iOS 還是小程序開(kāi)發(fā)工具（在百度小程序開(kāi)發(fā)工具抡谐、微信小程序開(kāi)發(fā)工具、支付寶小程序開(kāi)發(fā)工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools）

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運(yùn)行Android上')
       break;
    case 'ios':
       console.log('運(yùn)行iOS上')
       break;
    default:
       console.log('運(yùn)行在開(kāi)發(fā)者工具上')
       break;
}

5稚补、頁(yè)面樣式與布局

• 尺寸單位（屏幕像素=px童叠，響應(yīng)式px=rpx）
  uni-app寬度計(jì)算公式為：750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度
• 樣式導(dǎo)入(@import "../../common/uni.css";)
• 內(nèi)聯(lián)樣式（支持使用 style框喳、class 屬性來(lái)控制組件的樣式）
• 支持的選擇器（.class #id element ::after ::before）
• 全局樣式和局部樣式
  定義在 App.vue 中的樣式為全局樣式课幕，作用于每一個(gè)頁(yè)面厦坛。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面乍惊，并會(huì)覆蓋 App.vue 中相同的選擇器杜秸。（nvue頁(yè)面暫不支持全局樣式）
• css變量

• 固定值

• flex布局
  • Flex 布局是什么莉撇？
    Flex 是 Flexible Box 的縮寫(xiě)呢蛤，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性棍郎。
  • 基本概念
    采用 Flex 布局的元素其障，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"涂佃。它的所有子元素自動(dòng)成為容器成員励翼，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"辜荠。
    
    image
    
    容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）汽抚。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end伯病；交叉軸的開(kāi)始位置叫做cross start造烁，結(jié)束位置叫做cross end。
    項(xiàng)目默認(rèn)沿主軸排列狱从。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size膨蛮，占據(jù)的交叉軸空間叫做cross size。
  • 容器的屬性
    flex-direction決定主軸的方向（即項(xiàng)目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
// row（默認(rèn)值）：主軸為水平方向季研，起點(diǎn)在左端敞葛。
// row-reverse：主軸為水平方向，起點(diǎn)在右端与涡。
// column：主軸為垂直方向惹谐，起點(diǎn)在上沿。
// column-reverse：主軸為垂直方向驼卖，起點(diǎn)在下沿氨肌。

flex-wrap默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
// nowrap（默認(rèn)）：不換行酌畜。
// wrap：換行怎囚，第一行在上方。
// wrap-reverse：換行，第一行在下方恳守。

flex-flow是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式考婴，默認(rèn)值為row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content定義了項(xiàng)目在主軸上的對(duì)齊方式催烘。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
// flex-start（默認(rèn)值）：左對(duì)齊
// flex-end：右對(duì)齊
// center： 居中
// space-between：兩端對(duì)齊沥阱，項(xiàng)目之間的間隔都相等。
// space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等伊群。所以考杉，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

align-items 定義項(xiàng)目在交叉軸上如何對(duì)齊舰始。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
// flex-start：交叉軸的起點(diǎn)對(duì)齊崇棠。
// flex-end：交叉軸的終點(diǎn)對(duì)齊。
// center：交叉軸的中點(diǎn)對(duì)齊丸卷。
// baseline: 項(xiàng)目的第一行文字的基線對(duì)齊易茬。
// stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度及老。

align-content定義了多根軸線的對(duì)齊方式抽莱。如果項(xiàng)目只有一根軸線，該屬性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
// flex-start：與交叉軸的起點(diǎn)對(duì)齊骄恶。
// flex-end：與交叉軸的終點(diǎn)對(duì)齊食铐。
// center：與交叉軸的中點(diǎn)對(duì)齊。
// space-between：與交叉軸兩端對(duì)齊僧鲁，軸線之間的間隔平均分布虐呻。
// space-around：每根軸線兩側(cè)的間隔都相等。所以寞秃，軸線之間的間隔比軸線與邊框的間隔大一倍斟叼。
// stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

• 項(xiàng)目的屬性
  order定義項(xiàng)目的排列順序春寿。數(shù)值越小朗涩，排列越靠前，默認(rèn)為0

.item {
  order: <integer>;
}

flex-grow定義項(xiàng)目的放大比例绑改，默認(rèn)為0谢床，即如果存在剩余空間，也不放大厘线。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink定義了項(xiàng)目的縮小比例识腿，默認(rèn)為1，即如果空間不足造壮，該項(xiàng)目將縮小渡讼。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis 定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性成箫，計(jì)算主軸是否有多余空間栖雾。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小伟众。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto召廷。后兩個(gè)屬性可選凳厢。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性竞慢。默認(rèn)值為auto先紫，表示繼承父元素的align-items屬性，如果沒(méi)有父元素筹煮，則等同于stretch遮精。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• 背景圖片
  • 支持在css里設(shè)置背景圖片
  • 本地背景圖片的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑

 .test2 {
     background-image: url('~@/static/logo.png');
 }

• 字體圖標(biāo)（字體圖標(biāo)，使用方式與普通 web 項(xiàng)目相同）

6败潦、小程序組件支持

• 使用方法

// 在pages.json 對(duì)應(yīng)頁(yè)面的 style -> usingComponents 引入組件：
{
    "pages": [
        {
            "path": "index/index",
            "style": {
                "usingComponents": {
                    // #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
                     "custom": "/wxcomponents/custom/index"
                    // #endif
                    // #ifdef MP-BAIDU
                     "custom": "/swancomponents/custom/index"
                    // #endif
                    // #ifdef MP-ALIPAY
                     "custom": "/mycomponents/custom/index"
                    // #endif
                }
            }
        }
    ]
}

// 在頁(yè)面中使用
<!-- 頁(yè)面模板 (index.vue) -->
<view>
    <!-- 在頁(yè)面中對(duì)自定義組件進(jìn)行引用 -->
    <custom name="uni-app"></custom>
</view>