uni-app 框架簡(jiǎn)介

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

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

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

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

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

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

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

提示

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

資源路徑說(shuō)明

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

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

<!-- 絕對(duì)路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對(duì)路徑 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @初始的絕對(duì)路徑以及相對(duì)路徑會(huì)通過(guò)base64轉(zhuǎn)換規(guī)則校驗(yàn)
• 引入的靜態(tài)資源在非 h5 平臺(tái)，均不轉(zhuǎn)為 base64。
• H5 平臺(tái)，小于 4kb 的資源會(huì)被轉(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í)，可以使用相對(duì)路徑和絕對(duì)路徑，形式如下

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

注意

• js 文件不支持使用/開(kāi)頭的方式引用

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

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

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

注意

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

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

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

提示

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