关闭

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

标签: webviewhtml
1558人阅读 评论(0) 收藏 举报
分类:

用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、还有一个更炫的例子,原文链接

最后一页效果如图:

这里写图片描述

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

用html的理由引导页用原生的Android开发也可以做,为何要用html呢?这么麻烦,岂不是增加开发复杂度? 其实不是的,我觉得使用webview+html原因有二:1、动画效果因为html结合j...
  • yuzhiyun3536
  • yuzhiyun3536
  • 2016-08-28 21:41
  • 1558

Html5做App(webapp)中界面适配的问题总结

做一款软件首先是要做出相应的界面,然而对于手机软件开发者来说,大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的android/ios/wp简单的多,因为它的适配性和平台...
  • zhtqmima
  • zhtqmima
  • 2015-12-08 14:13
  • 7786

如何优雅的为你的app添加启动引导页

简介我们首次下载一个APP的时候,一般都会有一个可以滑动的引导页面用于介绍该APP的一些基本信息,通常我们都会用ViewPager来实现,本篇文章就对引导页面做了一个简单的封装,以便于开发中的复用。(...
  • qq_24696917
  • qq_24696917
  • 2017-03-25 11:37
  • 1184

jquery仿flash引导页面进度条加载特效

现在作flash网站的是越来越少了,但flash的效果很多都是独一无二的,用其他方法很难实现,今天跟大家分享个由jquery制作的网站引导页面加载特效,加载完页面后跳转到指定的页面。 jquery仿...
  • chenshaojinglog
  • chenshaojinglog
  • 2014-01-06 13:11
  • 517

使用ViewFlipper+GestureDetector实现轮播图(APP引导页面)

使用ViewFlipper+GestureDetector实现轮播图(APP引导页面)
  • zhuwanfeng007
  • zhuwanfeng007
  • 2015-09-02 20:20
  • 395

实现引导页面的加载和退出。

实现思路: 1.n个引导的“欢迎页面”用WelcomeActivity中的ViewPager来承载。 2.在引导页面后必须还要具备主界面Activity。 3.WelcomeActivity中要...
  • MonaZhou
  • MonaZhou
  • 2016-12-07 09:15
  • 189

android用webview加载assert中的html并且可拨打页面中的电话

  • 2013-12-31 09:41
  • 910KB
  • 下载

模仿网易App启动使用webview加载广告效果

  • 2015-05-23 16:38
  • 2.19MB
  • 下载

Android App引导页面效果实现

  • 2015-08-29 20:49
  • 1.41MB
  • 下载

初次启动App进入引导页面自定义圆点的实现

初次启动App进入引导页面自定义圆点的实现 转载请注明出处:[http://blog.csdn.net/cz9025/article/details/52263600](http://blog....
  • cz9025
  • cz9025
  • 2016-08-20 21:20
  • 6436
    个人资料
    • 访问:97507次
    • 积分:1716
    • 等级:
    • 排名:千里之外
    • 原创:131篇
    • 转载:16篇
    • 译文:0篇
    • 评论:42条
    最新评论