uni-app 框架簡介

uni-app 使用 vue 的語法 + 小程序的標(biāo)簽和 API。

開發(fā)規(guī)范

為了實(shí)現(xiàn)多端兼容，綜合考慮編譯速度，運(yùn)行性能等因素，uni-app 約定了如下開發(fā)規(guī)范：

• 頁面文件向?qū)?nbsp;Vue單文件組件（SFC）規(guī)范
• 組件標(biāo)簽靠近小程序規(guī)范，詳見 uni-app 組件規(guī)范
• 互連能力（JS API）靠近微信小程序規(guī)范，但需要將 wx替換為 uni，詳見 uni-app 接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了 App 和頁面的生命周期
• 為兼容多端運(yùn)行，建議使用 flex 布局進(jìn)行開發(fā)

目錄結(jié)構(gòu)

一個(gè) uni-app 工程，默認(rèn)包含如下目錄及文件：

    
┌─components            uni-app組件目錄
│  └─comp-a.vue         可復(fù)用的a組件
├─hybrid                存放本地網(wǎng)頁的目錄，詳見
├─platforms             存放各平臺專用頁面的目錄，詳見
├─pages                 業(yè)務(wù)頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─wxcomponents          存放小程序組件的目錄，詳見
├─main.js               Vue初始化入口文件
├─App.vue               應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 應(yīng)用生命周期
├─manifest.json         配置應(yīng)用名稱、appid、logo、版本等打包信息，詳見
└─pages.json            配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息，詳見
    

提示

• static 下目錄的 js 文件不會被 compile-，里面如果有 es6 的代碼，不經(jīng)過轉(zhuǎn)換直接運(yùn)行，在手機(jī)設(shè)備上會報(bào)錯(cuò)。
• css，less/scss 等資源同樣不要放在 static 目錄下，建議這些公共的資源放在 common 目錄下。
• HbuilderX 1.9.0+ 支持在根目錄創(chuàng)建 ext.json sitemap.json 文件。

資源路徑說明

模板內(nèi)引用靜態(tài)資源

template 內(nèi)引用靜態(tài)資源，如 image，video 等標(biāo)簽的 src 屬性時(shí)，可以使用相對路徑或絕對路徑，形式如下

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/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轉(zhuǎn)換規(guī)則校驗(yàn)
• 引入的靜態(tài)資源在非 h5 平臺，均不轉(zhuǎn)為 base64。
• H5 平臺，小于 4kb 的資源會被轉(zhuǎn)換成 base64，其余不轉(zhuǎn)。
• 自 HBuilderX 2.6.6-alpha 起 template 內(nèi)支持@初始路徑日期靜態(tài)資源，舊版本不支持此方式

js 文件引用

js 文件或 script 標(biāo)簽內(nèi)（包括renderjs等）日期 js 文件時(shí)，可以使用相對路徑和絕對路徑，形式如下

// 絕對路徑，@指向項(xiàng)目根目錄，在cli項(xiàng)目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'

注意

• js 文件不支持使用/開頭的方式引用

css發(fā)布靜態(tài)資源

css 文件或 style 標(biāo)簽內(nèi)引用 css 文件時(shí)（ scss，less 文件同理），只能使用相對路徑

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

注意

• 自 HBuilderX 2.6.6-alpha 起支持絕對路徑日期靜態(tài)資源，舊版本不支持此方式

css 文件或 style 標(biāo)簽內(nèi)引用的圖片路徑可以使用相對路徑也可以使用絕對路徑，需要注意的是，有些小程序端css 文件可以引用本地文件（請看注意事項(xiàng)）。

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

提示

• @初始的絕對路徑以及相對路徑會通過 base64 轉(zhuǎn)換規(guī)則校驗(yàn)
• 不支持本地圖片的平臺，小于 40kb，一定會轉(zhuǎn) base64。（共四個(gè)平臺 mp-weixin，mp-qq，mp-toutiao，app v2）
• h5 平臺，小于 4kb 會轉(zhuǎn) base64，超過 4kb 時(shí)不轉(zhuǎn)。
• 其余平臺不會轉(zhuǎn) base64