假設(shè)我用JavaScript和HTML開發(fā)了一個前端應(yīng)用，我想把該應(yīng)用打包成能直接在手機(jī)上安裝和運(yùn)行（不通過瀏覽器）的原生應(yīng)用，例如像下面這樣。對應(yīng)用的用戶來說，他們得到的用戶體驗和真正的用Android Studio或者XCode開發(fā)的原生應(yīng)用完全一致。

鎮(zhèn)遠(yuǎn)網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,鎮(zhèn)遠(yuǎn)網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為鎮(zhèn)遠(yuǎn)超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的鎮(zhèn)遠(yuǎn)做網(wǎng)站的公司定做！

這是怎么做到的？

答案是使用Apache的開源框架，Cordova。

以Android框架為例，Cordova能將您的前端應(yīng)用里的JavaScript和HTML資源打包成Android原生的apk文件，可以直接在安卓手機(jī)上安裝。運(yùn)行時，這些JavaScript和HTML直接運(yùn)行在Cordova提供的一個嵌入式的WebView控件里，對于手機(jī)用戶來說，他們對此毫不知情，以為自己使用的是手機(jī)原生應(yīng)用。

下面就跟著我一步一步來使用Cordova打包您的前端項目吧。

1. 在電腦上安裝nodejs，把安裝后的目錄加入到Path環(huán)境變量中去。

2. 使用nodejs的包管理器npm安裝Cordova。命令行：npm -g install cordova:

3. 創(chuàng)建一個新的文件夾，然后進(jìn)入該文件夾，創(chuàng)建一個新的Cordova項目。命令行：

cordova create JerryUI5HelloWorld

于是一個新的Cordova項目被自動創(chuàng)建出來了。里面包含很多子文件夾。

Platforms文件夾是空的，因為此時我們尚未添加該Cordova項目支持的移動平臺。

4. 假設(shè)我們想打包成一個可以安裝到Android平臺的應(yīng)用，那么得為該Cordova項目添加對Android平臺的支持。使用命令行添加：cordova platform add android

命令行執(zhí)行完畢后，我們敬如platforms文件夾，發(fā)現(xiàn)多了一個android文件夾，里面多出很多文件夾和資源。這些自動生成的東西都是最后打包生成安卓應(yīng)用APK文件所必須的。

如果一切正常，我們會得到下面的目錄結(jié)果。

5. www文件夾下有個自動生成的index.html文件。我們用命令行cordova prepare, 這個index.html會自動被拷貝到文件夾platformsandroidassetswww下面。這揭示了Cordova使用的一個最佳實踐：我們所有的前端開發(fā)，都是直接在Cordova項目文件根目錄的www文件夾內(nèi)進(jìn)行。開發(fā)結(jié)束后，使用cordova prepare，根目錄的www文件夾里的資源會自動被拷貝到該項目支持的移動平臺對應(yīng)的文件夾內(nèi)，在我的例子里是platformsandroidassetswww。

一切就緒了?，F(xiàn)在使用命令行cordova compile進(jìn)行打包，安卓應(yīng)用的APK文件就生成在文件夾platforms/android/build/output/apk里了。

注意cordova compile這個命令需要您本地安裝Gradle，如果安裝，會遇到下列錯誤消息：

Error: Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio。

我沒有選擇安裝龐大的Android Studio，而是下載了gradle的二進(jìn)制版本，將其加入到Path環(huán)境變量中即可。

將APK安裝到您的手機(jī)上，執(zhí)行，您會看到下列這個默認(rèn)的界面。這其實是Cordova項目創(chuàng)建后生成的缺省的index.html打包安裝到手機(jī)后運(yùn)行的效果。

剩下的事情就很容易了，把您的前端應(yīng)用的所有資源全部拷貝到Cordova項目文件根目錄下的www文件夾里，然后執(zhí)行cordova prepare, 將這些資源自動同步到文件夾platformsandroidassetswww下面，再次執(zhí)行命令行cordova compile重新生成APK文件即可。

如果沒有Android手機(jī)，也可以用Android Studio里提供的模擬器來測試。

在Android Virtual Device Manager里創(chuàng)建一個新的虛擬設(shè)備：

然后使用命令行將cordova compile生成的APK文件安裝到模擬器上：

adb install j.apk

現(xiàn)在就能在Android模擬器里使用您的前端應(yīng)用通過Cordova打包生成的應(yīng)用了。

名稱欄目：使用Cordova將您的前端JavaScript應(yīng)用打包成手機(jī)原生應(yīng)用
本文地址：http://aaarwkj.com/article46/igjgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站收錄、微信公眾號、品牌網(wǎng)站建設(shè)、微信小程序、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)