uni-app是一個(gè)使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架侥衬，開發(fā)者編寫一套代碼，可編譯到iOS、Android轴总、H5直颅、小程序等多個(gè)平臺。
uni-app框架由Dcloud即數(shù)字天堂(北京)網(wǎng)絡(luò)技術(shù)有限公司推出怀樟，該公司主要產(chǎn)品有Web開發(fā)IDE Hbuiler功偿、HbuilderX，前端框架mui往堡、uni-app械荷，增強(qiáng)版的手機(jī)瀏覽器引擎H5plus等。
一虑灰、環(huán)境搭建
使用HBuilderX可視化界面快速創(chuàng)建項(xiàng)目吨瞎，HBuilderX內(nèi)置處理了相關(guān)環(huán)境依賴。
HBuilderX：IDE穆咐。最新版本下載地址
微信開發(fā)者工具：調(diào)試預(yù)覽工具颤诀。最新版本下載地址
二、創(chuàng)建uni-app項(xiàng)目
??點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：
??選擇uni-app对湃，輸入工程名崖叫，如：hello-uniapp，點(diǎn)擊創(chuàng)建熟尉，即可成功創(chuàng)建 uni-app归露。點(diǎn)擊模板里的 Hello uni-app 即可體驗(yàn)官方示例。
??1.? 真機(jī)運(yùn)行：連接手機(jī)剧包，開啟USB調(diào)試，進(jìn)入hello-uniapp項(xiàng)目往果，點(diǎn)擊工具欄的運(yùn)行 -> 真機(jī)運(yùn)行 -> 選擇運(yùn)行的設(shè)備疆液，即可在該設(shè)備里面體驗(yàn)uni-app。
??2.? 瀏覽器運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目陕贮，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器堕油，即可在瀏覽器里面體驗(yàn)uni-app 的 H5 版。
??3.? 在微信開發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目肮之，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開發(fā)者工具掉缺，即可在微信開發(fā)者工具里面體驗(yàn)uni-app。
進(jìn)入uni-app項(xiàng)目眶明，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇 Chrome，即可將 uni-app運(yùn)行到 瀏覽器筐高，可參考運(yùn)行uni-app搜囱，運(yùn)行到瀏覽器后丑瞧，就能和普通 web 項(xiàng)目一樣進(jìn)行預(yù)覽和調(diào)試了。
注意：Chrome調(diào)試只能保證樣式一致蜀肘，部分原生能力是不支持的绊汹。
??點(diǎn) Chrome 控制臺的 Sources 欄，可以給 js 打斷點(diǎn)調(diào)試扮宠。
??在 Page 下找到 webpack 里的工程目錄西乖，可直接找到對應(yīng)的vue頁面進(jìn)行斷點(diǎn)調(diào)試；或按 Ctrl+P搜文件名涵卵，進(jìn)入頁面調(diào)試浴栽；也可點(diǎn)擊控制臺的 log 信息，進(jìn)入對應(yīng)的頁面進(jìn)行調(diào)試轿偎。
image
image
uni-app運(yùn)行到微信web開發(fā)者工具典鸡，可在控制臺查看console信息，網(wǎng)絡(luò)請求等信息等坏晦。
注意：開發(fā)App或微信小程序均可使用微信開發(fā)者工具進(jìn)行調(diào)試脓豪。
??頁面樣式調(diào)試和一般的web項(xiàng)目一樣凰狞，通過調(diào)試的箭頭選中元素即可查看相應(yīng)的節(jié)點(diǎn)和樣式瓣戚，如下圖：
uni-app
??調(diào)試 js 時(shí)需要切換到 Sources 欄撞蜂，選中想要調(diào)試的那個(gè)頁面的js，進(jìn)行調(diào)試（如果js代碼是壓縮過的仓蛆，點(diǎn)擊右下角的{}可格式化代碼）睁冬，如下圖：
uni-app
??在HBuilderX工具欄看疙，點(diǎn)擊發(fā)行豆拨，選擇原生app-云端打包，如下圖：
??出現(xiàn)如下界面能庆，點(diǎn)擊打包即可施禾。
uni-app支持離線打包，在 HBuilderX 生成離線打包資源搁胆，然后參考離線打包（或參考其他用戶寫的離線打包日記）弥搞，即可進(jìn)行離線打包。
??在HBuilderX工具欄渠旁，點(diǎn)擊發(fā)行攀例，選擇本地打包，如下圖顾腊，點(diǎn)擊即可生成離線打包資源肛度。
1.? 在manifest.json配置發(fā)行后的路徑（發(fā)行在網(wǎng)站根目錄可不配置），比如發(fā)行網(wǎng)站路徑是www.xxx.com/html5投慈，在manifest.json文件內(nèi)編輯h5節(jié)點(diǎn)承耿，router下增加base屬性為 html5，如下圖所示：
??2.? 在HBuilderX工具欄伪煤，點(diǎn)擊發(fā)行加袋，選擇網(wǎng)站-H5手機(jī)版，如下圖抱既，點(diǎn)擊即可生成 H5 的相關(guān)資源文件职烧，保存于 unpackage 目錄。
按照如下步驟可將uni-app發(fā)布到微信小程序：
1.? 申請微信小程序AppID防泵，參考微信教程
2.? 在HBuiderX中蚀之，打開manifest.json，如下圖所示配置小程序AppID
3.? 在HBuilderX中頂部菜單依次點(diǎn)擊 "運(yùn)行" --> "運(yùn)行到小程序模擬器" --> "微信開發(fā)者工具"捷泞，等待uni-app項(xiàng)目成功編譯并自動啟動微信開發(fā)者工具
4.? 在微信開發(fā)者工具中足删，測試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊"上傳"按鈕锁右，之后按照 "提交審核"--> "發(fā)布" 小程序標(biāo)準(zhǔn)流程失受，逐步操作即可，詳細(xì)查看微信官方教程
六咏瑟、項(xiàng)目代碼
反饋星是使用uniapp開發(fā)的上報(bào)工具類項(xiàng)目拂到。
發(fā)送文字、圖片码泞、音頻兄旬、視頻內(nèi)容，您將獲得意想不到的反饋余寥。
