uni-app作為近年異軍突起的前端框架，號稱相容10個平臺，一套程式碼多端執行。

官方文件地址：https://uniapp.dcloud.io/
聽起來十分的不錯，這樣可以大大減少公司和開發者的時間和金錢成本。因此很多的公司企業也都把uni-app列入了招聘技術要求。
我從今天開始也入坑一波，把自己學到的和踩的坑和大家分享一下。因為我之前是做微信小程式的，所以我也會把uniapp和微信小程式原生開發的異同點對比一下。
首先，無論是什麼語言，什麼框架，都需要一個得力的編輯器輔助我們完成程式碼的編寫及除錯。
uni-app官方推薦的是HbuilderX作為主要編輯器，Hbuilder和uniapp都是DCloud旗下的產品，它自然會把HbuilderX各種東西除錯相容的很好，所以目前，我打算先用這個。

https://www.dcloud.io/hbuilderx.html這是HbuilderX官方下載地址。
然後我建議再下載一個微信開發者工具，方便除錯
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html這是微信開發者工具的下載地址。
然後我們進入HbuilderX的視覺化介面，新建一個uniapp專案。

新建完成之後，目錄結構如下：

pages資料夾存放的就是我們要編寫的所有頁面。
static資料夾是我們要上線打包時用到的，在開發中基本不用。
App.vue是設定全域性樣式的，類似於微信小程式的app.js/app.wxss，manifest.json也是除錯上線時需要用到的，比如app的圖示等。

pages.json類似於微信小程式的app.json，設定全域性的tabbar及頁面註冊等功能。
uni.scss是官方為我們封裝的一些樣式庫。
ok，然後我們點選執行一下，點頂部的執行之後，可以選擇瀏覽器、手機模擬器、小程式模擬器，大家可以都一一嘗試一下，手機模擬器的話，需要在手機上下載對接的軟體，插上USB後它會有提示。小程式模擬器必須下載對應的IDE才能開啟，而已大部分都需要開啟一下埠。
H5端的執行效果如下：

我沒有看官方文件，自己敲了一些程式碼，個人感覺uniapp開發起來像是vue和小程式的結合，搞笑的事情是，我就隨便試了一個微信小程式的API，把字首wx.改成了uni.，然後就可以正常使用，功能一摸一樣。哈哈哈。所以，如果有vue和小程式的開發經驗的話，uniapp學起來應該比較輕鬆。

有任何問題都可以聯絡QQ：505417246
微信小程式雲開發零基礎QQ交流群：1073011570