一、環境搭建

1.安裝HBuilder

HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。 [1] HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。

它基於Eclipse，所以順其自然地相容了Eclipse的外掛。

利用HBuilder可以快速的搭建與H5+應用和原生APP進行互動

從官網下載 HBuilder

點選下載即可下載安裝

2.安裝Java環境

由於HBuilder是基於java開發的所以需要安裝java JDK

安裝 java JDK

具體參考以上步驟即可安裝

3.新建H5+應用

1.檔案——>2.新建——>3.移動APP——>4.選擇模板Hello H5+

以上操作完成後就可以生成一個帶有H5+全部互動案例的App應用了

可以簡單的看下生成的的H5+應用的結構

aduio目錄存放的是音訊資源、css目錄存放css檔案、doc資料夾存放Html文件頁面、img目錄存放圖片資源、js目錄存放js檔案、plus目錄就是頁面Html檔案所在了、upackage存放打包後的檔案

index.html主頁面(入口)

manifest.json包含這個應用的所有配置資訊，包括指定主頁面，打包app名稱。。。等配置

其實說白了，我們看到的生成的這個H5+專案就是一個前端頁面

其實我們利用HBuilder開發跨平臺應用只需要像開發前端一樣開發HTML頁面就可以了，打包釋出時HBuilder會全部幫我們完成。

4.除錯H5+應用

將手機連線電腦，手機必須開啟 開發者模式

手機連線電腦後

選擇 1.執行——>2.手機上執行

也可以使用模擬器執行

具體參閱 如何安裝配置手機模擬器

5.釋出H5+應用

可以將在HBuilder中將H5+應用發行為Android應用或IOS應用

選擇 1.發行–>2.發行原生安裝包

將相關引數填寫好，就可以進行雲端打包了。

可以檢視打包狀態

打包完畢後，下載到手機安裝即可。