1. uni-app 介紹

1.1 什么是uni-app

https://uniapp.dcloud.io/README

uni-app 是一個使用Vue.js 開發所有前端應用的框架。開發者編寫一套代碼，可發布到IOS，Android,H5，以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

即使不跨端，uni-app 也是更好的小程序開發框架。

1.2 為什么要學習uni-app

為什么要學習uni-app：相對開發者來說，減少了學習成本

1.3 環境搭建

1.安裝編輯器HbuilderX,HbuilderX 是通用的前端開發工具，但為uni-app做了特別強化。下載App 開發版開箱即用

2.安裝微信開發者工具

1.4 利用HbuilderX 初始化項目

點擊HbuilderX 菜單欄文件 -> 新建 -> 項目

選擇uni-app類型，輸入工程名，選擇模板，點擊創建，即可成功創建

創建uni-app 項目

1.5 運行項目

1.瀏覽器運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗uni-app 的 H5 版。

瀏覽器運行項目

2.真機運行：連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備，即可在該設備里面體驗uni-app。

如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。 注意目前開發App也需要安裝微信開發者工具

真機運行項目

3.在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具里面體驗uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。 若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑拷貝到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可看到實時的效果。

小程序運行項目

1.6 介紹項目目錄和文件作用

pages.json 文件用來對uni-app 進行全局配置，決定頁面文件的路徑，窗口樣式，原生的導航欄，底部的原生tabbar 等。

mainfest.json 文件時應用的配置文件，用于指定應用的名稱，圖標，權限等。

App.vue 跟組件，所有頁面都是在App.vue 下進行切換，是頁面的入口文件，可以調用應用的生命周期函數

main.js 是項目入口文件，主要作用是初始化vue實例并使用需要的插件

uni.scss 文件時為了方面整理控制應用的風格。比如按鈕顏色，邊框風格，uni.scss 文件預制了一批scss 變量

unpackage 是打包目錄，在這里有各個平臺的打包文件

pages 所有的頁面存放目錄

static 靜態資源目錄，例如圖片等

components 組件存放目錄

目錄結構

1.7 開發規范

為了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規范：

頁面文件遵循 Vue 單文件組件 (SFC) 規范

組件標簽靠近小程序規范，詳見uni-app 組件規范

接口能力（JS API）靠近微信小程序規范，但需將前綴 wx 替換為 uni，詳見uni-app接口規范

數據綁定及事件處理同 Vue.js 規范，同時補充了App及頁面的生命周期

為兼容多端運行，建議使用flex布局進行開發