使用HBuilder開發混合App：

Hbuilder：是一個在線打包工具，不需要在本地配置開發環境；直接將做好的網站，通過一些簡單的操作，就能在線打包為一個App；

混合APP開發常見技術：Html5+、ReactNative、Weex、Ionic；這里使用HTML5+ 開發混合APP，它是一個強大的產業聯盟。下面是使用HTML5+結合HBuilder開發混合app的步驟：

1.打開HBuilder編輯器，找到：文件–>新建–>移動App點擊，如圖：

2.在彈出的配置中配置相關信息后點擊完成（需要注意的是下面應用名稱即項目名稱，實際顯示在移動端桌面的app名稱并非這里設置，但是建議與這里名稱一致），如圖：

3.此時會在桌面看到testapp，之后在HBuilder中繼續找到testapp項目，如圖：

4.如果在第三步驟結束后無法打開testapp項目文件夾，就需要打開項目管理器（HBuilder編輯器頂部–>跳轉–>跳轉到項目管理器），此時會在工作區看到testapp項目，如圖：

5.在項目管理器中雙擊打開testapp項目文件夾，并雙擊打開manifest.json文件，此時會看到一個配置信息的彈框，這里配置信息分多個頁面配置，首先看 應用信息 配置頁面如圖：

圖標配置：

啟動圖配置：

6.如果是一個簡單的應用，后面的配置項沒有必要再進行配置；此時將testapp中的index.html刪除，并將已經開發好的web頁面復制粘貼到本項目中（注意web頁面各文件引用資源路徑問題），如下圖將web項目中的index.html和main.js移動到testapp項目中：

7.如果上面步驟都順利的話，需要保存manifest.json文件（底部代碼視圖 Ctrl + S，如果忘記保存也沒事，后面發行時會有彈框提示，點擊確認即可）；現在就可以利用HBuilder的相關功能進行打包發行（特別強調：如果項目存在安全問題，不建議使用HBuilder打包發行，因為自己項目源代碼會發布在HBuilder平臺上，雖然明確說明不會泄露源碼，但還是不建議這樣做），下面將一個無安全隱患的testapp發行打包，如圖：

8.點擊完云打包后會彈出打包相關選項（忘記保存manifest.json文件會多彈一個保存manifest.json文件的彈框），勾選配置項如圖：

9.點擊打包后，會彈出一個詢問是否有權限漏選彈框，根據實際情況點擊；之后會進行打包（第一次打包可能會彈出認證的情況，根據彈框提示網址進入網站，上傳身份證等資料實名認證即可），認證成功的情況下，繼續打包可看到如下：

10.此時根據提示拿到安裝包，如：

11.移動app安裝包實際是在項目文件夾unpackage下release文件夾中，此時將這個后綴為apk的文件發送到手機等設備安裝（通過QQ等工具可發送到手機），如下圖為后綴為apk文件位置：

12.安裝完成后效果如下圖：

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的混合App开发，HBuilder开发移动App的全部內容，希望文章能夠幫你解決所遇到的問題。

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