前期準(zhǔn)備
- 一個(gè)移動(dòng)端網(wǎng)站忿族，例如：https://www.cbizunion.top/
- Hbuilder官網(wǎng)：http://www.dcloud.io/
步驟一 下載HbuilderX極客開(kāi)發(fā)者工具
打開(kāi)Hbuilder官網(wǎng)丸升，點(diǎn)擊HbuilderX圖標(biāo)進(jìn)入下載頁(yè)面
點(diǎn)擊右上角下載
根據(jù)你的電腦系統(tǒng)選擇下載標(biāo)準(zhǔn)版
下載內(nèi)容為一個(gè)壓縮包钧栖，將它解壓到本地磁盤（如D盤）根目錄下（此步不做演示）攀操，解壓結(jié)果如圖针余，雙擊HbuilderX.exe運(yùn)行軟件
- 建議點(diǎn)擊鼠標(biāo)右鍵-發(fā)送到-桌面快捷方式葱绒，方便以后使用
軟件界面如圖所示
步驟二 環(huán)境配置
點(diǎn)擊菜單欄 工具 -> 插件安裝 找到App真機(jī)運(yùn)行绍在，點(diǎn)擊安裝门扇，安裝后如圖
回到Hbuilder官網(wǎng)，注冊(cè)一個(gè)賬號(hào)偿渡，然后到軟件里點(diǎn)擊左下角頭像進(jìn)行登陸
步驟三 套殼編譯
使用瀏覽器打開(kāi)我們自己的網(wǎng)站臼寄，建議使用谷歌瀏覽器
按F12打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊“PC/移動(dòng)端切換顯示”按鈕溜宽，效果如圖
有些網(wǎng)站不能立即切換成移動(dòng)端頁(yè)面吉拳，此時(shí)按F5刷新一下，然后把網(wǎng)址復(fù)制下來(lái)
打開(kāi)開(kāi)發(fā)者工具軟件适揉，點(diǎn)擊 文件 -> 新建 -> 項(xiàng)目
選擇 Wap2App留攒，填寫項(xiàng)目名稱并將剛剛復(fù)制的網(wǎng)址粘貼進(jìn)去，模板選擇默認(rèn)模板嫉嘀，然后點(diǎn)擊創(chuàng)建
右下角會(huì)提示項(xiàng)目創(chuàng)建成功炼邀，此時(shí)我們點(diǎn)擊打開(kāi) manifest.json 文件進(jìn)行App配置
點(diǎn)擊 圖標(biāo)配置 ，上傳1024px*1024px的 png格式 圖片作為App圖標(biāo)剪侮，然后點(diǎn)擊 自動(dòng)生成所有圖標(biāo)并替換
選擇我們的項(xiàng)目拭宁，點(diǎn)擊菜單欄中的 發(fā)行，選擇 App云端打包 瓣俯，ios勾選 越獄包杰标，Android勾選 使用DCloud公用證書，點(diǎn)擊打包
等待云端打包彩匕，結(jié)果可通過(guò) 控制臺(tái) 獲取
打包成功后腔剂，控制臺(tái)給出下載地址
總結(jié)
由此，我們成功完成了任務(wù)推掸，使用Hbuilder快速生成了一款WebApp桶蝎。是不是感覺(jué)很簡(jiǎn)單呢驻仅！
如果你還想了解更多信息谅畅，請(qǐng)?jiān)L問(wèn)官方文檔：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
