單頁面程序

uni-app 約定頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范诵原，采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)

<template>
    <view class="container">
        {{message}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World',
            }
        }
    }
</script>
<style>
  .container{
    background-color: #FFF;
  }
</style>

模版語法

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)赃阀。所有 Vue.js 的模板都是合法的 HTML以舒，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析趾痘。

在底層的實(shí)現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)蔓钟。結(jié)合響應(yīng)系統(tǒng)永票，Vue 能夠智能地計(jì)算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少奋刽。

模板語法瓦侮，包含插值、指令

插值

文本佣谐，使用雙大括號(hào)：<span>Message: {{ msg }}</span>

原始HTML肚吏，使用v-html指令：<p>Using v-html directive: <span v-html="rawHtml"></span></p>

使用 JavaScript 表達(dá)式，支持JavaScript 表達(dá)式：{{ number + 1 }}

指令

v-on與v-bind是常用的指令狭魂，用于綁定屬性設(shè)置事件

Attribute罚攀，使用v-bind 指令（縮寫可以直接省略v-bind）：<button v-bind:disabled="isButtonDisabled">Button</button>

事件党觅，使用 v-on 指令（縮寫@）：<a @click="doSomething">...</a>

條件與循環(huán)，v-if v-else-if v-else v-for

計(jì)算屬性與偵聽器

計(jì)算屬性

計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的

computed: {
  msg: function () {
    return this.message
  }
}

偵聽屬性

當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)斋泄，用 watch

watch: {
    // 如果 `question` 發(fā)生改變杯瞻，這個(gè)函數(shù)就會(huì)運(yùn)行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }

class與style綁定

通過動(dòng)態(tài)綁定 style、class 屬性來控制組件的樣式炫掐。

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中魁莉。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析募胃，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中旗唁，以免影響渲染速度。

  <view :style="{color:color, fontSize: fontSize + 'px'}" />
  

• 動(dòng)態(tài)綁定 class

  <view class="normal_view" />
  

  對(duì)象語法：

  <view :class="{ active: isActive }"></view>
  

  上面的語法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù) isActive

  數(shù)組語法：

  <view v-bind:class="[activeClass, errorClass]"></view>
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
  

關(guān)于選擇器注意：

• 在 uni-app 中不能使用 * 選擇器痹束。

• 目前vue支持的選擇器有： .class #id element ::after `::before

• nvue頁面检疫、微信小程序自定義組件中僅支持 class 選擇器

生命周期

應(yīng)用生命周期

uni-app 支持如下應(yīng)用生命周期函數(shù)：

注意

• 應(yīng)用生命周期僅可在App.vue中監(jiān)聽屎媳，在其它頁面監(jiān)聽無效。

  示例代碼

  <script>
      // 只能在App.vue里監(jiān)聽?wèi)?yīng)用的生命周期
      export default {
          onLaunch: function() {
              console.log('App Launch')
          },
          onShow: function() {
              console.log('App Show')
          },
          onHide: function() {
              console.log('App Hide')
          }
      }
  </script>
  

頁面生命周期

uni-app 支持如下頁面生命周期函數(shù)：

頁面樣式與布局

uni-app的css與web的css基本一致。

uni-app有vue頁面和nvue頁面玖姑。vue頁面是webview渲染的愕秫、app端的nvue頁面是原生渲染的

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx

• px 即屏幕像素
• rpx 即響應(yīng)式px焰络，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位戴甩。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度闪彼。屏幕變寬甜孤，rpx 實(shí)際顯示效果會(huì)等比放大，但在 App 端和 H5 端屏幕寬度達(dá)到 960px 時(shí)畏腕，默認(rèn)將按照 375px 的屏幕寬度進(jìn)行計(jì)算
• uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置缴川。用于解決寬屏適配問題。

nvue還不支持百分比單位

vue頁面支持下面這些普通H5單位描馅，但在nvue里不支持：

• rem 根字體大小可以通過 page-meta 配置
• vh viewpoint height把夸，視窗高度，1vh等于視窗高度的1%
• vw viewpoint width流昏，視窗寬度扎即，1vw等于視窗寬度的1%

App端吞获，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px谚鄙。注意此時(shí)不支持 rpx

nvue中各拷，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx闷营，表現(xiàn)與 vue 中一致烤黍。weex 模式目前遵循weex的單位，它的單位比較特殊：

• px:傻盟，以750寬的屏幕為基準(zhǔn)動(dòng)態(tài)計(jì)算的長度單位速蕊，與 vue 頁面中的 rpx 理念相同。（一定要注意 weex 模式的 px娘赴，和 vue 里的 px 邏輯不一樣规哲。）
• wx：與設(shè)備屏幕寬度無關(guān)的長度單位，與 vue 頁面中的 px 理念相同

下面對(duì) rpx 詳細(xì)說明：

設(shè)計(jì)師在只提供一個(gè)分辨率的圖诽表，嚴(yán)格按設(shè)計(jì)圖標(biāo)注的 px 做開發(fā)唉锌，在不同寬度的手機(jī)上界面的寬度很容易變形。

rpx 動(dòng)態(tài)寬度單位竿奏，就是為了解決這個(gè)問題袄简。uni-app 在 App 端、H5 端都支持了 rpx

在Pages.json的globalStyle中可以配置不同屏幕寬度的計(jì)算方式泛啸，具體參考：

rpx 是相對(duì)于基準(zhǔn)寬度的單位矾兜，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx患久，頁面元素寬度在 uni-app 中的寬度計(jì)算公式：

寬度rpx = 750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度

比如： 若設(shè)計(jì)稿寬度為 750px椅寺，元素 A 在設(shè)計(jì)稿上的寬度為 100px浑槽，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx返帕。

Tips

• 注意 rpx 是和寬度相關(guān)的單位桐玻，屏幕越寬，該值實(shí)際像素越大荆萤。如不想根據(jù)屏幕寬度縮放镊靴，則應(yīng)該使用 px 單位。
• 如果開發(fā)者在字體或高度中也使用了 rpx 链韭，那么需注意這樣的寫法意味著隨著屏幕變寬偏竟，字體會(huì)變大、高度會(huì)變大敞峭。如果你需要固定高度踊谋，則應(yīng)該使用 px 。
• rpx不支持動(dòng)態(tài)橫豎屏切換計(jì)算旋讹，使用rpx建議鎖定屏幕方向
• 設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)殖蚕。
• 如果設(shè)計(jì)稿不是750px，HBuilderX提供了自動(dòng)換算的工具骗村，詳見：https://ask.dcloud.net.cn/article/35445嫌褪。
• App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位胚股，只支持 px笼痛，不支持 rpx。
• 早期 uni-app 提供了 upx 琅拌，目前已經(jīng)推薦統(tǒng)一改為 rpx 了缨伊，詳見

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑进宝，用;表示語句結(jié)束刻坊。

示例代碼：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

全局樣式與局部樣式

定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁面党晋。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式谭胚，只作用在對(duì)應(yīng)的頁面，并會(huì)覆蓋 App.vue 中相同的選擇器未玻。

注意：

• App.vue 中通過 @import 語句可以導(dǎo)入外聯(lián)樣式灾而，一樣作用于每一個(gè)頁面。
• nvue頁面暫不支持全局樣式

CSS變量

uni-app 提供內(nèi)置 CSS 變量

注意：

• var(--status-bar-height) 此變量在微信小程序環(huán)境為固定 25px旁趟，在 App 里為手機(jī)實(shí)際狀態(tài)欄高度。
• 當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后庇绽，由于窗體為沉浸式锡搜，占據(jù)了狀態(tài)欄位置橙困。此時(shí)可以使用一個(gè)高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄耕餐。
• 由于在H5端凡傅，不存在原生導(dǎo)航欄和tabbar，也是前端div模擬蛾方。如果設(shè)置了一個(gè)固定位置的居底view像捶，在小程序和App端是在tabbar上方，但在H5端會(huì)與tabbar重疊桩砰。此時(shí)可使用--window-bottom拓春，不管在哪個(gè)端，都是固定在tabbar上方亚隅。
• 目前 nvue 在App端硼莽，還不支持 --status-bar-height變量，替代方案是在頁面onLoad時(shí)通過uni.getSystemInfoSync().statusBarHeight獲取狀態(tài)欄高度煮纵，然后通過style綁定方式給占位view設(shè)定高度懂鸵。下方提供了示例代碼

代碼塊

快速書寫css變量的方法是：在css中敲hei，在候選助手中即可看到3個(gè)css變量行疏。（HBuilderX 1.9.6以上支持）

示例1 - 普通頁面使用css變量：

<template>
    <!-- HBuilderX 2.6.3+ 新增 page-meta, 詳情：https://uniapp.dcloud.io/component/page-meta -->
    <page-meta>
        <navigation-bar />
    </page-meta>
    <view>
        <view class="status_bar">
            <!-- 這里是狀態(tài)欄 -->
        </view>
        <view> 狀態(tài)欄下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>
<template>
    <view>
        <view class="toTop">
            <!-- 這里可以放一個(gè)向上箭頭匆光，它距離底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style>
    .toTop {
        bottom: calc(var(--window-bottom) + 10px)
    }
</style>

示例2 - nvue頁面獲取狀態(tài)欄高度

<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
</script>

固定值

uni-app 中以下組件的高度是固定的，不可修改：

各小程序平臺(tái)酿联，包括同小程序平臺(tái)的iOS和Android的高度也不一樣终息。

Flex布局

為支持跨平臺(tái)，框架建議使用Flex布局贞让，關(guān)于Flex布局可以參考外部文檔阮一峰的flex教程等周崭。

背景圖片

uni-app 支持使用在 css 里設(shè)置背景圖片，使用方式與普通 web 項(xiàng)目大體相同喳张，但需要注意以下幾點(diǎn)：

• 支持 base64 格式圖片续镇。

• 支持網(wǎng)絡(luò)路徑圖片。

• 小程序不支持在css中使用本地文件销部，包括本地的背景圖和字體文件摸航。需以base64方式方可使用。App端在v3模式以前舅桩，也有相同限制忙厌。v3編譯模式起支持直接使用本地背景圖和字體。

• 使用本地路徑背景圖片需注意：

  1. 為方便開發(fā)者江咳，在背景圖片小于 40kb 時(shí)，uni-app 編譯到不支持本地背景圖的平臺(tái)時(shí)哥放，會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式歼指；

  2. 圖片大于等于 40kb爹土，會(huì)有性能問題，不建議使用太大的背景圖踩身，如開發(fā)者必須使用胀茵，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上挟阻，從網(wǎng)絡(luò)地址引用琼娘。

  3. 本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對(duì)路徑。

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

注意

• 微信小程序不支持相對(duì)路徑（真機(jī)不支持附鸽，開發(fā)工具支持）

字體圖標(biāo)

uni-app 支持使用字體圖標(biāo)脱拼，使用方式與普通 web 項(xiàng)目相同，需要注意以下幾點(diǎn)：

• 支持 base64 格式字體圖標(biāo)坷备。

• 支持網(wǎng)絡(luò)路徑字體圖標(biāo)熄浓。

• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件省撑。需以base64方式方可使用赌蔑。App端在v3模式以前，也有相同限制竟秫。v3編譯模式起支持直接使用本地背景圖和字體娃惯。

• 網(wǎng)絡(luò)路徑必須加協(xié)議頭 https。

• 從 http://www.iconfont.cn 上拷貝的代碼肥败，默認(rèn)是沒加協(xié)議頭的趾浅。

• 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont拙吉，安裝字體文件時(shí)可以看到）潮孽，在nvue內(nèi)使用時(shí)需要注意，此字體名重復(fù)可能會(huì)顯示不正常筷黔，可以使用工具修改往史。

• 使用本地路徑圖標(biāo)字體需注意：

  1. 為方便開發(fā)者，在字體文件小于 40kb 時(shí)佛舱，uni-app 會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式椎例；

  2. 字體文件大于等于 40kb，仍轉(zhuǎn)換為 base64 方式使用的話可能有性能問題请祖，如開發(fā)者必須使用订歪，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上肆捕，從網(wǎng)絡(luò)地址引用刷晋；

  3. 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對(duì)路徑。

      @font-face {
          font-family: test1-icon;
          src: url('~@/static/iconfont.ttf');
      }
     

nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內(nèi)引入眼虱。nvue內(nèi)不支持本地路徑引入字體喻奥，請(qǐng)使用網(wǎng)絡(luò)鏈接或者base64形式。src字段的url的括號(hào)內(nèi)一定要使用單引號(hào)捏悬。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

示例：

<template>
    <view>
        <view>
            <text class="test">&#xe600;</text>
            <text class="test">&#xe687;</text>
            <text class="test">&#xe60b;</text>
        </view>
    </view>
</template>
<style>
    @font-face {
        font-family: 'iconfont';
        src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
    }
    .test {
        font-family: iconfont;
        margin-left: 20rpx;
    }
</style>

nvue頁面的樣式注意事項(xiàng)

1. nvue 頁面控制顯隱只可以使用v-if不可以使用v-show
2. nvue 頁面只能使用flex布局撞蚕，不支持其他布局方式。頁面開發(fā)前过牙，首先想清楚這個(gè)頁面的縱向內(nèi)容有什么甥厦，哪些是要滾動(dòng)的，然后每個(gè)縱向內(nèi)容的橫軸排布有什么寇钉，按 flex 布局設(shè)計(jì)好界面刀疙。
3. nvue 頁面的布局排列方向默認(rèn)為豎排（column），如需改變布局方向摧莽，可以在 manifest.json -> app-plus -> nvue -> flex-direction 節(jié)點(diǎn)下修改庙洼，僅在 uni-app 模式下生效。詳情镊辕。
4. nvue頁面編譯為H5油够、小程序時(shí)，會(huì)做一件css默認(rèn)值對(duì)齊的工作征懈。因?yàn)閣eex渲染引擎只支持flex石咬，并且默認(rèn)flex方向是垂直。而H5和小程序端卖哎，使用web渲染鬼悠，默認(rèn)不是flex，并且設(shè)置display:flex后亏娜，它的flex方向默認(rèn)是水平而不是垂直的焕窝。所以nvue編譯為H5、小程序時(shí)维贺，會(huì)自動(dòng)把頁面默認(rèn)布局設(shè)為flex它掂、方向?yàn)榇怪薄．?dāng)然開發(fā)者手動(dòng)設(shè)置后會(huì)覆蓋默認(rèn)設(shè)置溯泣。
5. 文字內(nèi)容虐秋，必須、只能在<text>組件下垃沦。不能在<div>客给、<view>的text區(qū)域里直接寫文字。否則即使渲染了肢簿，也無法綁定js里的變量靶剑。
6. 只有text標(biāo)簽可以設(shè)置字體大小蜻拨，字體顏色。
7. 布局不能使用百分比抬虽、沒有媒體查詢官觅。
8. nvue 切換橫豎屏?xí)r可能導(dǎo)致樣式出現(xiàn)問題，建議有 nvue 的頁面鎖定手機(jī)方向阐污。
9. 支持的css有限，不過并不影響布局出你需要的界面咱圆，flex還是非常強(qiáng)大的笛辟。詳見
10. 不支持背景圖。但可以使用image組件和層級(jí)來實(shí)現(xiàn)類似web中的背景效果序苏。因?yàn)樵_發(fā)本身也沒有web這種背景圖概念
11. css選擇器支持的比較少手幢，只能使用 class 選擇器。詳見
12. nvue 的各組件在安卓端默認(rèn)是透明的忱详，如果不設(shè)置background-color围来，可能會(huì)導(dǎo)致出現(xiàn)重影的問題。
13. class 進(jìn)行綁定時(shí)只支持?jǐn)?shù)組語法匈睁。
14. Android端在一個(gè)頁面內(nèi)使用大量圓角邊框會(huì)造成性能問題监透，尤其是多個(gè)角的樣式還不一樣的話更耗費(fèi)性能。應(yīng)避免這類使用航唆。
15. nvue頁面沒有bounce回彈效果胀蛮，只有幾個(gè)列表組件有bounce效果，包括 list糯钙、recycle-list粪狼、waterfall。
16. 原生開發(fā)沒有頁面滾動(dòng)的概念任岸，頁面內(nèi)容高過屏幕高度并不會(huì)自動(dòng)滾動(dòng)再榄，只有部分組件可滾動(dòng)（list、waterfall享潜、scroll-view/scroller）困鸥，要滾得內(nèi)容需要套在可滾動(dòng)組件下。這不符合前端開發(fā)的習(xí)慣米碰，所以在 nvue 編譯為 uni-app模式時(shí)窝革，給頁面外層自動(dòng)套了一個(gè) scroller，頁面內(nèi)容過高會(huì)自動(dòng)滾動(dòng)吕座。（組件不會(huì)套虐译，頁面有recycle-list時(shí)也不會(huì)套）。后續(xù)會(huì)提供配置吴趴，可以設(shè)置不自動(dòng)套漆诽。
17. 在 App.vue 中定義的全局js變量不會(huì)在 nvue 頁面生效。globalData和vuex是生效的。
18. App.vue 中定義的全局css厢拭，對(duì)nvue和vue頁面同時(shí)生效兰英。如果全局css中有些css在nvue下不支持，編譯時(shí)控制臺(tái)會(huì)報(bào)警供鸠，建議把這些不支持的css包裹在條件編譯里畦贸，APP-PLUS-NVUE
19. 不能在 style 中引入字體文件，nvue 中字體圖標(biāo)的使用參考：加載自定義字體楞捂。如果是本地字體薄坏，可以用plus.io的API轉(zhuǎn)換路徑。
20. 目前不支持在 nvue 頁面使用 typescript/ts寨闹。
21. nvue 頁面關(guān)閉原生導(dǎo)航欄時(shí)胶坠，想要模擬狀態(tài)欄，可以參考文章繁堡。但是沈善，仍然強(qiáng)烈建議在nvue頁面使用原生導(dǎo)航欄。nvue的渲染速度再快椭蹄，也沒有原生導(dǎo)航欄快闻牡。原生排版引擎解析json繪制原生導(dǎo)航欄耗時(shí)很少，而解析nvue的js繪制整個(gè)頁面的耗時(shí)要大的多塑娇，尤其在新頁面進(jìn)入動(dòng)畫期間澈侠，對(duì)于復(fù)雜頁面，沒有原生導(dǎo)航欄會(huì)在動(dòng)畫期間產(chǎn)生整個(gè)屏幕的白屏或閃屏埋酬。