HBuilderX將React移動(dòng)端項(xiàng)目打包成apk，并在模擬器進(jìn)行展示
目前使用React技術(shù)棧開發(fā)的項(xiàng)目很多，很多同學(xué)想著把React開發(fā)好的移動(dòng)端項(xiàng)目通過(guò)HBuilderX把項(xiàng)目打包成apk安裝在手機(jī)或者模擬器上進(jìn)行測(cè)試。目前網(wǎng)上有很多把Vue項(xiàng)目通過(guò)HBuilderX把項(xiàng)目打包成apk的文章，對(duì)于React移動(dòng)端項(xiàng)目打包成apk文章非常少，這就是寫本次文章的初衷，希望該文章能夠幫助各位同學(xué)，對(duì)同學(xué)今后的學(xué)習(xí)和測(cè)試有所幫助。
一、項(xiàng)目打包前配置和打包
1、項(xiàng)目打包前配置
項(xiàng)目開發(fā)完畢后，為了保證開發(fā)好的項(xiàng)目打包之后能夠正常顯示：
①、在項(xiàng)目打包之前需要在package.json文件中添加 "homepage": "./"（只要在package.json文件中添加"homepage": "./"打包好的項(xiàng)目就能夠正常訪問到靜態(tài)資源,避免項(xiàng)目打開后出現(xiàn)空白頁(yè)面。
②、項(xiàng)目中的接口一定要使用在線接口，不要使用本地接口，要不然打包出來(lái)的項(xiàng)目仍然是空白頁(yè)**（非常重要）
2、項(xiàng)目打包
以上配置和檢查完之后，在終端中找到項(xiàng)目根目錄，運(yùn)行打包命令 npm run build
npm run build命令執(zhí)行完之后，項(xiàng)目根目錄中就生成一個(gè)build目錄。
build目錄的文件就是生成apk必要文件
二、使用HBuilderX把打包好的項(xiàng)目打包成apk文件
0、HBuilderX下載及注冊(cè)賬號(hào)
HBuilderX下載地址：https://www.dcloud.io/hbuilderx.html
下載之后，打開HBuilderX，注冊(cè)登錄賬號(hào)，注冊(cè)之后進(jìn)行登錄
1、使用HBuilderX新建APP項(xiàng)目
創(chuàng)建完畢后的APP項(xiàng)目目錄如下所示：
css、img、js 目錄是靜態(tài)目錄，項(xiàng)目打包后的靜態(tài)資源可以放到對(duì)應(yīng)的這些目錄中，unpackage目錄是今后打包成生成apk的目錄，里面會(huì)存放跟生成apk相關(guān)的文件，index.html文件是 首頁(yè)啟動(dòng)文件，運(yùn)行打包命令時(shí)需要在這個(gè)文件中進(jìn)行，manifest.json文件打包的配置文件里面有各項(xiàng)配置項(xiàng)。
3、把項(xiàng)目打包的文件，移動(dòng)到HBuilderX新建APP項(xiàng)目中
首先，先刪除APP項(xiàng)目中的css、img、js 目錄是靜態(tài)目錄，然后把builde目錄中，除manifest.json文件之外的所有文件，都拷貝到HBuilderX新建APP項(xiàng)目中來(lái)。以下是拷貝后的目錄結(jié)構(gòu)。
4、配置APP項(xiàng)目中manifest.json文件
雙擊項(xiàng)目目錄中的manifest.json文件，進(jìn)行如下配置：
4.1 基礎(chǔ)配置
應(yīng)用標(biāo)識(shí)（AppID）需要注冊(cè)和登錄HBuilderX才能自動(dòng)生成，如果沒有登錄，請(qǐng)點(diǎn)擊右側(cè)【重新獲取】按鈕進(jìn)行登錄，會(huì)自動(dòng)生成應(yīng)用標(biāo)識(shí)（AppID）碼。
4.2 圖標(biāo)配置
圖標(biāo)配置中，選擇【瀏覽…】按鈕，選擇項(xiàng)目打包中的logo圖標(biāo)或者其它小圖標(biāo)即可
然后點(diǎn)擊【自動(dòng)生成所有圖標(biāo)并替換】按鈕，進(jìn)行自動(dòng)生成不同大小的圖標(biāo)。
4.3 啟動(dòng)界面配置
4.4 模塊配置
取消勾選 Contact（通訊錄）
其余其它配置，均不需要再進(jìn)行配置，如果有需要可以根據(jù)情況進(jìn)行配置即可。
5、使用HBuilderX試運(yùn)行打包后的項(xiàng)目
雙擊目錄中index.html文件，然后點(diǎn)擊菜單欄中 【運(yùn)行】--> 【運(yùn)行到瀏覽器】--> 【chrome】，檢查下項(xiàng)目是否能夠正常顯示。
項(xiàng)目打開效果如下所示：
項(xiàng)目如果能夠正常打開，說(shuō)明項(xiàng)目配置目前到此沒有問題，如果項(xiàng)目打開是空白頁(yè)面，仍需要再次檢查 第一部分中，項(xiàng)目打包前和項(xiàng)目打包的配置。
6、使用HBuilderX打包成APK文件
6.1 點(diǎn)擊菜單欄中 【發(fā)行】--> 【原生App-云打包】，打包生成APK文件
6.2 選擇【使用公共測(cè)試證書】，然后點(diǎn)擊【打包】
6.3 打包校驗(yàn)中選擇【繼續(xù)打包】
在控制臺(tái)中顯示打包狀態(tài)，隊(duì)列中，說(shuō)明正在打包，在這里我們需要稍等片刻。
顯示下圖所示內(nèi)容，說(shuō)明打包成功了。
點(diǎn)擊【打開所在目錄】
在apk欄中右擊，選擇 【打開文件所在目錄】
能夠看到我們打包好的apk文件
三、使用模擬器展示打包好的apk文件
1、下載和安裝模擬器
市場(chǎng)上模擬器很多，在這里我選擇的是mumu模擬器，大家也可以選擇其它模擬器也是可以的。
mumu模擬器下載地址：https://mumu.163.com/mac/index.html
下載后，大家默認(rèn)安裝即可，在此就不再說(shuō)明安裝步驟了。??
2、在模擬器中展示apk文件
啟動(dòng)模擬器之后，把生成的apk文件，直接拖動(dòng)到模擬器中，然后再雙擊打開。
雙擊打開后如下所示：
至此，我們就可以再模擬器中進(jìn)行APP測(cè)試了。over！
