快應(yīng)用 頁面樣式與布局

熟悉基礎(chǔ)知識，掌握Flex布局，了解動態(tài)修改樣式、引入less預(yù)編譯的方法

通過本節(jié)，你將學會：

• 盒模型
• 長度單位
• 設(shè)置定位
• 設(shè)置樣式
• 通用樣式
• Flex布局示例
• 動態(tài)修改樣式
• 引入 less/scss 預(yù)編譯
• 使用 postcss 解析 css
  

教程文檔對應(yīng)的項目代碼文件：src/StyleLayout目錄

盒模型

框架使用border-box模型，暫不支持content-box模型與box-sizing屬性

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

長度單位

框架目前僅支持長度單位px和%。與傳統(tǒng)web頁面不同，px是相對于項目配置基準寬度的單位，已經(jīng)適配了移動端屏幕，其原理類似于rem

開發(fā)者只需按照設(shè)計稿確定框架樣式中的px值即可。設(shè)計稿1px與框架樣式1px轉(zhuǎn)換公式如下：

設(shè)計稿1px / 設(shè)計稿基準寬度 = 框架樣式1px / 項目配置基準寬度

項目配置基準寬度：項目的配置文件（<ProjectName>/src/manifest.json）中config.designWidth的值，默認為750

示例如下：

若設(shè)計稿寬度為640px，元素A在設(shè)計稿上的寬度為100px，實現(xiàn)的兩種方案如下：

方案一：

修改項目配置基準寬度：將項目配置基準寬度設(shè)置為設(shè)計稿基準寬度，則框架樣式1px等于設(shè)計稿1px

• 設(shè)置項目配置基準寬度，在項目的配置文件（<ProjectName>/src/manifest.json）中，修改config.designWidth：

{
  "config": {
    "designWidth": 640
  }
}

• 設(shè)置元素A對應(yīng)的框架樣式：

width: 100px;

方案二：

不修改項目配置基準寬度：若當前項目配置的項目配置基準寬度為750，設(shè)元素A的框架樣式xpx，由轉(zhuǎn)換公式得：100 / 640 = x / 750

• 設(shè)置元素A對應(yīng)的框架樣式：

width: 117px;

設(shè)置定位

1060 開始，position 將支持三種屬性值：relative、absolute 和 fixed，并且默認值為 relative，入門可以參考 CSS 文檔

設(shè)置樣式

開發(fā)者可以使用內(nèi)聯(lián)樣式、tag選擇器、class選擇器、id選擇器來為組件設(shè)置樣式

同時也可以使用并列選擇、后代選擇器設(shè)置樣式

示例如下：

<template>
  <div class="tutorial-page">
    <!-- 內(nèi)聯(lián)樣式 -->
    <text style="color: #FF0000;">內(nèi)聯(lián)樣式</text>

    <text id="title">ID選擇器</text>
    <text class="title">class選擇器</text>
    <text>tag選擇器</text>
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
  }
  /* tag選擇器 */
  text {
    color: #0000FF;
  }
  /* class選擇器（推薦） */
  .title {
    color: #00FF00;
  }
  /* ID選擇器 */
  #title {
    color: #00A000;
  }
  /* 并列選擇 */
  .title, #title {
    font-weight: bold;
  }
  /* 后代選擇器 */
  .tutorial-page text {
    font-size: 42px;
  }
  /* 直接后代選擇器 */
  .tutorial-page > text {
    text-decoration: underline;
  }
</style>

<script>
  export default {
    onInit () {
      this.$page.setTitleBar({ text: '設(shè)置樣式' })
    }
  }
</script>

通用樣式

Flex布局示例

框架本身的布局使用Flex布局模型，關(guān)于具體Flex布局教程可以參考外部文檔：Flex 布局教程

div組件為最常用的Flex容器組件，具有Flex布局的特性；text、a、span、label組件為文本容器組件，其它組件不能直接放置文本內(nèi)容

示例如下：

<template>
  <div class="tutorial-page">
    <div class="item">
      <text>item1</text>
    </div>
    <div class="item">
      <text>item2</text>
    </div>
  </div>
</template>

<style>
  .tutorial-page {
    /* 交叉軸居中 */
    align-items: center;
    /* 縱向排列 */
    flex-direction: column;
  }
  .tutorial-page > .item {
    /* 有剩余空間時，允許被拉伸 */
    /*flex-grow: 1;*/
    /* 空間不夠用時，不允許被壓縮 */
    flex-shrink: 0;
    /* 主軸居中 */
    justify-content: center;
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: #FF0000;
  }
</style>

<script>
  export default {
    onInit () {
      this.$page.setTitleBar({ text: 'Flex布局示例' })
    }
  }
</script>

動態(tài)修改樣式

動態(tài)修改樣式有多種方式，與傳統(tǒng)前端開發(fā)習慣一致，包括但不限于以下：

• 修改class：更新組件的class屬性中使用的變量的值
• 修改內(nèi)聯(lián)style：更新組件的style屬性中的某個CSS的值
• 修改綁定的對象：通過綁定的對象控制元素的樣式
  
• 修改綁定的樣式字符串：通過樣式字符串控制元素的樣式
  

<template>
  <div style="flex-direction: column;">
    <!-- 修改 class -->
    <text class="normal-text {{ className }}" onclick="changeClassName">點擊我修改文字顏色</text>
    <!-- 修改內(nèi)聯(lián) style -->
    <text style="color: {{ textColor }}" onclick="changeInlineStyle">點擊我修改文字顏色</text>
    <!-- 修改綁定的對象 (1030+) -->
    <text style="{{ styleObj }}" onclick="changeStyleObj">點擊我修改文字顏色</text>
    <!-- 修改綁定的樣式字符串 (1030+) -->
    <text style="{{ styleText }}" onclick="changeStyleText">點擊我修改文字顏色</text>
  </div>
</template>
<style>
  .normal-text {
    font-weight: bold;
  }
  .text-blue {
    color: #0faeff;
  }
  .text-red {
    color: #f76160;
  }
</style>
<script>
  export default {
    private: {
      className: 'text-blue',
      textColor: '#0faeff',
      styleObj: {
        color: 'red'
      },
      styleText: 'color: blue'
    },
    onInit () {
      this.$page.setTitleBar({ text: '動態(tài)修改樣式' })
    },
    changeClassName () {
      this.className = 'text-red'
    },
    changeInlineStyle () {
      this.textColor = '#f76160'
    },
    changeStyleObj () {
      this.styleObj = {
        color: 'yellow'
      }
    },
    changeStyleText () {
      this.styleText = 'color: green'
    }
  }
</script>

引入less/scss預(yù)編譯

less 篇

less 語法入門請參考less 文檔學習

使用 less 請先安裝相應(yīng)的類庫：less、less-loader，

npm i less less-loader

詳見文檔style 樣式 --> 樣式預(yù)編譯；然后在<style>標簽上添加屬性lang="less"

<template>
  <div class="tutorial-page">
    <text id="title">less示例!</text>
  </div>
</template>
<style lang="less">
  /* 引入外部less文件 */
  @import './style.less';
  /* 使用less */
</style>

scss 篇

scss 語法入門請參考scss 中文官網(wǎng)學習

使用 scss 請在快應(yīng)用項目下執(zhí)行以下命令安裝相應(yīng)的類庫：node-sass、sass-loader，

npm i node-sass sass-loader

詳見文檔style 樣式 --> 樣式預(yù)編譯；然后在<style>標簽上添加屬性lang="scss" 示例如下：

<template>
  <div class="tutorial-page">
    <text id="title">less示例!</text>
  </div>
</template>

<style lang="scss">
  /* 引入外部scss文件 */
  @import './style.scss';
  /* 使用scss */
</style>

使用 postcss 解析 css

module.exports = {
  plugins: [require('precss')]
}

<style lang="postcss">

  /* 使用postcss */
  .tutorial-page {
    justify-content: center;
    background-color: #00beaf;
    #title {
      color: #FF0000;
    }
  }
</style>

總結(jié)

了解頁面的樣式與布局后，開發(fā)者就可以著手設(shè)計開發(fā)頁面了