发布时间:2024-11-10 15:01
接着上面两节,把做成的h5小应用打包成android的app放置在手机上看看效果。
如何把一个h5应用打包成android的app? 使用Cordova就是一种简单不错的办法。
当然也有其他的一些办法如使用HBuilderX这一强大的IDE工具,里面支持打包Android或ios的app,微信小程序等。或者一些第三方的打包平台,也支持把h5的应用打包成app,但有可能是收费的。
使用HBuilderX的话若开发体系都是基于HBuilder则是不错的选择,但太依赖于HBuilder。而使用Cordova打包的话,则依赖较少,比较简单。无论是网页的h5或者使用vue框架等打包的单页应用,都可以使用Cordova命令行工具快速的打包。
Cordova简介:
Cordova官网:Cordova中文网
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能。应用的实现是通过web页面,默认的本地文件名称是是index.html,这个本地文件应用CSS,JavaScript,图片,媒体文件和其他运行需要的资源。应用执行在原生应用包装的WebView中。
简单来说就是:使用Cordova这个框架可以让你支持混合应用开发,把h5的web应用打包成各种平台上能跑的类似原生的应用体验。且它还提供了一些访问平台设备的插件或api,方便使用js访问到硬件功能。
为啥要用Cordova?
混合应用开发快啊,且一次开发多端部署。BAT大厂目前采用的都是这种技术,原生开发虽然性能和体验是好,但是无法跨平台,维护和开发成本过高。Hybrid App(混合模式移动应用)兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”所以很流行。使用Cordova,开发者可以用标准WEB技术HTML5、CSS3、JavaScript,来开发跨平台App。且一些原生才有的一些特性,cordova提供了一些符合标准的API绑定去访问每个设备的功能。
Cordova的命令行运行在nodejs上面并且可以通过npm安装。 根据 平台具体指导安装相应平台的依赖。打开命令提示符或终端,然后键入npm install -g cordova
.安装。
安装完成后,使用Cordova -v可以查看下是否安装成功。
1.第一步,创建demo模板应用。
cordova create hello com.example.hello demo
(文件夹名称hello,包名com.example.hello,应用名demo)
2.第二步,在项目页面文件在www中,放入对应文件,直接把打包后dist里的文件拷贝进去替换即可。
3.第三步,命令符进入到Cordova项目中,添加browser平台 cordova platform add browser
4. 第四步,浏览器运行 cordova run :
cordova run
5.第五步,打包apk安卓运行,生成的安卓包
cordova platform add android
(前提条件:电脑上已有jdk和android sdk等环境)
cordova build android
提示这个,说明环境未就绪,根据提示,解决下这个问题。
环境变量添加 ANDROID_HOME,新建系统变量 ANDROID_HOME
变量名:ANDROID_HOME 变量值:D:\Android\SDK
添加Path变量,变量值:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
gradle也需要加入到环境变量,Gradle是Android Studio用来构建和管理项目的一个插件。这上面的报错主要就是找不到gradle。
一般来说Android Studio默认下载Gradle包的路径为:C:\Users\用户名\ .gradle\wrapper\dists
如我的是:C:\Users\Administrator\.gradle\wrapper\dists
系统变量 中变量名输入 GRADLE_HOME
然后继续在下方的系统变量中找到Path变量,点击编辑-编辑文本,在Path的变量值后面添加;%GRADLE_HOME%\bin
添加环境变量成功后,打开dos命令行窗口,输入gredle -v显示版本信息,则说明配置正常。
最后,已经接近成功啦,
执行cordova build android
生成的app-debug.apk竟只有1.6M,够小够轻量。
安装到手机或设备上成功流畅运行。
运行效果截图:
最后打包完成后可能遇到的跨域问题,缓存问题,网上都有解决方案,可自行百度。比如跳转路由增加时间戳,可以有效解决缓存问题,设置代理,解决跨域问题。