首頁 > web前端 > uni-app > 主體

hello uniapp怎麼運作

藏色散人
發布: 2023-01-13 00:44:24
原創
12953 人瀏覽過

hello uniapp運行的方法:首先透過HBuilderX工具視覺化介面;然後依序點擊工具列裡的“檔案->新建->專案”,並選擇“uni-app”類型進行建立;最後進入“hello-uniapp”項目,並點擊工具列的“運行”即可。

hello uniapp怎麼運作

本教學操作環境:Windows10系統、uni-app2.5.1版本、thinkpad t480電腦。

推薦(免費):uni-app開發教程

#uni-app支援透過視覺化介面、vue-cli命令列兩種方式快速建立專案。

1. 透過 HBuilderX 視覺化介面

視覺化的方式比較簡單,HBuilderX內建相關環境,開箱即用,無需設定nodejs。

開始之前,開發者需先下載安裝以下工具:

HBuilderX:官方IDE下載位址https://www.dcloud.io/hbuilderx.html

HBuilderX是通用的前端開發工具,但為uni-app做了特別強化。

下載App開發版,可開箱即用;如下載標準版,在運行或發行uni-app時,會提示安裝uni-app插件,插件下載完成後方可使用。

如使用cli方式建立項目,可直接下載標準版,因為uni-app編譯插件被安裝到專案下了。

建立uni-app

在點擊工具列裡的檔案-> 新建-> 項目:

hello uniapp怎麼運作

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

uni-app自備的模板有 Hello uni-app ,是官方的元件和API範例。還有一個重要模板是 uni ui專案模板,日常開發建議使用該模板,已內建大量常用元件。

hello uniapp怎麼運作

執行uni-app

#1.瀏覽器運行:進入hello-uniapp項目,點選工具列的運行-> ; 執行到瀏覽器-> 選擇瀏覽器,即可在瀏覽器內體驗uni-app 的H5 版。

hello uniapp怎麼運作

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

hello uniapp怎麼運作

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

在微信開發者工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程序模擬器-> 微信開發者工具,即可在微信開發者工具裡面體驗uni-app。

hello uniapp怎麼運作

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

uni-app預設把專案編譯到根目錄的unpackage目錄。

hello uniapp怎麼運作

4.在支付寶小程式開發者工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程式模擬器->支付寶小程式開發者工具,即可在支付寶小程式開發者工具裡面體驗uni-app。

hello uniapp怎麼運作

5.在百度開發者工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程序模擬器-> 百度開發者工具,即可在百度開發者工具內體驗uni-app。

hello uniapp怎麼運作

6.在位元組跳動開發者工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程序模擬器-> 字節跳動開發者工具,即可在字節跳動開發者工具裡面體驗uni-app。

hello uniapp怎麼運作

7.在360開發工具中導入:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程序模擬器-> 360開發工具,即可在360開發工具裡面體驗uni-app。

hello uniapp怎麼運作

8.在快應用聯盟工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程式模擬器-> 快應用聯盟工具,即可在快應用聯盟工具裡面體驗uni-app。

hello uniapp怎麼運作

9.在華為開發者工具裡運行:進入hello-uniapp項目,點擊工具列的運行-> 運行到小程序模擬器-> 華為開發者工具,即可在華為開發者工具裡面體驗uni-app。

hello uniapp怎麼運作

10.在QQ小程式開發工具裡運作:內容同上,不再重複。

以上是hello uniapp怎麼運作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板