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

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

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

这是怎么做到的?image.png

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

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

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

1. 在电脑上安装nodejs,把安装后的目录加入到Path环境变量中去。image.pngimage.pngimage.png4. 假设我们想打包成一个可以安装到Android平台的应用,那么得为该Cordova项目添加对Android平台的支持。使用命令行添加:cordova platform add android

image.png命令行执行完毕后,我们敬如platforms文件夹,发现多了一个android文件夹,里面多出很多文件夹和资源。这些自动生成的东西都是最后打包生成安卓应用APK文件所必须的。image.png如果一切正常,我们会得到下面的目录结果。

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

image.pngimage.png注意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。

image.pngimage.png将APK安装到您的手机上,执行,您会看到下列这个默认的界面。这其实是Cordova项目创建后生成的缺省的index.html打包安装到手机后运行的效果。image.png剩下的事情就很容易了,把您的前端应用的所有资源全部拷贝到Cordova项目文件根目录下的www文件夹里,然后执行cordova prepare, 将这些资源自动同步到文件夹platformsandroidassetswww下面,再次执行命令行cordova compile重新生成APK文件即可。


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


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

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

image.pngimage.png




相关文章
|
3月前
|
移动开发 开发框架 JavaScript
uniapp如何与原生应用进行混合开发?
uniapp如何与原生应用进行混合开发?
158 0
|
5月前
|
Web App开发 前端开发 JavaScript
用electron打包前端应用初体验
用electron打包开发桌面应用遇到的各种问题和解决办法
79 1
|
10月前
|
JavaScript 安全 Android开发
Android应用之Hybird混合开发,集成web页面的方法尝试
Android应用之Hybird混合开发,集成web页面的方法尝试
|
JavaScript 前端开发 Linux
网页多平台桌面打包工具 electron 和 electron-packager 的使用
网页多平台桌面打包工具 electron 和 electron-packager 的使用
405 0
|
Web App开发 存储 缓存
HBuiderX打包移动端项目详解
以打包vue3.0项目为例,大致分为以下几步 1. 预览打包项目 2. 打包vue项目 3. 打包App
357 0
|
JavaScript 前端开发 Linux
客户端开发(Electron)主题切换
客户端开发(Electron)主题切换
405 0
|
移动开发 前端开发 rax
weex开发android应用
weex使用简要介绍
421 0
weex开发android应用
|
前端开发 JavaScript Apache
使用Cordova将您的前端JavaScript应用打包成手机原生应用
使用Cordova将您的前端JavaScript应用打包成手机原生应用
219 0
使用Cordova将您的前端JavaScript应用打包成手机原生应用
|
移动开发 JSON JavaScript
Day 10: PhoneGap —— 开发手机应用如此简单
我们发现了比较有趣的系列文章《30天学习30种新技术》,准备翻译,一天一篇更新,年终礼包。下面是第10天的内容。 今天又是“30天学习30种新技术”的一天。长期以来,我觉得手机开发很恐怖,大部分应用都没有商业模式。事实上,编写手机应用从来都不能让我兴奋。然而,考虑到手机领域的飞速发展,以及更多的人通过手机而不是桌面访问互联网,我决定尝试下手机开发。我的手机开发之旅将从PhoneGap 起步。
485 0
Day 10: PhoneGap —— 开发手机应用如此简单
|
Java C# 开发工具
C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码
原文:C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1537 0

相关实验场景

更多