文中下划線皆為地址鏈接,點擊跳轉.
一、介紹
Uni-app是一個前端框架，使用Vue.js開發，繼承自Vue.js，提供了完整的Vue.js體驗。
Vue文字教程請訪問W3CSchool相關教程學習
Vue視頻教程請訪問Bilibili相關視頻課程，視頻課程使用VS編輯器，講解較為詳細。
提供了條件編譯優化，可以為某個平台編個性化代碼而不影響其他平台。
打包到APP時使用5+引擎，5+的所有能力都可以在uni-app中使用。
二、開發工具和環境
開發工具使用HbuilderX（內置uni-app項目模板）：下載地址
微信開發者工具（編譯調試小程序所用）：下載地址
APP模擬器即配置教程：教程地址
三、開發規范及目錄結構
（1）頁面規范——Vue單文件組件規范
.vue后綴名文件是自定義文件類型，使用類HTML語法描述vue組件。
每個vue文件包括三種類型的頂級語言塊：<template> <script> <style>，此外還允許添加自定義塊。
vue-loader會解析文件，提取每個語言塊，如有必要會通過其他loader處理，最后將他們組裝成一個ES Module，它的默認導出是一個Vue.js組件選項的對象。
#語言塊、模板
每個.vue文件有且僅有一個<template>塊
#腳本
每個.vue文件有且僅有一個<script>塊
#樣式
每個.vue文件可以有多個<style>標簽
#自定義塊
可以在.vue文件中添加額外的自定義塊來實現項目的特定需求。
#src導入
可以通過src屬性導入外部文件
注意：src導入遵循和webpack模塊相同的路徑解析規則，即（相對路徑需要以./開始）
（2）組件標簽規范
注意，不能使用標准HTML標簽，也不能用JS對dom進行操作。詳見uni-app組件規范手冊
接口能力（JS API）靠近微信小程序規范，詳見uni-app接口規范
數據綁定及事件處理靠近Vue.js規范，同時補充了APP及頁面的生命周期
，建議使用Flex布局進行開發以兼容多端運行。flex布局視頻教程
（3）目錄結構（1.9.2.20190417版本目錄）：
pages ：業務頁面文件存放目錄
static ：存放應用引用靜態資源（圖片，視頻等）的地方，注意：驚天資源只能存放於此
APP.vue ：應用配置，用來配置APP全局樣式以及監聽應用的生命周期
main.js ：Vue初始化入口文件
mainfest.json ：配置應用名稱、appid、logo、版本等打包信息
pages.json ：配置頁面路由、導航條、選項卡等頁面類信息
uni.scss ：uni-app內置的常用樣式變量，對於APP開發者（插件使用者），可以通過修改這些變量來定制自己的插件，實現自定義主題功能。如果項目使用了scss預處理，可以直接在scss代碼中使用其中的變量，同時無需import這個文件。
四、頁面樣式與布局
重要說明：新版本HBuilderX中已經將app.vue的全局樣式刪除了，在開發過程中需要flex時使用flex即可
（1）尺寸單位
框架目前僅支持長度單位px和%。uni-app的基准寬度為750px
頁面元素寬度在uni-app中的寬度計算公式：750px * （元素在設計稿中的寬度）/（設計稿基准寬度）
（2）樣式導入
使用@import語句導入外聯樣式，后跟需要導入的外聯樣式表的相對路徑，以分號結束
（3）內聯樣式
框架組件支持style、class屬性來空值組件的樣式
style：接受動態樣式，在運行時會解析，盡量避免將靜態的樣式寫進style中以免影響渲染速度
class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名（樣式類名）的集合，樣式類名前無需加. ，樣式類名之間用空格分隔
（4）選擇器
.class .intro 選擇多有擁有class="intro"的組件
#id #firstname 選擇擁有id="firstname"的組件
element view 選擇所有view組件
element，element view，checkbox 選擇所有文檔的view組件和所有的checkbox組件
：：after view：：after 在view組件后面插入內容，（僅微信小程序和5+APP生效）
：：before view：：before 在view組件前面插入內容，（僅微信小程序和5+APP生效）
（5）全局樣式與局部樣式
定義在App.vue中的樣式為全局樣式，作用於每個頁面。在pages目錄下的vue文件中定義的樣式為局部樣式，制作用在對應的頁面，並會覆蓋App.vue中相同的選擇器。
（6）flex布局
支持跨平台