一、uni-app的由來

提到小程序，大多數(shù)人第一反應(yīng)該都是聯(lián)想到微信。其實(shí) Dcloud 才是小程序行業(yè)的開創(chuàng)者。
DCloud，數(shù)字天堂（北京）網(wǎng)絡(luò)技術(shù)有限公司，是W3C 成員及 HTML5 中國(guó)產(chǎn)業(yè)聯(lián)盟發(fā)起單位。

2012年，DCloud 開始研發(fā)小程序技術(shù)，優(yōu)化 webview 的功能和性能。
2015年，DCloud 正式商用了自己的小程序，產(chǎn)品名為“流應(yīng)用”，并且將技術(shù)標(biāo)準(zhǔn)貢獻(xiàn)給工信部旗下的HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟，并推進(jìn)各家流量巨頭接入該標(biāo)準(zhǔn)，開展小程序業(yè)務(wù)。360手機(jī)助手率先接入，緊隨其后的包括了大眾點(diǎn)評(píng)、攜程、京東、有道詞典等。
2015年9月，DCloud 推進(jìn)微信團(tuán)隊(duì)開展小程序，并在2016年出上線小程序業(yè)務(wù)，但是微信并沒有接入聯(lián)盟的標(biāo)準(zhǔn)，而是制定了自己的一套標(biāo)準(zhǔn)。
隨著 DCloud 持續(xù)普及小程序理念，越來越多的大流量巨頭公司紛紛開始加入其行列，但是接入聯(lián)盟標(biāo)準(zhǔn)的僅有部分公司，大部分會(huì)因?yàn)樯虡I(yè)利益而制定了私有標(biāo)準(zhǔn)，從而造成標(biāo)準(zhǔn)無法統(tǒng)一，十分混亂。
面對(duì)這種混亂局面，DCloud 決定開發(fā)一個(gè)免費(fèi)開源的框架，通過這個(gè)框架為開發(fā)者抹平各大平臺(tái)的差異，這個(gè)框架就是 uni-app，這就是它的由來。

二、html、vue、小程序的區(qū)別

此處引用一下官網(wǎng)推薦的《白話uni-app》，特別適合像我這樣的新手閱讀。
文章中講述了許多編碼方式的變化以及 uni-app 中對(duì)比于 html 標(biāo)簽所改變及保留的一些標(biāo)簽內(nèi)容，除此之外還有寫出新增的針對(duì)于手機(jī)端常用的新組建，內(nèi)容干貨巨多，寫的十分詳細(xì)易懂。

三、框架簡(jiǎn)介

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

┌─cloudfunctions        云函數(shù)目錄（阿里云為aliyun，騰訊云為tcb，詳見uniCloud）
│─components            符合vue組件規(guī)范的uni-app組件目錄
│  └─comp-a.vue         可復(fù)用的a組件
├─hybrid                存放本地網(wǎng)頁的目錄，詳見
├─platforms             存放各平臺(tái)專用頁面的目錄，詳見
├─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)卡等頁面類信息，詳見

Tips

• static目錄為靜態(tài)資源存放文件夾，該目錄下的js文件不會(huì)被編譯，若文件中存放有二手代碼，不會(huì)經(jīng)>過轉(zhuǎn)換直接運(yùn)行，在手機(jī)設(shè)備上會(huì)報(bào)錯(cuò)
• css、less/sass等資源也不要放在目錄下，這類公共資源建議放在common目錄下

2、資源路徑說明

• 模板內(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>

• 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ì)路徑，js文件不支持使用/開頭的方式引入
import add from '../../common/add.js'   

• css引入靜態(tài)資源

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

3、應(yīng)用的生命周期

• onLaunch：當(dāng)uni-app初始化時(shí)完成，全局只完成一次。
• onShow：當(dāng)uni-app啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，即從隱藏到顯示
• onHide：當(dāng)uni-app從前臺(tái)進(jìn)入到后臺(tái)，即從顯示到隱藏
• onError：當(dāng)uni-app報(bào)錯(cuò)時(shí)觸發(fā)
• onUniNViewMessage：對(duì)nvue頁面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽
• onUnhandledRejection：對(duì)未處理的 Promise 拒絕事件監(jiān)聽函數(shù)
• onPageNotFound：頁面不存在監(jiān)聽函數(shù)
• onThemeChange：監(jiān)聽系統(tǒng)主題變化

4、頁面的生命周期

5、頁面棧

框架以棧的形式管理當(dāng)前所有頁面， 當(dāng)發(fā)生路由切換的時(shí)候，頁面棧的表現(xiàn)如下：

6、官方文檔

page.json配置 的官方文檔

uni-app的官方組件文檔

內(nèi)容很詳細(xì)，可作為工具文檔使用

2020.10.30