用WebView实现启动引导界面

来源：互联网发布：小额借钱软件排名编辑：程序博客网时间：2024/05/06 02:39

用WebView实现启动引导界面

最近研究天天动听发现它的引导界面是用WebView来实现的，于是研究了下，自己实现了，还挺简单的，现在和大家分享一下，有Html和JavaScript经验很容易理解，html5也能很好地适配各种机型。

项目结构：
这里写图片描述

JavaScriptinterface代码：

package com.lia.webview;import android.app.Activity;import android.content.Intent;public class JavaScriptinterface {    Activity mActivity;    public JavaScriptinterface(Activity mActivity) {        this.mActivity = mActivity;    }    /** 与js交互时用到的方法，在js里直接调用的 */    public void startActivity() {        Intent intent = new Intent();        intent.setClass(mActivity, MainActvity.class);        mActivity.startActivity(intent);        mActivity.finish();    }}

WebViewActivity代码：

package com.lia.webview;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class WebViewActivity extends Activity {    private WebView myWebView;    @SuppressLint("SetJavaScriptEnabled")    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.webview);        myWebView = (WebView) findViewById(R.id.myWebView);        // 添加JS支持        myWebView.getSettings().setJavaScriptEnabled(true);        // 与js交互，JavaScriptinterface 是个接口，与js交互时用到的，这个接口实现了从网页跳到app中的activity 的方法        myWebView.addJavascriptInterface(new JavaScriptinterface(this), "android");        // 加载Html        myWebView.loadUrl("file:///android_asset/index.html");    }}

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>title</title>    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">    <link rel="stylesheet" href="css/swiper.min.css">    <link rel="stylesheet" href="css/main.css"></head><body>    <div id="test"></div>    <!-- Swiper -->    <div class="swiper-container">        <div class="swiper-wrapper animation_speedup">            <div class="swiper-slide slide1" id="slide1">            </div>            <div class="swiper-slide slide2" id="slide2">            </div>            <div class="swiper-slide slide3" id="slide3">            </div>            <div class="swiper-slide slide4" id="slide4">                <div id="entry_button" class="entry_button"></div>            </div>        </div>        <!-- Add Pagination -->        <div class="swiper-pagination"></div>    </div>    <!-- Swiper JS -->    <script src="js/zepto.min.js"></script>    <script src="js/classList.min.js"></script>    <script src="js/swiper.min.js"></script>    <script src="js/main.js"></script>    <script type="text/javascript" >      function startActivity() {             android.startActivity();     }    </script>    <script type="text/javascript">        $('#entry_button').on('click',function() {            startActivity();        });    </script></body></html>

js和css代码就不贴上来了，有兴趣的可以下载源码自己研究。

    <script type="text/javascript" >      function startActivity() {             android.startActivity();     }    </script>    <script type="text/javascript">        $('#entry_button').on('click',function() {            startActivity();        });    </script>

这部分是实现点击按钮由html界面跳转到程序界面的实现方法。

有不懂得可以下载源码自己研究
http://download.csdn.net/detail/itlihao/9435285

0 0