前言
目前手機應用市場上的 APP 類型主要為以下兩種：
-
Native App（原生應用）：直接針對平台（Android、iOS 等手機系統）進行開發，屬於性能最優的方案，也是開發成本最大的方案。
-
Hybrid App（混合應用）：即為原生 WebView 加 HTML5 網頁內容的形式。只需要開發一套 HTML5 業務邏輯，就可以同時運行在不同的平台上，相對比較靈活，內容可以快速更新，開發維護成本較低。最大的缺點就是性能遠不及原生應用，交互上也做不到原生的那么自然。
React Native 和 Weex 之類的框架不是本文討論的主題，這里就不展開了。
本文主要講解如何制作一個安卓原生的“殼”來加載我們的 H5 網頁，最終實現一個簡單的 Hybrid App（套殼應用）。
文中創建的示例項目已上傳至碼雲，在文章底部傳送門處獲取
正文
本文不涉及到復雜的 Android 與 Java 知識，小朋友不需要在家長的陪同下也能觀看 😉
1. 創建安卓項目
創建安卓項目需要用到 Android Studio，關於如何安裝 Android Studio 可以閱讀官方文檔。
安裝 Android Studio：https://developer.android.com/studio/install
1.1 創建新項目
首先打開 Android Studio，點擊 Start a new Android Studio Project（創建一個新的 AS 項目）。
1.2 選擇項目模板
項目模板這里我們選擇 Empty Activity（空白活動），點擊 Next（下一步）。
1.3 項目配置
來到項目配置頁面，分別設置好以下選項：
- Name：應用名
- Package Name：包名
- Save Location：項目保存路徑
- Language：項目使用的編程語言
- Minimum SDK：最低兼容 SDK 版本
這里語言選擇 Java（因為我沒寫過 Kotlin 😂），而最低 SDK 則選擇了 API 23（示例用隨便選的 😕），配置完成后點擊 Finished（完成）。
至此我們已經完成了項目的創建，接下來讓我們正式開始我們今天的主題。
2. 開發套殼程序
2.1 添加 WebView 布局
修改 app/res/layout/activity_main.xml 文件，去掉原有的 TextView 標簽，添加一個 WebView 標簽並保存。
添加的代碼如下：
<!-- 展示一個 WebView -->
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
在 Android 工程中，app/res/layout/ 目錄主要用於存放定義用戶界面布局的 XML 文件。
上文提到的 activity_main.xml 即為應用主界面的布局文件。
2.2 在入口處創建 WebView 實例
選擇 app/java/{創建項目時指定的包名}/ 目錄下的 MainActivity.java 文件（我這里是 app/java/example/webviewdemo/MainActivity.java）。
隨后在 MainActivity.java 文件中添加一個 createWebView 函數（不要忘記導入用到的包），並在生命周期 onCreate 中調用該函數，來創建一個 WebView 實例並對其進行配置。
MainActivity.java 完整代碼如下：
package com.example.webviewdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.createWebView();
}
/* 創建 WebView 實例 */
@SuppressLint("SetJavaScriptEnabled")
private void createWebView() {
// 創建 WebView 實例並通過 id 綁定我們剛在布局中創建的 WebView 標簽
// 這里的 R.id.webview 就是 activity_main.xml 中的 WebView 標簽的 id
final WebView webView = (WebView) findViewById(R.id.webview);
// 設置 WebView 允許執行 JavaScript 腳本
webView.getSettings().setJavaScriptEnabled(true);
// 確保跳轉到另一個網頁時仍然在當前 WebView 中顯示
// 而不是調用瀏覽器打開
webView.setWebViewClient(new WebViewClient());
// 加載指定網頁
String url = "https://chenpipi.cn";
webView.loadUrl(url);
}
}
在 Android 項目中，app/java/ 目錄主要用於存放項目的源代碼。
在項目包名目錄（文中項目包名為
com.example.webviewdemo）下的 MainActivity.java 文件為應用的主入口。
2.3 添加聯網權限
選擇 app/minifests/AndroidMinifest.xml 文件，在 application 標簽前添加一個 uses-permission 標簽來聲明應用的網絡訪問權限，最后保存。
添加的代碼如下：
<!-- 訪問網絡的權限 -->
<uses-permission android:name="android.permission.INTERNET" />
AndroidManifest.xml 文件用於描述應用的基本特性並定義了每個應用組件。
2.4 使用虛擬機運行應用
我們開發的時候可以隨時使用模擬器來預覽我們的應用，也可以將手機連接到電腦上進行調試（這里就不展開了）。
如果想要打包成 APK 文件安裝到手機上運行，執行頂部菜單欄的 [ Build -> Build Bundle(s) / APK(s) -> Build APK(s) ] 即可。
調試工具欄在窗口右上方，選擇或安裝一個虛擬機（模擬器）。
點擊綠色播放鍵（三角形），然后 Android Studio 會自動幫我們編譯並在虛擬機 📱 中啟動我們的應用。
隨后可以看到我們的應用已經成功加載了 MainActivity.java 中設置好的鏈接 https://chenpipi.cn，計划通 👌。
如果沒有安裝虛擬機的話，需要點擊窗口頂部菜單欄的 [ Tools -> AVD Manager ] 進入 AVD 管理器安裝安卓虛擬機（模擬器）。
AVD 管理器：https://developer.android.com/studio/run/managing-avds#createavd
3. 加點料
3.1 隱藏標題欄
修改 app/res/values/styles.xml 文件，將 name 為 AppTheme 的 style 標簽的內容換成以下代碼：
<!-- 隱藏標題欄 -->
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
修改完成后，重新預覽應用發現之前騷得不行紫色標題欄已經不見啦~（希望標題欄沒事 🙏）
3.2 隱藏狀態欄
該方案在異形屏下會有些問題，且本文將不考慮異形屏的適配。
光隱藏標題欄瀏覽體驗還不夠沉浸，得把狀態欄也隱藏了，不能讓用戶看到時間和電量！😏
修改 MainActivity.java 文件，在生命周期 onCreate 內調用 setContentView 函數之前添加以下兩行代碼：
// 設置為全屏（隱藏狀態欄）
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
再保存看看，duang~ 狀態欄也消失啦！（也希望狀態欄沒事 🙏）
3.3 接管返回鍵
默認情況下，在這個只有的 WebView 應用中無論在什么頁面觸發返回（按鍵或手勢）都是會直接退出應用的，當然這肯定不是我們想要的效果。
一般來說在應用中觸發返回操作應該是返回到上一個瀏覽的頁面，沒有上一個頁面時才會退出應用。
我們可以通過以下兩種方法來修改：
- 修改 WebView 實例的按鍵監聽器：
// 設置 WebView 的按鍵監聽器，覆寫監聽器的 onKey 函數，對返回鍵作特殊處理
// 當 WebView 可以返回到上一個頁面時回到上一個頁面
webView.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
webView.goBack();
return true;
}
return false;
}
});
- 重寫當前 Activity 的
onBackPressed函數：
private WebView webView = null;
// 創建 WebView 實例時保存到 this.webView 中
/*
* 接管返回鍵
*/
@Override
public void onBackPressed() {
if (this.webView.canGoBack()) {
this.webView.goBack();
} else {
super.onBackPressed();
}
}
3.4 支持明文傳輸（HTTP）
從 Android 9（API Level 28）開始默認不支持明文傳輸，在 WebView 中加載 HTTP 網頁會報 net::ERR_CLEARTEXT_NOT_PERMITTED 的錯誤，不方便本地進行調試。
我們可以在 AndroidMinifest.xml 文件中的 application 標簽內添加屬性 android:usesCleartextTraffic="true" 以支持明文傳輸。
<application
...
android:usesCleartextTraffic="true">
可以看到我本地的 Cocos Creator 項目已經成功在安卓的 WebView 上跑起來啦~ 🍗
文中創建的示例項目已上傳至碼雲，在文章底部傳送門處獲取
相關資料
Android 開發者
https://developer.android.com/
傳送門
更多分享
公眾號
菜鳥小棧
我是陳皮皮，這是我的個人公眾號，專注但不僅限於游戲開發、前端和后端技術記錄與分享。
每一篇原創都非常用心，你的關注就是我原創的動力！
Input and output.
