使用Hbuilder快速生成WebApp

前期準備

• 一個移動端網站，例如：www.cbizunion.top/
• Hbuilder官網：www.dcloud.io/

步驟一 下載HbuilderX極客開發者工具

打開Hbuilder官網，點擊HbuilderX圖標進入下載頁面

點擊右上角下載

根據你的電腦系統選擇下載標準版

下載內容爲一個壓縮包，將它解壓到本地磁盤（如D盤）根目錄下（此步不作演示），解壓結果如圖，雙擊HbuilderX.exe運行軟件

• 建議點擊鼠標右鍵-發送到-桌面快捷方式，方便之後使用

軟件界面如圖所示

步驟二 環境配置

點擊菜單欄 工具 -> 插件安裝 找到App真機運行，點擊安裝，安裝後如圖

回到Hbuilder官網，註冊一個帳號，而後到軟件裏點擊左下角頭像進行登錄

步驟三 套殼編譯

使用瀏覽器打開咱們本身的網站，建議使用谷歌瀏覽器

按F12打開開發者工具，點擊「PC/移動端切換顯示」按鈕，效果如圖

有些網站不能當即切換成移動端頁面，此時按F5刷新一下，而後把網址複製下來

打開開發者工具軟件，點擊 文件 -> 新建 -> 項目

選擇 Wap2App，填寫項目名稱並將剛剛複製的網址粘貼進去，模板選擇默認模板，而後點擊建立

右下角會提示項目建立成功，此時咱們點擊打開 manifest.json 文件進行App配置

點擊 圖標配置 ，上傳1024px*1024px的 png格式 圖片做爲App圖標，而後點擊 自動生成全部圖標並替換

選擇咱們的項目，點擊菜單欄中的 發行，選擇 App雲端打包 ，ios勾選 越獄包，Android勾選 使用DCloud公用證書，點擊打包

等待雲端打包，結果可經過 控制檯 獲取

打包成功後，控制檯給出下載地址

總結

由此，咱們成功完成了任務，使用Hbuilder快速生成了一款WebApp。是否是感受很簡單呢！ 若是你還想了解更多信息，請訪問官方文檔：ask.dcloud.net.cn/docs/#//ask…