将网站封装成APP安卓应用

将网站封装成APP安卓应用我接触到的目前有三种方法，构建方法和难度也是逐步提升，不过，世上无难事，只怕有心人，干就完了，奥里给！

法一：利用一个木函封装

讲真，这个方法是我目前接触到最快，最省力，而且最高效的做法，速度起飞，快的一批~~不信？展示给你看不就完啦~

1.1 手机应用商店搜索一个木函应用。

1.2 找到下载并安装。

1.3 打开，依次 全部应用>>网页转应用。

1.4 填写好相关信息。

1.5 打包构建安装即可。

1.6 诺，可以正常使用啦！

法二：利用HBuilderX构建

相对于法一来说，这个要稍微进阶一点，我们要借用HBuilderX把文件进行打包构建。既然然说到这里了，不得不插一嘴谈谈uni-app，据说这个特别厉害，官方文档是这么解释的：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

老牛逼了！改天着手研究研究！好了，让我们来开始转换。

2.1 新建一个5+App项目

如果你想了解什么是5+App项目，可以直接去阅读官方文档。

我们填写好项目名字和路径，项目会自动生成相关文件，文件各个内容如下所示。

这里的unpackage文件夹中，放的是一些不用打包编译的文件，manifest则是配置项了。删除css\img\js\index.html ，把自己的项目文件复制过来，配置好相关权限，然后选择云打包，当然，本地打包也不是不可以，看你自己使用习惯了。

然后我么点击发行——原生APP-云打包。

2.2 证书生成打包

打包需要证书，这里我们生成自己的证书，注意，在生成之前，我们需要安装JRE环境 ，可以去官网下载：https://www.oracle.com/technetwork/java/javase/downloads/index.htm

下载好后，配置好环境变量，在一个自己记得住的路径下打开powershell，输入以下命令，生成证书：

keytool -genkey -alias chuyuxuan -keyalg RSA -keysize 2048 -validity 36500 -keystore chuyuxuan.keystore

• chuyuxuan是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
• chuyuxuan.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
• 36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

回车后会提示：

Enter keystore password:  //输入证书文件密码，输入完成回车  
Re-enter new password:   //再次输入证书文件密码，输入完成回车  
What is your first and last name?  [Unknown]:  //输入名字和姓氏，输入完成回车  
What is the name of your organizational unit?  [Unknown]:  //输入组织单位名称，输入完成回车  
What is the name of your organization?  [Unknown]:  //输入组织名称，输入完成回车  
What is the name of your City or Locality?  [Unknown]:  //输入城市或区域名称，输入完成回车  
What is the name of your State or Province?  [Unknown]:  //输入省/市/自治区名称，输入完成回车  
What is the two-letter country code for this unit?  [Unknown]:  //输入国家/地区代号（两个字母），中国为CN，输入完成回车  
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?  [no]:  //确认上面输入的内容是否正确，输入y，回车  Enter key password for <testalias>  (RETURN if same as keystore password):  //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以

以上命令运行完成后就会在你选择的路径生成证书。

2.3 查看证书信息

可以使用以下命令查看：

复制代码keytool -list -v -keystore chuyuxuan.keystore  
Enter keystore password: //输入密码，回车

会输出以下格式信息：

密钥库类型: PKCS12
密钥库提供方: SUN
您的密钥库包含 1 个条目
别名: chuyuxuan
创建日期: 2021年8月26日
条目类型: PrivateKeyEntry
证书链长度: 1
证书[1]:
所有者: CN=chu, OU=yuxuan, O=chuyuxuan, L=HN, ST=HN, C=CN
发布者: CN=chu, OU=yuxuan, O=chuyuxuan, L=HN, ST=HN, C=CN
序列号: 542e4e8
生效时间: Thu Aug 26 14:30:51 CST 2021, 失效时间: Sat Aug 02 14:30:51 CST 2121
证书指纹:SHA1: 43:52:72:5F:B3:4B:24:4C:F8:0B:8A:7F:58:F1:D8:29:7E:12:84:6BSHA256: 9B:00:FE:63:B6:47:AC:74:B0:0F:74:B7:A5:52:1D:C8:D0:23:E0:87:B5:85:8E:D1:85:D1:D8:2D:BF:C6:34:41
签名算法名称: SHA256withRSA
主体公共密钥算法: 2048 位 RSA 密钥
版本: 3
扩展:
#1: ObjectId: 2.5.29.14 Criticality=false
SubjectKeyIdentifier [
KeyIdentifier [
0000: 4F 03 F5 28 33 A2 A8 8C   65 9D A9 68 24 11 C7 2A  O..(3...e..h$..*
0010: 26 EF E7 92                                        &...
]
]
*******************************************
*******************************************

其中证书指纹信息（Certificate fingerprints）：

• MD5
  证书的MD5指纹信息（安全码MD5）

• SHA1
  证书的SHA1指纹信息（安全码SHA1）

• SHA256
  证书的SHA256指纹信息（安全码SHA245）

我们记住好这些，就可以利用他们来打包了，接下来填入相关信息，进行打包。

2.4 云打包

如图，填写好相关信息，打包即可。

注意通讯录权限

打包好之后，下载，安装即可。

2.5 正常使用~~

法三：利用Android studio构建

Android Studio 可是官方指定的安卓应用开发软件。你可以点击这里进行下载，不过，由于谷歌退出了中国市场，你得想点办法去下载了。当然，后续的操作，你得在这个环境下去实现。

不知道你有没有发现，无论是通过一个木函封装还是通过HBuilderX，都有缺点，状态栏，标题栏无法自定义，它是固定住了的，无法手动修改了，所以，通过Android studio ，我们可以刻画出我们任何想要的界面，甚至加入一些丰富的功能。

3.1创建一个项目先

创建项目如下图所示：

我们要创建一个空的活动页（Activity），这样IDE会帮我们搭建好基础框架，免得我们自己动手去配置了。

在配置项目相关信息的时候，需要注意的是项目名称，项目语言，以及项目的SDK，注意，下载SDK需要一定的网络环境，否则会报错。SDK是确保你的应用能够运行在安卓系统上的工具包，你需要选择好符合你系统的SDK，一般安卓都是向下兼容的，我们选5.0以上的都行。

3.2 熟悉一下结构先

当你完成初始化之后，我们先来认识各个界面和功能吧，这样对我们之后更改有大用处。如图所示：

1️⃣处是视图切换，2️⃣处是控件集合，3️⃣处是目录树，也就是整个文件的结构，4️⃣所编辑的文件。

和大多数IDE一样，各个功能都差不多，基本上手就能看懂了，这里，就不在一一详细的去解释了。

3.3 添加WebView到主界面

由于我们只是利用webView做中间件，即相当于内嵌了一个浏览器，所以我们没有必要再添加其他组件了，直接在主界面上使用即可。

在设计模式下（Design）我们在组件面板（Palette）中找到小部件（Widgets）,把其中的WebView拖拽到界面中，如图所示：

之后，我们需要设定该组件的高度和宽度，这里，我们然它全屏就好了，匹配父组件即可。直接在最右边的布局（layout）中修改即可，当然，你也可以在代码（Code）模式下，输入以下代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><WebViewandroid:id="@+id/mWebview"android:layout_width="match_parent"android:layout_height="match_parent"android:visibility="visible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

效果如下图所示了：

3.4 配置 web View

我们界面已经绘制完毕，接下来，就开始配置逻辑了。首先，我们要让Webview显示我们需要显示的东西。

webView显示我们内容有两种方式，一种是将本地文件打包，另一种是直接访问链接。WebView在Android 4.3之后是基于chrome内核的，这里我们只介绍利用链接的方式加载界面，读取本地文件的方式也大同小异，故不在详解，具体使用方法大家可以参考官方文档

我们在MianActivity.java文件中加入如以下代码：

package com.example.chuyuxantest;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {// 定义类属性private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//去掉标题栏supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);// 实例化组件mWebView = (WebView) findViewById(R.id.mWebview);// 开启javascript 渲染mWebView.getSettings().setJavaScriptEnabled(true);// 处理各种浏览器事件mWebView.setWebViewClient(new WebViewClient());// 载入内容,这个根据你自己的链接来mWebView.loadUrl("https://blog.chuyuxuan.top/");}//为了提升用户体验，我们加一个返回提示public boolean onKeyDown(int keyCode, KeyEvent event) {//判断用户是否点击了“返回键”if (keyCode == KeyEvent.KEYCODE_BACK) {//与上次点击返回键时刻作差if ((System.currentTimeMillis() - mExitTime) > 2000) {//大于2000ms则认为是误操作，使用Toast进行提示Toast.makeText(this, "请您确保当前的操作正确性，再按一次将退出程序", Toast.LENGTH_SHORT).show();//并记录下本次点击“返回键”的时刻，以便下次进行判断mExitTime = System.currentTimeMillis();} else {//小于2000ms则认为是用户确实希望退出程序-调用System.exit()方法进行退出System.exit(0);}return true;}return super.onKeyDown(keyCode, event);}  /*//当然，我们也可也把返回变成浏览器里面返回上一页//代码如下：@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if ((keyCode ==  KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {mWebView.goBack();return true;}return super.onKeyDown(keyCode, event);}*/作者: CHUYUXUAN
链接: https://blog.chuyuxuan.top/2021/08/31/%E5%89%8D%E7%AB%AF/%E5%B0%86%E7%BD%91%E9%A1%B5%E5%B0%81%E8%A3%85%E5%AE%89%E5%8D%93APP%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/
来源: CHUYUXUAN
著作权归源作者所有，转载请注明出处。}

当然，我们不要忘记申请网络权限哈！找到app目录下的manifests，配置AndroidManifest.xml。代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.chuyuxantest"><!-- 申请 网络权限--><uses-permission android:name="android.permission.INTERNET"/><applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:usesCleartextTraffic="true"android:theme="@style/Theme.ChuyuxanTest"><activityandroid:name=".MainActivity"android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application></manifest>

3.5 配置主题颜色图标应用名称

接下来，我们找到res目录下的mipmap文件，这里是我们的应用图标，应为要适配平板，手机，手表等，所以需要不同的格式，你选择自己喜欢的图片即可。

我们要该的主题颜色，应用文件等都在values文件夹中配置。

3.6 开始打包部署吧

我们找到菜单栏中的build，找到下面的Build Bundle(s)/ APK(s)或者Generate Signed Bundle /APK，运行起来，当然，你也可也运行没有签名的，这里，我们选择生成签名的APK。

3.6.1证书配置

导入我们之前在HBuilderX配置好了的证书，当然，你也可以再重新签名一张。

填写好证书相关信息后，选择release 即可打包，之后，在当前目录下就会生成APP文件，我们安装到手机上即可。

不得不说，观感好了很多。

总结

总的来说，效果达到了，但是还是有点欠缺，例如，AndroidStudio中，一些控件用法，生命周期函数等，Java语法，用的还不是太熟练，只停留在基本了解阶段，还有很多要学。相对于Android开发大佬，我还只是个刚入门的小菜鸟。

打包ｗｅｂｖｉｅｗ只是学习Android开发的一小步，虽然谷歌安卓开发技术每年都在改变，每年都在提升，但接下来的几年里，Android还是在技术前沿，我们学习前端开发，不能够仅仅停留在会用Vue \React \angular的框架上，还需要不断的综合提升，才能走更远。