站長留言

  • ✅ 本站維護及更新歷史紀錄,詳情請參考公告
  • ✅ 有任何意見、想法,歡迎留言給Spicy知道喔
  • ✅ 固定於每周一至周五更新Blogger文章,周末不定期會有短篇
程式Android 安卓

【APP/Android】如何使用 Webview 內嵌網頁,簡單的將網頁製作成 APP

tags: APP Android

Common 目的

  1. 直接在 APP 顯示相關的網頁
    • 最近的網頁都會做RWD設計以符合手機瀏覽
    • 沒有RWD也沒關係,一樣可以內嵌
    • RWD延伸閱讀
  2. 反過來說,也可以直接利用 Webview 將網頁製作成 APP

Method 常用方法整理

Webview

  • loadUrl (String url):載入網址
  • canGoBack ():是否可以返回上一個瀏覽紀錄,也就是是否可以讓網頁返回上一頁
  • goBack ():返回上一個瀏覽紀錄,也就是讓網頁返回上一頁

WebSettings

  • setJavaScriptEnabled (boolean flag):設定網頁是否啟用 JavaScript

    • 通常必須設定為 true,因為很多動態的動作都是基於 JavaScript 的程式碼撰寫的
    • 例如:Button 的 onclick()
  • setCacheMode (int mode):設定網頁是否啟用 cache 緩存

    mode 說明
    LOAD_DEFAULT default,根據cache-control決定是否從網絡上取數據
    LOAD_CACHE_ONLY 不使用網絡,只讀取本地緩存數據
    LOAD_NO_CACHE 不使用緩存,只從網絡獲取數據
    LOAD_CACHE_ELSE_NETWORK 只要本地有,無論是否過期,或者no-cache,都使用緩存中的數據

WebViewClient

  • shouldOverrideUrlLoading():載入網頁時不調用系統瀏覽器,而是在 APP 的 WebView 中顯示
  • exmaple 範例
webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

整理圖表


Tutorial 教學

步驟1:設定連線網路權限

  1. 打開 manifest/AndroidManifest.xml
  2. 加入 <uses-permission android:name="android.permission.INTERNET" />
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="">

    <uses-permission android:name="android.permission.INTERNET" />
    
    <application>
        ...
    </application>
</manifest>
  1. APP 的 Permission 權限:延伸閱讀

步驟2:前端 Layout

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</WebView>

步驟3:移除 Action Bar 標題欄

  • 該步驟按需求執行,端看設計時是否需要 Action Bar

  • 大部分的 Webview 設計都會使用 No Action Bar 的 style

  1. 打開 res/values/styles.xml
  2. 將 style 改為 Theme.AppCompat.Light.NoActionBar
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

步驟4:後端 Activity

  1. 基本版:寫在 onCreate()
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_webview);

    WebView webview = (WebView) findViewById(R.id.web_view);
    webview.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient()); //不調用系統瀏覽器
    webview.loadUrl("https://www.google.com.tw/");
}
  1. 按 Back 返回鍵可以執行網頁的返回上一頁
    • 若不加入這段程式碼,瀏覽網頁時點擊 Back 返回鍵,Webview 會調用 finish(),而直接關閉網頁
    • 功能說明:點擊 Back 返回鍵,是網頁返回上一頁,而不是結束 Webview
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

Extensive Reading 延伸閱讀

  1. 什麼是響應式網頁設計(Responsive Web Design):https://www.ibest.tw/page01.php
  2. Android 6.0的Permission權限設計
    https://litotom.com/2016/05/15/android-6-permission/
  3. 如何设计一个优雅健壮的Android WebView?https://juejin.im/post/5a94f9d15188257a63113a74
  4. WebView性能、体验分析与优化
    https://tech.meituan.com/WebViewPerf.html

Reference 參考資料

  1. 幫網站建立簡易 App:使用 Android Webview
    https://jerrynest.io/app-android-webview/
  2. Android:这是一份全面 & 详细的Webview使用攻略
    https://www.jianshu.com/p/3c94ae673e2a
  3. WebView 官方文件
    https://developer.android.com/reference/android/webkit/WebView
  4. WebSettings 官方文件
    https://developer.android.com/reference/android/webkit/WebSettings
  5. WebViewClient 官方文件
    https://developer.android.com/reference/android/webkit/WebViewClient

2 則留言:

  1. Hey there! Someone in my Facebook group shared this site with us so I came to check it out. I'm definitely enjoying the information. I'm bookmarking and will be tweeting this to my followers! Wonderful blog and outstanding style and design.

    回覆刪除

本網站建議使用電腦或平板瀏覽