webapp打包为Android的apk包的一种方法

简介: webapp打包为Android的apk包的一种方法

开发了个纯web的app小demo,想着最终集成到微信公众号上做个小功能,并测试下如何跨平台的运行在Android上。


关于如何打包为Android的安装包,总结了下其中的一种方法,使用cordova打包为Android的apk安装包。


先看下在电脑web浏览器上的运行效果:



首先需要安装cordova。


假设已经具备的nodejs是环境,可以执行npm下载安装。


npm install -g cordova


npm默认的下载有点儿慢,更改为淘宝的镜像源,方法如下。


npm config set registry https://registry.npm.taobao.org


还可以使用yarn安装 cordova。yarn功能和npm差不多,但yarn更快,更稳定和好用。网上可以查资料比较npm和yarn区别了解下。其中yarn的一个优点是更稳定,npm经常安装失败的错误,且yarn下载过的包下次在yarn install不会重复下载相同的包。


言归正传,


命令行下输入:


1.cordova create  hello com.example.hello demo


hello为项目的根目录名,后面的为应用的包名,最后的demo为应用的名字。


cordova项目页面文件在生成的项目目录hello中的www目录中,放入对应文件。



把你的webapp的dist打包好的内容放到www目录里。替换原来原有的内容。



2.命令符进入到cordova项目www目录中,添加browser平台 cordova platform add browser (浏览器运行)


3. 浏览器运行  cordova run


4.打包apk安卓运行,生成的安卓包


cordova platform add android


cordova build android


在这步之前,先检查下环境是否ok.否则打包肯定是失败的。


输入cordova requirements,会自动检测打包环境是否就绪。



最后看到BUILD SUCCESSFUL就是打包成功了。体积挺小的。我的这个才1.5M。


试了下安装到机器上, adb install  ./app-debug.apk 完美运行。


相关文章
|
3月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
191 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
|
10月前
|
移动开发 安全 Java
Android历史版本与APK文件结构
通过以上内容,您可以全面了解Android的历史版本及其主要特性,同时掌握APK文件的结构和各部分的作用。这些知识对于理解Android应用的开发和发布过程非常重要,也有助于在实际开发中进行高效的应用管理和优化。希望这些内容对您的学习和工作有所帮助。
994 83
|
9月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
562 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
10月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
289 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
11月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
902 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
11月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
340 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
12月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
1142 11
|
移动开发 JavaScript 前端开发
用开发本地tcpip程序的思路开发webapp
本文关键字:the headless cms,b/s web to c/s web, headless webapp backend.
550 0
用开发本地tcpip程序的思路开发webapp
|
Web App开发 监控 Serverless
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
6000 0
|
Web App开发 JavaScript 测试技术
手机端webApp开发本地调试环境搭建
背景 手机端WebApp开发阶段,用chrome devtools模拟手机设备,很多兼容性问题不能提前发现。考虑到很多同学在开发时不便经常发版,方便设备可通过ip地址直接在移动端调试,提前发现问题,且不用发版到 test/pre 环境。
1951 0