专栏首页独行猫a的沉淀积累总结Android应用之Hybird混合开发,集成web页面的方法尝试

Android应用之Hybird混合开发,集成web页面的方法尝试

总结下要点:

1.在Android项目代码目录的app/src/main目录下面创建个assets文件夹。

再在里面创建个web目录。把web的代码放进去。如:

2.Android应用中,activity布局界面上放置一个webview。

并做相关的配置:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        WebView webView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
//如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
        webSettings.setJavaScriptEnabled(true);
// 若加载的 html 里有JS 在执行动画等操作,会造成资源浪费(CPU、电量)
// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可
//支持插件
        //webSettings.setPluginsEnabled(true);
//设置自适应屏幕,两者合用
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//缩放操作
        webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。
        webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
        webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

//其他细节操作
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

        // 设置可以访问文件
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowContentAccess(true);
        webSettings.setDomStorageEnabled(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.d("webapp","开始加载");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.d("webapp","加载结束");
            }

            // 链接跳转都会走这个方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.d("webapp","Url:"+ url );
                view.loadUrl(url);// 强制在当前 WebView 中加载 url
                return true;
            }
        });

        //核心方法, 用于处理JavaScript被执行后的回调
        webView.addJavascriptInterface(new JSInterface(), "justTest");
        //webView.loadUrl("http://192.168.156.87:10644");
        webView.loadUrl("file:///android_asset/web/index.html");
    }

核心调用:

webView.loadUrl("file:///android_asset/web/index.html");

注意本地文件路径的写法,必须是file:///android_asset/web/...

当然,也可以直接把webapp部署到网上,这个loadUrl传后台服务地址。但是这里用文件方式是考虑到终端4G网络访问慢,导致加载慢的问题。若是手机app或有线,无线网络,部署到后台最好。但是有利有弊吧,若每个项目各不相同,得打包部署多少个才够。放到本地的一个好处是终端可以在各个项目上用,而不用考虑服务端部署webapp的问题。

JS调用Android原生接口的方法:

//定义回调接口
    private final class JSInterface{
        @SuppressLint("JavascriptInterface")
        @JavascriptInterface
        public void testAndroid(String userInfo){
            System.out.println("JavaScript调用Android啦");
            Toast.makeText(SecondActivity.this, userInfo, Toast.LENGTH_LONG).show();
        }
    }

注意@JavascriptInterface这个注解不可少。因为Adnroid从17api之后为了安全起见,只有这个注解的方法,才能被js调用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebService接口调试如此简单

    我这边的Android终端调试webservice接口,一开始想看日志,用的方法真笨啊。

    特立独行的猫a
  • 常用的vim配置,_vimrc文件

    特立独行的猫a
  • 让Vim打造成强大的IDE,附_vimrc的配置和使用

    然后把_vimrc配置文件放到安装目录下。这个配置文件是之前别人写好的,用着有点儿问题特意改了下。稍后附件中会附带这个。直接能用。

    特立独行的猫a
  • 深入探究immutable.js的实现机制(二)

    上一篇我们研究了 Immutable.js 持久化数据结构的基本实现原理,对其核心数据结构Vector Trie进行了介绍,并着重探究了其中的位分区机制。采用位...

    秋风的笔记
  • 【面经】深度学习算法岗(京东)

    在某个阳光明媚的下午接到了京东的电话,问是否可以去北京现场面试,当时正好是秋季开学第一天,拒绝之后面试官表示可以电话面试,共两面技术面 + 一面HR面。

    zenRRan
  • 使用Koa + mysql一小时搭建个人博客

    路由:koa-router 表单解析:koa-bodyparser 视图:koa-views、ejs session: koa-session-minim...

    用户1515472
  • 淘宝 | 如何加快 Node.js 应用的启动速度,实现分钟到毫秒的转化

    链接|https://mp.weixin.qq.com/s/tbK63erZgMy5-RbhbAWgrw

    五月君
  • 【Nodejs】375- 如何加快 Node.js 应用的启动速度

    我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系...

    pingan8787
  • Python分布式抓取和分析京东商城评价

    互联网购物现在已经是非常普遍的购物方式,在互联网上购买商品并且使用之后,很多人都会回过头来对自己购买的商品进行一些评价,以此来表达自己对于该商品使用后的看法。商...

    Python中文社区
  • 14.闭包

    YungFan

扫码关注云+社区

领取腾讯云代金券