搭建Android瀏覽器殼子

搭建Android瀏覽器殼子

 

不久前咱們要作一個Android端的手機APP，但沒有用Android原生的組件，

而是把這個APP作成了一個訪問某一固定IP的瀏覽器，即單純的一個殼子；

具體的內容用Vue來開發。

由於這個項目自己不大，加上咱們只有一名web前端開發人員，因此選用了此套路；

再加上如今的APP裏也有很多嵌套着的單頁應用，也不算是太Low；

接下來介紹的是殼子的製做；

 

Android開發瀏覽器(實踐入門) - CSDN博客  

首先建一個Android的Hello World項目

修改Activity和Layout文件，以及Manifest文件

package com...................myapplicationtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        webView = (WebView) findViewById(R.id.webView);
        webView.loadUrl("http://www.baidu.com");
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true; } }); }
}

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.....................myapplicationtest.MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.....................myapplicationtest">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

調試發現報ERR_CACHE_MISS，是由於沒有在Manifest文件裏賦權限；

Webview加載網頁時出現NET::ERR_CACHE_MISS的錯誤 - CSDN博客

這時候咱們能夠打開百度的網頁，看起來沒有什麼問題；

但若是把網址綁定成已經作好的應用程序，卻怎麼也打不開；

緣由是：

WebView的使用詳解 - CSDN博客

默認是不容許執行JS腳本的，咱們要把它改成true；

package com...................myapplicationtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        webView = (WebView) findViewById(R.id.webView);
        webView.loadUrl("http://www.baidu.com");
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}

如今看起來就很好了，頁面正常顯示，以前的百度網頁也變成了這樣

可是咱們並不想要這個大標題欄

Android學習之路：AndroidStudio建立EmptyActivity隱藏標題欄 - CSDN博客

<resources>

    <!-- Base application theme. -->
    <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">-->
    <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>

如今看起來就沒有什麼問題了

嗯嗯

 

 

。。。待續