@Author：Runsen

uniapp可以說是前端必學的東西。uniapp項目可以一套代碼運行到多端(APP端(安卓和ios)、各種小程序(微信、支付寶、頭條、百度、QQ)、H5端)。

詳細介紹請看官網：https://uniapp.dcloud.io/

先要下載安裝編輯器Huilder X.直接從官網給的地址下載：https://www.dcloud.io/hbuilderx.html

大多數操作系統都是WIndows ，我們直接安裝正式版下邊的Windows版的APP開發版。

安裝成功之后打開Hbuilder X,我們點擊依次左上角的文件-新建-項目，然后就會出現如下圖所示：

如果你想要創建一個屬于自己的項目，就可以通過新建的方式，可以點擊開發工具中心區域的新建項目，或者導航菜單的文件-新建項目，進行新建，選擇uniapp，若需要使用云開發，直接勾選左下角的阿里云或騰訊云即可。

之后HX就會下載相應的模板，然后創建好之后就成這樣了：

uni-app的運行

第一種是在各種瀏覽器上運行，在HBuilder X中打開要運行的項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，就可以在瀏覽器里面體驗uni-app 的 H5

訪問：http://localhost:8080/

uniapp本身就是一個vue項目。

第二種是真機運行，連接手機，開啟USB調試，進入要運行的項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備，就可以在手機里面體驗uni-app開發的項目了。

第三種是在微信開發者工具里運行。這也是在開發項目時的運行環境，在項目還沒有正式上線之前，都可以在微信開發者工具里面運行。點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具。選擇要運行的項目。

這里需要注意的是：需要在微信開發者中的安全設置開啟服務端口

這里才能在在微信開發者工具里運行uniapp項目。

第四種就是在支付寶小程序開發者工具里運行；

第五種是在百度開發者工具里運行；

第六種是在字節跳動開發者工具里運行。都是一樣的道理。

本期就分享到這里咯，希望對你有所幫助。下期Runsen將加大力度學習uniapp。

總結

以上是生活随笔為你收集整理的五十四、快速上手uniapp的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。