uni-app 框架簡介

uni-app 使用 vue 的語法 + 小程式的標籤和 API。

開發規範

為了實現多端相容，綜合考慮編譯速度，執行效能等因素，uni-app 約定了如下開發規範：

• 頁面檔案嚮導 
• 元件標籤靠近小程式規範，詳見 uni-app 元件規範
• 互連能力（JS API）靠近微信小程式規範，但需要將 wx替換為 uni，詳見 uni-app 介面規範
• 資料繫結及事件處理同 Vue.js 規範，同時補充了 App 和頁面的生命週期
• 為相容多端執行，建議使用 flex 佈局進行開發

目錄結構

一個 uni-app 工程，預設包含如下目錄及檔案：

┌─components           uni-app元件目錄
│  └─comp-a.vue        可複用的a元件
├─hybrid             存放本地網頁的目錄
├─platforms            存放各平臺專用頁面的目錄
├─pages              業務頁面檔案存放的目錄
│  ├─index
│  │ └─index.vue       index頁面
│  └─list
│    └─list.vue       list頁面
├─static             存放應用引用靜態資源（如圖片、影片等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents          存放小程式元件的目錄
├─main.js             Vue初始化入口檔案
├─App.vue             應用配置，用來配置App全域性樣式以及監聽 應用生命週期
├─manifest.json          配置應用名稱、appid、logo、版本等打包資訊
└─pages.json           配置頁面路由、導航條、選項卡等頁面類資訊

提示

• static 下目錄的 js 檔案不會被 compile-，裡面如果有 es6 的程式碼，不經過轉換直接執行，在手機裝置上會報錯。
• css，less/scss 等資源同樣不要放在 static 目錄下，建議這些公共的資源放在 common 目錄下。
• HbuilderX 1.9.0+ 支援在根目錄建立 ext.json sitemap.json 檔案。

有效目錄	說明
應用程式加	應用程式
mp-h5	H5
mp-weixin	微信小程式
mp-Alipay	支付寶小程式
mp-baidu	百度小程式

資源路徑說明

模板內引用靜態資源

template 內引用靜態資源，如 image，video 等標籤的 src 屬性時，可以使用相對路徑或絕對路徑，形式如下

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli專案中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對路徑 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @初始的絕對路徑以及相對路徑會透過base64轉換規則校驗
• 約會的靜態資源在非 h5 平臺，均不轉為 base64。
• H5 平臺，小於 4kb 的資源會被轉換成 base64，其餘不轉。
• 自 HBuilderX 2.6.6-alpha 起 template 內支援@初始路徑日期靜態資源，舊版本不支援此方式

js 檔案引用

// 絕對路徑，@指向專案根目錄，在cli專案中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'

注意

• js 檔案不支援使用/開頭的方式引用

css釋出靜態資源

css 檔案或 style 標籤內引用 css 檔案時（ scss，less 檔案同理），只能使用相對路徑

/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');

注意

• 自 HBuilderX 2.6.6-alpha 起支援絕對路徑日期靜態資源，舊版本不支援此方式

css 檔案或 style 標籤內引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，
有些小程式端css 檔案可以引用本地檔案（請看注意事項）。

/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);

提示

• @初始的絕對路徑以及相對路徑會透過 base64 轉換規則校驗
• 不支援本地圖片的平臺，小於 40kb，一定會轉 base64。（共四個平臺 mp-weixin，mp-qq，mp-toutiao，app v2）
• h5 平臺，小於 4kb 會轉 base64，超過 4kb 時不轉。
• 其餘平臺不會轉 base64