0x01

近年來，WebView + HTML5做移動應用開發也越來越流行，於是就打算把一個HTML5的表白網頁放在Webview中，封裝在一個APP中。用手機，也就可以達到很好的展示效果。（剛開始的時候，直接通過手機瀏覽器訪問，無法播放背景音樂，並且橫豎屏切換體驗並不加。）

因為不太會寫文章，所以就廢話少說，先上一張效果圖

做為程式設計師，有時候還是要浪漫一下的，用這個去向喜歡的女生表白，應該還算是浪漫吧。

0x02

開發環境：android studio 2.2
除錯裝置：魅族note3（因為是同款手機啦！）
Web伺服器：阿里雲虛擬機器(用部署HTML5頁面)

0x03

本文主要是講一下如何在Web View中載入HTML5的。所以不會講述HTML5的實現。HTML5的原始碼是用的他人的原始碼。在

開始建立一個android工程
通過Gradle建立android工程就不再贅述了，網上有很多教程。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width
 
="match_parent" android:layout_height="match_parent"
    tools:context="com.example.love.MainActivity">

    <WebView
        android:id="@+id/m_web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight
 
="15dp"></WebView>
</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.love">
<!-- 新增允許網路訪問的許可權 -->
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name" android:supportsRtl="true" 
android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" 
        android:theme="@style/NoTitleFullscreen" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

android:theme="@style/NoTitleFullscreen"

這段程式碼主要是去掉手機的標題欄，讓介面全屏顯示

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

防止手機在進行橫豎屏切換時，重新載入HTML5

MainActivity.class

package com.example.love;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.media.MediaPlayer;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    //背景音樂播放，用HTML5的 <audio>標籤在手機中不會播放音樂的，所以，把音樂播放放在了APP中來控制。
    MediaPlayer player;
    String TAG = "WebClientDemo";
    boolean isLoadResources = true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if(this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }

        setContentView(R.layout.activity_main);

        // 建立一個Web view物件
        webView =(WebView) findViewById(R.id.m_web);

        // 設定Web view屬性,能夠執行javascript指令碼
        webView.getSettings().setJavaScriptEnabled(true);
        //設定WebView是否使用viewport，當該屬性被設定為false時，載入頁面的寬度總是適應WebView控制元件寬度；當被設定為true，當前頁面包含viewport屬性標籤，在標籤中指定寬度值生效，如果頁面不包含viewport標籤，無法提供一個寬度值，這個時候該方法將被使用。
        webView.getSettings().setUseWideViewPort(true);
        //設定WebView是否支援使用螢幕控制元件或手勢進行縮放，預設是true，支援縮放。
        webView.getSettings().setSupportZoom(true);
        //設定WebView是否使用預覽模式載入介面。
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view,String url){
                webView.loadUrl(url);
                return true;
            }
            public void onLoadResource(WebView view, String url) {
                if (!isLoadResources) {
                    Log.i(TAG, "Block resource loading:" + url);
                    return;
                } else {
                    Log.i(TAG, "Continue resource loading:" + url);
                    super.onLoadResource(view, url);
                }
            }

            // Intercepts error message
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                Log.i(TAG, failingUrl);
                Toast.makeText(MainActivity.this, "網頁錯誤: " + errorCode + " 網頁不可用",
                        Toast.LENGTH_LONG).show();
            }

            // Intercepts form resubmission
            public void onFormResubmission(WebView view, Message dontResend,
                                           Message resend) {
                Log.i(TAG, "Resubmission");
                Toast.makeText(MainActivity.this, "不可重複提交，按Back回到上級網頁",
                        Toast.LENGTH_SHORT).show();

            }

            // Intercepts page started event
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                Log.i(TAG, "Page load start");
            }

            // Intercepts page finished event
            public void onPageFinished(WebView view, String url) {
                Log.i(TAG, "Page load finish");
            }
        });
        try {
            //清理快取，這裡如果不清理快取，有時候重新載入程式，JS cavas沒有執行
            webView.clearCache(true);
            //載入HTML5網頁（這個網頁就是你掛在伺服器中的路徑）
            webView.loadUrl("http://tomopad.com/love.html");
        }catch (Exception ex){
            ex.printStackTrace();
        }
        player = MediaPlayer.create(this,R.raw.wyy);
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }

    @Override
    protected void onStop() {
        if(player.isPlaying()){
            player.pause();
        }
        super.onStop();
    }

    @Override
    protected void onStart() {
        if(!player.isPlaying()){
            player.start();
        }
        super.onStart();
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            Intent mHomeIntent = new Intent(Intent.ACTION_MAIN);
            mHomeIntent.addCategory(Intent.CATEGORY_HOME);
            mHomeIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK
                    | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);
            MainActivity.this.startActivity(mHomeIntent);
            return true;
        }else {
        super.onKeyDown(keyCode,event);
        return false;
        }
    }
}

0x04