整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

2个将HTML5打包成app的方法

来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。那么,有什么办法,既可以使用HTMl5开发应 用,又可以将其简单封装成APK文件呢?

一、Android SDK中的WebView

1.在要Activity中实例化WebView组件:WebView webView = new WebView(this);

2.调用WebView的loadUrl()方法,设置WevView要显示的网页:

  互联网用:webView.loadUrl("http://www.qietu.com");

  本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets 文件中

3.调用Activity的setContentView( )方法来显示网页视图

4.用WebView点链接看了很多页以后为了让WebView支持回退功能,需要覆盖覆盖Activity类的onKeyDown()方法,如果不做任何处理,点击系统回退剪键,整个浏览器会调用finish()而结束自身,而不是回退到上一页面

5.需要在AndroidManifest.xml文件中添加权限,否则会出现Web page not available错误。

  <uses-permission android:name="android.permission.INTERNET" />

缺点:如果是载入的是普通网页,没有什么问题,但如果是html5,封装后,在android2.3以上才能正常访问,android2.2及以下,SDK中的WebView还没完全支持HTML5

下面是具体例子:

MainActivity.java

    package com.android.webview.activity;  

    import android.app.Activity;  

    import android.os.Bundle;  

    import android.view.KeyEvent;  

    import android.webkit.WebView;  

    public class MainActivity extends Activity {  

        private WebView webview;  

        @Override

        public void onCreate(Bundle savedInstanceState) {  

            super.onCreate(savedInstanceState);  

            //实例化WebView对象  

            webview = new WebView(this);  

            //设置WebView属性,能够执行Javascript脚本  

            webview.getSettings().setJavaScriptEnabled(true);  

            //加载需要显示的网页  

            webview.loadUrl("http://www.qietu.com/");  

            //设置Web视图  

            setContentView(webview);  

        }  

        @Override

        //设置回退  

        //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法  

        public boolean onKeyDown(int keyCode, KeyEvent event) {  

            if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {  

                webview.goBack(); //goBack()表示返回WebView的上一页面  

                return true;  

            }  

            return false;  

    }

在AndroidManifest.xml文件中添加权限

    <?xml version="1.0" encoding="utf-8"?>

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"

          package="com.android.webview.activity"

          android:versionCode="1"

          android:versionName="1.0">

        <uses-sdk android:minSdkVersion="10" />

        <application android:icon="@drawable/icon" android:label="@string/app_name">

            <activity android:name=".MainActivity"

                      android:label="@string/app_name">

                <intent-filter>

                    <action android:name="android.intent.action.MAIN" />

                    <category android:name="android.intent.category.LAUNCHER" />

                </intent-filter>

            </activity>

        </application>

        <uses-permission android:name="android.permission.INTERNET"/>

    </manifest>

二、使用PhoneGap

    PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如 iPhone的iPhone SDK,Android的Android SDK等,

详细方法请见:http://phonegap.com/start#android

优点:在Eclipse中加入SDK,编程自由,完美适应不同设备屏幕大小,适合高手使用。

缺点:没有使用布局,直接加载网页,不能添加广告。

----------------

切图网(qietu.com)最早将psd转html服务模式带到国内,并首个提供响应式、webapp前端开发的公司。专注web前端开发技术,关注用户体验,加我们公众微信账号:qietuwang(长按复制)

们已经介绍了如何创建项目和搭建打包apk所需的环境,不清楚的可以看前两篇文章,现在来进行打包apk文件的操作

项目根目录内容

项目初始化创建时,项目文件夹内容

运行ionic serve命令后,将自动生成文件(不用运行此命令也能进行打包)


项目添加安卓平台

打开cmd,进入项目根目录,在根目录输入ionic cordova platform add android回车,为项目添加安卓平台,由于网络原因可能会添加不上无限转圈,正常情况五分钟之内即可,超时请换一个时间再试,创建项目后只需添加一次平台,后续可直接打包(build)

出现下图所示内容即为添加安卓平台成功,可以用ionic cordova platform add android@6.0.0命令来指定安卓平台版本,目前默认添加的是6.2.3版本

添加平台完成后,在项目中会自动生成platforms、plugins文件夹

打包apk应用程序

输入ionic cordova build android --prod --release回车进行打包即可,红框中的路径即为打包后apk文件所在位置

签名打包apk应用程序

以上供测试时使用,如果你想把你的应用程序上传到谷歌商店或其他应用商店,你必须签署APK文件。要做到这一点,你必须创建一个新的证书。由于这里需要用到java的keytool,请按照第二篇文章配置好java环境。

  • 输入keytool -genkey -v -keystore [my-release-key].jks -keyalg RSA -keysize 2048 -validity 10000 -alias [my-alias]([my-release-key]:名称,[my-alias]:别名)回车,

  • 输入秘钥口令(自定义,相当于注册账号时的密码,6位以上)回车,再输入一次回车

  • 按提示输入,可任意填写,填写一个按一下回车,最好截图保留信息

  • 询问是否正确,输入是回车

  • 继续回车,就会在改目录下生成一个新的证书,如下图所示

  • 把打包好的apk文件和证书放到同一目录,输入jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [my-release-key.jks] [android-release-unsigned.apk] [my-alias]([my-release-key.jks]:证书文件,[android-release-unsigned.apk]:未签名apk文件,[my-alias]:别名)回车,输入之前的秘钥口令即可为apk签名

最后放上安装完成后的效果图

实用命令

ionic cordova platform add android(添加安卓平台)

ionic cordova build android --prod --release(打包apk文件)

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias(新建证书)

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias(签名apk)

、 准备工作

1、安装JDK,下载地址(可能需要一个oracle账号,大家百度一下或者自行注册一个就行。尽可能选择8或者11,这两个是长期版本)Java SE | Oracle Technology Network | Oracle

2、安装NodeJS,下载地址Node.js (nodejs.org)

3、下载安装Android Studio,下载地址Download Android Studio and SDK tools | Android Developers (google.cn)

4、下载安装HbuilderX HBuilderX-高效极客技巧 (dcloud.io)

5、申请DCloud开发者账号,后期会用到

6、下载离线工程:App离线打包SDK (dcloud.net.cn) ,后期会用到


二、 正式开发及配置

1、 在HbuilderX中新建一个uni-app项目,找到manifset.json这个文件,需要修改的地方

基础配置:有一个AppID,如果没有点击重新获取,或者去DCloud开发者中心创建一个应用后填写此处(源码编辑)

模块配置:勾选需要的模块,一般来说需要什么勾选什么即可

权限配置:关于这一块,大家需要去参考这篇文章(https://ask.dcloud.net.cn/article/36982)

2、去掉HTML5+ Runtime版本提示框,在源码视图中添加以下内容

3、附加:如果是要打包成AAB上传谷歌商店你需要勾选以下内容,同时需要编辑生成的json文件

OK,到这里基础配置基本结束开始你的业务编写即可。

三、 离线打包工程配置及打包

1、 打包所需要的资源:在HbuilderX中,发行=》原生APP本地打包=》生成本地打包APP资源,将生成后的目录(**/APP_ID/www/**)拷贝(选择到APP_ID这个文件夹即可)

2、 解压离线工程至某个目录下,即:**/Android-SDK3.2.12.81096_20211101/HBuilder-Integrate-AS,打开Android Studio,导入此项目(HBuilder-Integrate-AS)

3、 修改simpleDemo/build.gradle配置(密钥签名请跳转第四步骤)

4、 修改simpleDemo/main/AndroidManifest.xml配置,如果是特殊的权限,需要在这个文件中添加对应的权限配置(android key请跳转第四步骤)

5、 修改simpleDemo/ main/res/values/strings.xml配置

6、 修改simpleDemo/ main/res/drawable配置,替换图标LOGO、开屏页

7、 修改simpleDemo/ main/assets/data/dcloud_control.xml配置

8、 修改simpleDemo/ main/assets/data/dcloud_properties.xml配置(去掉HTML5+ Runtime oauth提示)

至此,离线打包项目配置完毕,然后执行:Build=》Build Bundle(s) / APK(s)=》Build APK(s)。打包完毕

四、 签名生成及配置

签名生成:

签名方案一:在Android Studio中依次按照以下截图即可(我在windows中遇到了无法签名的情况,Mac正常,如果你也是,请看方案二)

签名方案二:参考文章(Android平台签名证书(.keystore)生成指南 - DCloud问答

)解决windows无法生成签名的情况,Mac可以直接跳过步骤1

注:如果是windows10,请勿使用cmd,请在系统图标即WIN上右键,运行powershell(管理员),用这个命令窗执行以下命令,否则无效。

1、设置jdk变量 set PATH=%PATH%;"C:\Program Files\Java\jre1.8.0_201\bin"(路径根据jdk安装目录改变,但是必须指定到jre中去) 
2、生成签名文件(如果不是在项目目录下生成的,需要将生成的文件拷贝到simpleDemo目录下)
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore 
3、查看签名信息 keytool -list -v -keystore test.keystore   Enter keystore password: //输入密码,回车 
4、复制以下两个信息 Alias name + SHA1

android key生成:

进入dcloud开发者后台(https://dev.dcloud.net.cn/)登录自己的账号

应用管理=》我创建的应用=》应用列表=》点击应用名称=》离线打包KEY管理=》填写保存后,复制android对应的值即可