文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Cordova将您的前端JavaScript应用打包成手机原生应用

2023-06-05 02:59

关注

假设我用JavaScript和HTML开发了一个前端应用,我想把该应用打包成能直接在手机上安装和运行(不通过浏览器)的原生应用,例如像下面这样。对应用的用户来说,他们得到的用户体验和真正的用Android Studio或者XCode开发的原生应用完全一致。

这是怎么做到的?

使用Cordova将您的前端JavaScript应用打包成手机原生应用

答案是使用Apache的开源框架,Cordova。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

以Android框架为例,Cordova能将您的前端应用里的JavaScript和HTML资源打包成Android原生的apk文件,可以直接在安卓手机上安装。运行时,这些JavaScript和HTML直接运行在Cordova提供的一个嵌入式的WebView控件里,对于手机用户来说,他们对此毫不知情,以为自己使用的是手机原生应用。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

下面就跟着我一步一步来使用Cordova打包您的前端项目吧。

在电脑上安装nodejs,把安装后的目录加入到Path环境变量中去。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

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

使用Cordova将您的前端JavaScript应用打包成手机原生应用

创建一个新的文件夹,然后进入该文件夹,创建一个新的Cordova项目。命令行:

cordova create JerryUI5HelloWorld

使用Cordova将您的前端JavaScript应用打包成手机原生应用

于是一个新的Cordova项目被自动创建出来了。里面包含很多子文件夹。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

Platforms文件夹是空的,因为此时我们尚未添加该Cordova项目支持的移动平台。

假设我们想打包成一个可以安装到Android平台的应用,那么得为该Cordova项目添加对Android平台的支持。使用命令行添加:cordova platform add android

使用Cordova将您的前端JavaScript应用打包成手机原生应用

命令行执行完毕后,我们敬如platforms文件夹,发现多了一个android文件夹,里面多出很多文件夹和资源。这些自动生成的东西都是最后打包生成安卓应用APK文件所必须的。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

如果一切正常,我们会得到下面的目录结果。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

www文件夹下有个自动生成的index.html文件。我们用命令行cordova prepare, 这个index.html会自动被拷贝到文件夹platformsandroidassetswww下面。这揭示了Cordova使用的一个最佳实践:我们所有的前端开发,都是直接在Cordova项目文件根目录的www文件夹内进行。开发结束后,使用cordova prepare,根目录的www文件夹里的资源会自动被拷贝到该项目支持的移动平台对应的文件夹内,在我的例子里是platformsandroidassetswww。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

一切就绪了。现在使用命令行cordova compile进行打包,安卓应用的APK文件就生成在文件夹platforms/android/build/output/apk里了。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

注意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。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

我没有选择安装庞大的Android Studio,而是下载了gradle的二进制版本,将其加入到Path环境变量中即可。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

将APK安装到您的手机上,执行,您会看到下列这个默认的界面。这其实是Cordova项目创建后生成的缺省的index.html打包安装到手机后运行的效果。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

剩下的事情就很容易了,把您的前端应用的所有资源全部拷贝到Cordova项目文件根目录下的www文件夹里,然后执行cordova prepare, 将这些资源自动同步到文件夹platformsandroidassetswww下面,再次执行命令行cordova compile重新生成APK文件即可。

如果没有Android手机,也可以用Android Studio里提供的模拟器来测试。

在Android Virtual Device Manager里创建一个新的虚拟设备:

使用Cordova将您的前端JavaScript应用打包成手机原生应用

然后使用命令行将cordova compile生成的APK文件安装到模拟器上:

adb install j.apk

使用Cordova将您的前端JavaScript应用打包成手机原生应用

现在就能在Android模拟器里使用您的前端应用通过Cordova打包生成的应用了。

使用Cordova将您的前端JavaScript应用打包成手机原生应用

使用Cordova将您的前端JavaScript应用打包成手机原生应用

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯