一惠拭、uni-app的由來

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

2012年莫秆，DCloud 開始研發(fā)小程序技術间雀，優(yōu)化 webview 的功能和性能。
2015年镊屎，DCloud 正式商用了自己的小程序惹挟，產品名為“流應用”，并且將技術標準貢獻給工信部旗下的HTML5中國產業(yè)聯(lián)盟缝驳，并推進各家流量巨頭接入該標準连锯，開展小程序業(yè)務。360手機助手率先接入用狱，緊隨其后的包括了大眾點評运怖、攜程、京東夏伊、有道詞典等摇展。
2015年9月，DCloud 推進微信團隊開展小程序溺忧，并在2016年出上線小程序業(yè)務咏连，但是微信并沒有接入聯(lián)盟的標準盯孙，而是制定了自己的一套標準。
隨著 DCloud 持續(xù)普及小程序理念祟滴，越來越多的大流量巨頭公司紛紛開始加入其行列振惰，但是接入聯(lián)盟標準的僅有部分公司，大部分會因為商業(yè)利益而制定了私有標準垄懂，從而造成標準無法統(tǒng)一骑晶，十分混亂。
面對這種混亂局面草慧，DCloud 決定開發(fā)一個免費開源的框架透罢，通過這個框架為開發(fā)者抹平各大平臺的差異，這個框架就是 uni-app冠蒋，這就是它的由來羽圃。

二、html抖剿、vue朽寞、小程序的區(qū)別

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

三、框架簡介

1锻煌、目錄結構

┌─cloudfunctions        云函數(shù)目錄（阿里云為aliyun妓布，騰訊云為tcb，詳見uniCloud）
│─components            符合vue組件規(guī)范的uni-app組件目錄
│  └─comp-a.vue         可復用的a組件
├─hybrid                存放本地網(wǎng)頁的目錄宋梧，詳見
├─platforms             存放各平臺專用頁面的目錄匣沼，詳見
├─pages                 業(yè)務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態(tài)資源（如圖片、視頻等）的目錄捂龄，注意：靜態(tài)資源只能存放于此
├─wxcomponents          存放小程序組件的目錄释涛，詳見
├─main.js               Vue初始化入口文件
├─App.vue               應用配置，用來配置App全局樣式以及監(jiān)聽 應用生命周期
├─manifest.json         配置應用名稱倦沧、appid唇撬、logo、版本等打包信息展融，詳見
└─pages.json            配置頁面路由窖认、導航條、選項卡等頁面類信息，詳見

Tips

• static目錄為靜態(tài)資源存放文件夾耀态，該目錄下的js文件不會被編譯轮傍，若文件中存放有二手代碼，不會經>過轉換直接運行首装，在手機設備上會報錯
• css创夜、less/sass等資源也不要放在目錄下，這類公共資源建議放在common目錄下

2仙逻、資源路徑說明

• 模板內引入靜態(tài)資源

<!-- template內引入靜態(tài)資源驰吓，如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>

• js文件引入

// js文件或script標簽內（包括renderjs等）引入js文件時缺亮，可以使用相對路徑和絕對路徑
// 絕對路徑翁涤，@指向項目根目錄，在cli項目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑萌踱，js文件不支持使用/開頭的方式引入
import add from '../../common/add.js'   

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

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

3葵礼、應用的生命周期

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

4届谈、頁面的生命周期

5网缝、頁面棧

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

6唉韭、官方文檔

page.json配置 的官方文檔

uni-app的官方組件文檔

內容很詳細，可作為工具文檔使用

2020.10.30