uni-app是一個使用Vue.js開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。
uni-app框架由Dcloud即數字天堂(北京)網絡技術有限公司推出，該公司主要產品有Web開發IDE Hbuiler、HbuilderX，前端框架mui、uni-app，增強版的手機瀏覽器引擎H5plus等。
一、環境搭建
使用HBuilderX可視化界面快速創建項目，HBuilderX內置處理了相關環境依賴。
HBuilderX：IDE。最新版本下載地址
微信開發者工具：調試預覽工具。最新版本下載地址
二、創建uni-app項目
??點擊工具欄里的文件 -> 新建 -> 項目：
??選擇uni-app，輸入工程名，如：hello-uniapp，點擊創建，即可成功創建 uni-app。點擊模板里的 Hello uni-app 即可體驗官方示例。
??1.? 真機運行：連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備，即可在該設備里面體驗uni-app。
??2.? 瀏覽器運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗uni-app 的 H5 版。
??3.? 在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具里面體驗uni-app。
進入uni-app項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇 Chrome，即可將 uni-app運行到 瀏覽器，可參考運行uni-app，運行到瀏覽器后，就能和普通 web 項目一樣進行預覽和調試了。
注意：Chrome調試只能保證樣式一致，部分原生能力是不支持的。
??點 Chrome 控制臺的 Sources 欄，可以給 js 打斷點調試。
??在 Page 下找到 webpack 里的工程目錄，可直接找到對應的vue頁面進行斷點調試；或按 Ctrl+P搜文件名，進入頁面調試；也可點擊控制臺的 log 信息，進入對應的頁面進行調試。
image
image
uni-app運行到微信web開發者工具，可在控制臺查看console信息，網絡請求等信息等。
注意：開發App或微信小程序均可使用微信開發者工具進行調試。
??頁面樣式調試和一般的web項目一樣，通過調試的箭頭選中元素即可查看相應的節點和樣式，如下圖：
uni-app
??調試 js 時需要切換到 Sources 欄，選中想要調試的那個頁面的js，進行調試（如果js代碼是壓縮過的，點擊右下角的{}可格式化代碼），如下圖：
uni-app
??在HBuilderX工具欄，點擊發行，選擇原生app-云端打包，如下圖：
??出現如下界面，點擊打包即可。
uni-app支持離線打包，在 HBuilderX 生成離線打包資源，然后參考離線打包（或參考其他用戶寫的離線打包日記），即可進行離線打包。
??在HBuilderX工具欄，點擊發行，選擇本地打包，如下圖，點擊即可生成離線打包資源。
1.? 在manifest.json配置發行后的路徑（發行在網站根目錄可不配置），比如發行網站路徑是www.xxx.com/html5，在manifest.json文件內編輯h5節點，router下增加base屬性為 html5，如下圖所示：
??2.? 在HBuilderX工具欄，點擊發行，選擇網站-H5手機版，如下圖，點擊即可生成 H5 的相關資源文件，保存于 unpackage 目錄。
按照如下步驟可將uni-app發布到微信小程序：
1.? 申請微信小程序AppID，參考微信教程
2.? 在HBuiderX中，打開manifest.json，如下圖所示配置小程序AppID
3.? 在HBuilderX中頂部菜單依次點擊 "運行" --> "運行到小程序模擬器" --> "微信開發者工具"，等待uni-app項目成功編譯并自動啟動微信開發者工具
4.? 在微信開發者工具中，測試項目代碼運行正常后，點擊"上傳"按鈕，之后按照 "提交審核"--> "發布" 小程序標準流程，逐步操作即可，詳細查看微信官方教程
六、項目代碼
反饋星是使用uniapp開發的上報工具類項目。
發送文字、圖片、音頻、視頻內容，您將獲得意想不到的反饋。
