添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

最近在做H5的开发,虽然只是做页面,但也想学习一下整个流程的开发,也想自己弄个APP玩儿一下然后就搜罗了一下文档。

APP的开发模式:

1、原生APP  2、网页APP(webapp)  3、H5 app(混合APP)

前两者就不多说了,我们要弄的就是H5,以前我一直以为H5开发就是HTML5开发,其实不然,这里引用阮一峰老师的文章:

H5 这个词,可以理解成就是混合 App 模型,只不过它特指混合 App 的前端部分。 因为混合 App 的前端就是 HTML5 网页,所以简称 H5。这个词是国内独有的,基本上都是前端程序员在用,国外不用这个词,就直接叫混合 App。

真正理解 H5 开发,需要先搞清楚什么是原生 App、什么是 Web App,因为混合 App 是在它们的基础上诞生的。”

具体可以查看 阮一峰老师的文章: H5 手机 App 开发入门:概念篇

可以这么说,将webAPP包在原生APP内,我们先在网页上开发移动端APP,然后使用打包工具打包为移动端APP(其实就是使用APP的壳子内部的浏览器,调用网页和手机API)
然后H5在我看来又分为两个开发方式:

1、内置:将所有JS/CSS/图片等静态资源全部放在包内调用,除了动态元素,全走本地静态
2、引用:只打包一个门户地址(例如百度,相当于就是一个浏览器 只不过里面只能访问我们封装的地址罢了)

开发工具:

webstorm,Android studio

环境配置(准备工作网上随便查一大堆):

JDK1.8  Android sdk gradle  node.js

JDK  Android sdk  gradle 环境配置网上一找一大堆,也 都需要配置环境变量

需要注意的是 安装Android sdk的时候,需要accepted license
打开CMD窗口移动到SDK/tools/bin/目录下
运行sdkmanager.bat --licenses
然后会出现 y/n?的提示,一路y下去就行了
完成后 在SDK目录下会生成一个licenses的目录

安装说明:

1、安装Cordova CLI

npm install -g cordova
 cordova -v   查看版本

2、创建打包项目

 cordova create myApp org.apache.cordova.myApp myApp

格式 cordova create 项目名  项目域名  项目名

3、设置打包平台

切换到创建的项目目录 安装平台版本这里我们使用安卓(买不起IOS)

cordova platform add android --save

检查设置平台情况

cordova platform ls

4、打包检查

cordova requirements


这里需要说明的是JAVA JDK Android SDK 和Gradle 是必须安装完成才行,Android target可以先不用管,target在第一次打包的时候会自动安装

5、执行打包

打包前可以先修改一下项目内的config.xml文件

<content src="https://zbox.ink/#/profile/dnf" />
<content src="./index.html" />

这个标签可以是相对路径,也可以是网页路径这就是打包好后运行的首页

cordova build android

执行命令等待打包就行了,如果你已经安装了环境变量,还是提示环境变量找不到,可能需要重启电脑(我就是,找了半天没发现问题,重启大法)
然后在执行的时候我还报错,说是accepted license没有找到,这就是上面说的 需要去执行以下accepted license

6、打包配置图标和启动图

可以参考  https://blog.csdn.net/qq_40014350/article/details/80326509

声明:以上内容若有错误,欢迎批评指正。若侵犯他人版权,请联系我。

说明: 最近在做H5的开发,虽然只是做页面,但也想学习一下整个流程的开发,也想自己弄个APP玩儿一下然后就搜罗了一下文档。APP的开发模式:1、原生APP 2、网页APP(webapp) 3、H5 app(混合APP)前两者就不多说了,我们要弄的就是H5,以前我一直以为H5开发就是HTML5开发,其实不然,这里引用阮一峰老师的文章:“H5 这个词,可以理解成就是混合...
手机APP 开发 调研 手机APP最初的形式都是基于各自平台 开发 的,也就是原生APP,我们比较熟悉的有Android、IOS、Windows Phone等。对应不同平台衍生了负责不同手机端 开发 的岗位,例如安卓 开发 ,IOS 开发 。但由于原生APP也存在一定不方便,如 开发 本高等特点,近几年有衍生出了一些新型的APP。整体上包括混合APP和跨平台APP两大类。 原生APP 开发 混合APP 开发 跨平台APP
1、用了三个星期学习了一下cordova,分别将html5 打包 apk ,加入cordova插件,创建cordova自定义插件,最后使用谷歌的开源代码写自定义插件,读取Android设备上的RS232串口(虽然是已经过时的技术了)上的IC卡里面的数据。这中间走了很多弯路,也学习到了很多东西,接下来一点点总结,希望我的记录对你有帮助。 2、首先,什么是cordova,以及其 开发 环境的搭建,网上已经有...
要将 H5 应用程序 打包 APK 文件,可以使用Ionic的命令行工具进行 打包 。以下是一些步骤: 1. 安装Ionic命令行工具和Cordova插件。可以使用以下命令安装: npm install -g ionic cordova 2. 在Ionic应用程序的根目录下运行以下命令: ionic cordova platform add android 这将为Android平台添加Cordova插件。 3. 运行以下命令来构建应用程序: ionic cordova build android --prod --release 这将构建生产版本的应用程序,并在`platforms/android/app/build/outputs/ apk /release/`目录下生 签名的 APK 文件。 4. 在 开发 人员控制台中注册并获取用于签名 APK 文件的密钥库和别名。 5. 在`platforms/android/app/build.gradle`文件中,添加以下签名配置: android { signingConfigs { release { keyAlias 'alias_name' keyPassword 'password' storeFile file('path/to/keystore') storePassword 'password' buildTypes { release { signingConfig signingConfigs.release 将`alias_name`替换为密钥库中的别名名称,将`password`替换为密钥库和别名的密码,将`path/to/keystore`替换为密钥库的文件路径。 6. 运行以下命令来生 已签名的 APK 文件: ionic cordova build android --prod --release 这将生 已签名的 APK 文件在`platforms/android/app/build/outputs/ apk /release/`目录下。 注意,使用Ionic 打包 H5 应用程序可能会导致应用程序的性能和功能方面的限制,因为移动设备的功能和浏览器不同。因此,您可能需要在构建应用程序之前测试和优化它。