用Webview＋HTML5做一个表白APP-CSDN博客

本文链接：https://blog.csdn.net/u013122341/article/details/53492221

0x01

近年来，WebView + HTML5做移动应用开发也越来越流行，于是就打算把一个HTML5的表白网页放在Webview中，封装在一个APP中。用手机，也就可以达到很好的展示效果。（刚开始的时候，直接通过手机浏览器访问，无法播放背景音乐，并且横竖屏切换体验并不加。）

因为不太会写文章，所以就废话少说，先上一张效果图

这里是一个在Web View中展示的HTML5页面

做为程序员，有时候还是要浪漫一下的，用这个去向喜欢的女生表白，应该还算是浪漫吧。

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;
        }
    }
}