頁面樣式與布局
uni-app的css與web的css基本一致。本文沒有講解css的用法。在你了解web的css的基礎之上，本文講述一些樣式相關的注意事項。
uni-app有vue頁面和nvue頁面。vue頁面是webview渲染的、app端的nvue頁面是原生渲染的。在nvue頁面里樣式比web會限制更多，
本文重點介紹vue頁面的樣式注意事項。
尺寸單位
uni-app 支持的通用 css 單位包括 px、rpx
- px 即屏幕像素
- rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基准，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大，但在 App 端和 H5 端屏幕寬度達到 960px 時，默認將按照 375px 的屏幕寬度進行計算，具體配置參考：rpx計算配置 。
vue頁面支持下面這些普通H5單位，但在nvue里不支持：
- rem 根字體大小可以通過 page-meta 配置
- vh viewpoint height，視窗高度，1vh等於視窗高度的1%
- vw viewpoint width，視窗寬度，1vw等於視窗寬度的1%
nvue還不支持百分比單位。
App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px。注意此時不支持 rpx
nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：
- px:，以750寬的屏幕為基准動態計算的長度單位，與 vue 頁面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
- wx：與設備屏幕寬度無關的長度單位，與 vue 頁面中的 px 理念相同
下面對 rpx 詳細說明：
設計師在提供設計圖時，一般只提供一個分辨率的圖。
嚴格按設計圖標注的 px 做開發，在不同寬度的手機上界面很容易變形。
而且主要是寬度變形。高度一般因為有滾動條，不容易出問題。由此，引發了較強的動態寬度單位需求。
微信小程序設計了 rpx 解決這個問題。uni-app 在 App 端、H5 端都支持了 rpx，並且可以配置不同屏幕寬度的計算方式，具體參考：rpx計算配置。
rpx 是相對於基准寬度的單位，可以根據屏幕寬度進行自適應。uni-app 規定屏幕基准寬度 750rpx。
開發者可以通過設計稿基准寬度計算頁面元素 rpx 值，設計稿 1px 與框架樣式 1rpx 轉換公式如下：
設計稿 1px / 設計稿基准寬度 = 框架樣式 1rpx / 750rpx
換言之，頁面元素寬度在 uni-app 中的寬度計算公式：
750 * 元素在設計稿中的寬度 / 設計稿基准寬度
舉例說明：
- 若設計稿寬度為 750px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在
uni-app里面的寬度應該設為：750 * 100 / 750，結果為：100rpx。 - 若設計稿寬度為 640px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在
uni-app里面的寬度應該設為：750 * 100 / 640，結果為：117rpx。 - 若設計稿寬度為 375px，元素 B 在設計稿上的寬度為 200px，那么元素 B 在
uni-app里面的寬度應該設為：750 * 200 / 375，結果為：400rpx。
Tips
- 注意 rpx 是和寬度相關的單位，屏幕越寬，該值實際像素越大。如不想根據屏幕寬度縮放，則應該使用 px 單位。
- 如果開發者在字體或高度中也使用了 rpx ，那么需注意這樣的寫法意味着隨着屏幕變寬，字體會變大、高度會變大。如果你需要固定高度，則應該使用 px 。
- rpx不支持動態橫豎屏切換計算，使用rpx建議鎖定屏幕方向
- 設計師可以用 iPhone6 作為視覺稿的標准。
- 如果設計稿不是750px，HBuilderX提供了自動換算的工具，詳見：https://ask.dcloud.net.cn/article/35445。
- App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px，不支持 rpx。
- 早期 uni-app 提供了 upx ，目前已經推薦統一改為 rpx 了，詳見
樣式導入
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
示例代碼：
<style> @import "../../common/uni.css"; .uni-card { box-shadow: none; } </style>
內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
- style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。
<view :style="{color:color}" />
- class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。
<view class="normal_view" />
選擇器
目前支持的選擇器有：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro | 選擇所有擁有 class="intro" 的組件 |
| #id | #firstname | 選擇擁有 id="firstname" 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內容，僅 vue 頁面生效 |
| ::before | view::before | 在 view 組件前邊插入內容，僅 vue 頁面生效 |
注意：
- 在
uni-app中不能使用*選擇器。 - 微信小程序自定義組件中僅支持 class 選擇器
-
page相當於body節點，例如：<!-- 設置頁面背景顏色，使用 scoped 會導致失效 --> page { background-color:#ccc; }
express
基於Nodejs Web 的開發框架（老框架了 目前無人維護）
其他框架：Koa、egg
express快速入門
1.創建一個空的文件夾，作為項目
2.初始化這個項目 npm init -y （生成版本庫）
3.安裝項目的依賴模塊 npm install --save express
4.git管理