1. 通過 HBuilderX 可視化界面
可視化的方式比較簡單,HBuilderX內置相關環境,開箱即用,無需配置nodejs。
開始之前,開發者需先下載安裝如下工具:
- HBuilderX:官方IDE下載地址
HBuilderX是通用的前端開發工具,但爲uni-app
做了特別強化。
下載App開發版,可開箱即用;如下載標準版,在運行或發行uni-app
時,會提示安裝uni-app
插件,插件下載完成後方可使用。
如使用cli
方式創建項目,可直接下載標準版,因爲uni-app編譯插件被安裝到項目下了。
創建uni-app
在點擊工具欄裏的文件 -> 新建 -> 項目:
選擇uni-app
類型,輸入工程名,選擇模板,點擊創建,即可成功創建。
uni-app自帶的模板有 Hello uni-app ,是官方的組件和API示例。還有一個重要模板是 uni ui項目模板,日常開發推薦使用該模板,已內置大量常用組件。
運行uni-app
-
瀏覽器運行:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器,即可在瀏覽器裏面體驗uni-app 的 H5 版。
-
真機運行:連接手機,開啓USB調試,進入hello-uniapp項目,點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備,即可在該設備裏面體驗uni-app。
如手機無法識別,請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。 注意目前開發App也需要安裝微信開發者工具。
-
在微信開發者工具裏運行:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具,即可在微信開發者工具裏面體驗uni-app。
1. 開發工具調試
打開微信開發工具-–>設置—>安全—>開啓服務端口(微信開發者工具最新版)
進入XHbuilder,點擊工具—>設置,找到微信開發者工具安裝目錄,設置啓動地址(安裝插件:工具—>插件安裝)
(如果是開發支付寶小程序就需要自己打開生成的代碼包,運行到支付寶開發者工具的時候編譯平臺會提示在哪個路徑)
以上設置完成後就可在代碼開發後點擊運行,就能自主選擇運行到哪端進行查看調試了。在編輯器中進行修改後不用重新運行,小程序開發者工具會自動更新,如果沒有變化,點擊重新運行即可:
-
注意:如果是第一次使用,需要先配置小程序ide的相關路徑,才能運行成功。如下圖,需在輸入框輸入微信開發者工具的安裝路徑。 若HBuilderX不能正常啓動微信開發者工具,需要開發者手動啓動,然後將uni-app生成小程序工程的路徑拷貝到微信開發者工具裏面,在HBuilderX裏面開發,在微信開發者工具裏面就可看到實時的效果。
uni-app默認把項目編譯到根目錄的unpackage目錄。
-
在支付寶小程序開發者工具裏運行:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到小程序模擬器 -> 支付寶小程序開發者工具,即可在支付寶小程序開發者工具裏面體驗uni-app。
-
在百度開發者工具裏運行:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到小程序模擬器 -> 百度開發者工具,即可在百度開發者工具裏面體驗uni-app。
-
在字節跳動開發者工具裏運行:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到小程序模擬器 -> 字節跳動開發者工具,即可在字節跳動開發者工具裏面體驗uni-app。
-
在360開發工具中導入:進入hello-uniapp項目,點擊工具欄的運行 -> 運行到小程序模擬器 -> 360開發工具,即可在360開發工具裏面體驗uni-app。
-
在QQ小程序開發工具裏運行:內容同上,不再重複。
Tips
- 如果是第一次使用,需要配置開發工具的相關路徑。點擊工具欄的運行 -> 運行到小程序模擬器 -> 運行設置,配置相應小程序開發者工具的路徑。
- 支付寶/百度/字節跳動/360小程序工具,不支持直接指定項目啓動並運行。因此開發工具啓動後,請將 HBuilderX 控制檯中提示的項目路徑,在相應小程序開發者工具中打開。
- 如果自動啓動小程序開發工具失敗,請手動啓動小程序開發工具並將 HBuilderX 控制檯提示的項目路徑,打開項目。
運行的快捷鍵是Ctrl+r
。 HBuilderX 還提供了快捷運行菜單,可以按數字快速選擇要運行的設備:
如需調試,可參考:uni-app調試
發佈uni-app
在HBuilderX工具欄,點擊發行,選擇原生app-雲端打包,如下圖:
出現如下界面,點擊打包即可。
uni-app
支持離線打包,在 HBuilderX 發行菜單裏生成離線打包資源,然後參考離線打包文檔操作,可以從HBuilderX的發行菜單裏找到文檔鏈接,也可以直接訪問:https://nativesupport.dcloud.net.cn/AppDocs/README。
在HBuilderX工具欄,點擊發行,選擇本地打包,如下圖,點擊即可生成離線打包資源。
- 在
manifest.json
的可視化界面,進行如下配置(發行在網站根目錄可不配置應用基本路徑),此時發行網站路徑是 www.xxx.com/h5,如:https://uniapp.dcloud.io/h5。 - 在HBuilderX工具欄,點擊發行,選擇網站-H5手機版,如下圖,點擊即可生成 H5 的相關資源文件,保存於 unpackage 目錄。
注意
history
模式發行需要後臺配置支持,詳見:history 模式的後端配置- 打包部署後,在服務器上開啓 gzip 可以進一步壓縮文件。具體的配置,可以參考網上的分享:https://juejin.im/post/5af003286fb9a07aac24611b
發佈爲微信小程序:
- 申請微信小程序AppID,參考:微信教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-微信",輸入小程序名稱和appid點擊發行即可在
unpackage/dist/build/mp-weixin
生成微信小程序項目代碼。 - 在微信小程序開發者工具中,導入生成的微信小程序項目,測試項目代碼運行正常後,點擊“上傳”按鈕,之後按照 “提交審覈” => “發佈” 小程序標準流程,逐步操作即可,詳細查看:微信官方教程。
發佈爲百度小程序:
- 入駐小程序並申請百度小程序AppID,參考:百度小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-百度",輸入小程序名稱和appid點擊發行即可在
/unpackage/dist/build/mp-baidu
生成百度小程序項目代碼。 - 在百度小程序開發者工具中,導入生成的百度小程序項目,測試項目代碼運行正常後,點擊“上傳”按鈕上傳代碼,之後在百度小程序的 管理中心 選擇創建的應用點擊前往發佈,選擇對應的版本然後提交審覈。
發佈爲支付寶小程序:
- 入駐支付寶小程序,參考:支付寶小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-支付寶",即可在
/unpackage/dist/build/mp-alipay
生成支付寶小程序項目代碼。 - 在支付寶小程序開發者工具中,導入生成的支付寶小程序項目,測試項目代碼運行正常後,點擊“上傳”按鈕上傳代碼,在 支付寶小程序後臺,選擇剛提交的版本點擊提交審覈,詳見:支付寶小程序文檔。
發佈爲字節跳動小程序:
- 入駐字節跳動小程序,參考:字節跳動小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-字節跳動",即可在
/unpackage/dist/build/mp-alipay
生成字節跳動小程序項目代碼。 - 在字節跳動小程序開發者工具中,導入生成的字節跳動小程序項目,測試項目代碼運行正常後,點擊“上傳”按鈕上傳代碼,在 字節跳動小程序後臺,選擇剛提交的版本點擊提交審覈,詳見:字節跳動小程序文檔。
發佈爲360小程序:
- 入駐360小程序,參考:360小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-360",即可在
/unpackage/dist/build/mp-360
生成360小程序項目代碼。 - 在360瀏覽器中,導入生成的360小程序項目
注意
- 目前僅windows平臺支持
發佈爲QQ小程序: 內容同上,不再重複。
發佈的快捷鍵是Ctrl+u
。同樣可拉下快速發佈菜單並按數字鍵選擇。
2. 通過vue-cli命令行
除了HBuilderX可視化界面,也可以使用 cli
腳手架,可以通過 vue-cli
創建 uni-app
項目。
環境安裝
全局安裝vue-cli
npm install -g @vue/cli
創建uni-app
使用正式版(對應HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版(對應HBuilderX最新alpha版)
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
此時,會提示選擇項目模板,初次體驗建議選擇 hello uni-app
項目模板,如下所示:
選擇自定義模板時,需要填寫 uni-app 模板地址,這個地址其實就是託管在雲端的倉庫地址。以 GitHub 爲例,地址格式爲 userName/repositoryName
,如 dcloudio/uni-template-picture
就是下載圖片模板。
更多支持的下載方式,請參考這個插件的說明:download-git-repo
運行、發佈uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM%
可取值如下:
值 | 平臺 |
---|---|
app-plus | app平臺生成打包資源(僅支持npm run build:app-plus,也就是App平臺運行調試不支持cli方式,需在HBuilderX中運行調試) |
h5 | H5 |
mp-alipay | 支付寶小程序 |
mp-baidu | 百度小程序 |
mp-weixin | 微信小程序 |
mp-toutiao | 字節跳動小程序 |
mp-qq | qq 小程序 |
mp-360 | 360 小程序 |
quickapp-webview | 快應用 |
可以自定義更多條件編譯平臺,比如釘釘小程序,參考package.json文檔。
運行併發布快應用
快應用有兩種開發方式,uni-app均支持:
- 類小程序webview渲染方式:https://ask.dcloud.net.cn/article/37182
- 原生渲染方式:https://ask.dcloud.net.cn/article/37145
其他:
- 目前使用
npm run build:app-plus
會在/dist/build/app-plus
下生成app打包資源。如需製作wgt包,將app-plus
中的文件壓縮成zip(注意:不要包含app-plus目錄
),再重命名爲${appid}.wgt
,appid
爲manifest.json
文件中的appid
。 - dev 模式編譯出的各平臺代碼存放於根目錄下的
/dist/dev/
目錄,打開各平臺開發工具選擇對應平臺目錄即可進行預覽(h5 平臺不會在此目錄,存在於緩存中); - build 模式編譯出的各平臺代碼存放於根目錄下的
/dist/build/
目錄,發佈時選擇此目錄進行發佈; - dev 和 build 模式的區別:
- dev 模式有 SourceMap 可以方便的進行斷點調試;
- build 模式會將代碼進行壓縮,體積更小更適合發佈爲正式版應用;
- 進行 環境判斷 時,dev 模式 process.env.NODE_ENV 的值爲 development,build 模式 process.env.NODE_ENV 的值爲 production。