使用webView加载html作为app引导页面

用html的理由

引导页用原生的Android开发也可以做，为何要用html呢？这么麻烦，岂不是增加开发复杂度？
其实不是的，我觉得使用webview+html原因有二：

1、动画效果

因为html结合javascript、css等可以做出一些非常漂亮的动画效果，但是如果用原生开发，机会很难实现。

2、分工

团队开发，可以让对html掌握的比较好的同事负责这一部分的开发，原生开发的人就专心开发其他的功能，而不是纠结于如何实现这种好看的效果。

实现

启动页代码

public class WebViewActivity extends Activity {
    private WebView myWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        myWebView = (WebView) findViewById(R.id.myWebView);
        myWebView.getSettings().setJavaScriptEnabled(true);
        // 与js交互，JavaScriptinterface 是个接口，与js交互时用到的，这个接口实现了从网页跳到app中的activity 的方法，特别重要
        myWebView.addJavascriptInterface(new JavaScriptinterface(this), "android");
        myWebView.loadUrl("file:///android_asset/index.html");

    }
}

其中的接口实现为：

public class JavaScriptinterface {

    Activity mActivity;

    public JavaScriptinterface(Activity mActivity) {
        this.mActivity = mActivity;
    }

    /** 与js交互时用到的方法，在js里直接调用的
     *
     * 需要加上@android.webkit.JavascriptInterface注解，否则可能失效
     * */
    @android.webkit.JavascriptInterface
    public void startActivity() {
        Intent intent = new Intent();
        intent.setClass(mActivity, MainActivity.class);
        mActivity.startActivity(intent);
        mActivity.finish();
    }
}

index.html中关键代码（调用接口中定义的startActivity方法）

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

其中，entry_button是最后一页的按钮id，这段代码意思是，点击entry_button按钮，就猝发startActivity函数。

注：

1、html、css等文件是放在assets文件夹下的，通过webview加载。
2、源代码以及apk
3、还有一个更炫的例子，原文链接

最后一页效果如图：

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>