使用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>

• 点赞
• 收藏
• 分享
• 文章举报

iteye_16961 发布了0 篇原创文章 · 获赞 0 · 访问量 204 私信 关注