精华内容
下载资源
问答
  • Android与Html5交互

    2017-10-21 11:42:30
    Android与Html5交互Android与Html5交互Android与Html5交互Android与Html5交互
     
    概述

    目前主流应用程序大体分为三类

    Web App

    Web App是指采用Html5语言写出的App,不需要下载安装,类似于现在所说的轻应用,存在于浏览器中的应用,基本上可以说是触屏版的网页应用。

    优点

    • 开发成本低
    • 更新快
    • 更新无需通知用户,不需要手动升级
    • 能够跨多个平台和终端

    缺点

    • 临时性的入口
    • 无法获取系统级别的通知,提醒,动效等
    • 用户留存率低
    • 设计受限制诸多
    • 体验较差
    Hybrid App

    Hybrid App是半原生,半Web的混合类App。 需要下载安装,看上去类似NativeApp,但是只有很少的UI,大多用WebView,访问的内容是Web。

    Native App

    Native APP指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强。需要用户下载安装使用。

    优点

    • 打造完美的用户体验
    • 性能稳定
    • 操作速度快,上手流畅
    • 访问本地资源(通讯录,相册)
    • 设计出色的动效,转场,
    • 拥有系统级别的贴心通知或提醒
    • 用户留存率高

    缺点

    • 分发成本高(不同平台有不同的开发语言和界面适配)
    • 维护成本高(例如一款App已更新至V5版本,但仍有用户在使用V2, V3, V4版本,需要更多的开发人员维护之前的版本,不然旧版本出问题了,用户可能就不用了)
    • 更新缓慢,根据不同平台,提交–审核–上线 等等不同的流程,需要经过的流程较复杂
    三者对比

    Hybrid App开发中Android与H5(JS)交互
    准备工作
    • 打开assets中的Html。
    mWebView = (WebView) findViewById(R.id.webview_test);
    mWebView.loadUrl("file:///android_asset/index.html");
    
    • 打开SD卡中的Html
    mWebView = (WebView) findViewById(R.id.webview_test);
    mWebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/index.html”);
    
    • 打开服务端指定Url的Html。
    mWebView = (WebView) findViewById(R.id.webview_test);
    mWebView.loadUrl(“http://www.baidu.com”);
    
    Android与Html的交互,实际就是与Js的交互。

    分两种情况,原生调用Js,Js调用原生。

    配置
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>测试网站</title>
    
        <script type="text/javascript">
            function test(){
                var name = document.getElementById("textName").value
                app.sayHello(name) <!--Js调用原生-->
            }
    
            <!--原生调用Js-->
            function showName(name){
                document.getElementById("textName").value = name;
            }
        </script>
    </head>
    
    <body>
    <input id="textName">
    <br/>
    <hr>
    
    <button onclick="test()">测试</button>
    </body>
    
    </html>
    
    mWebView.loadUrl("file:///android_asset/index.html");
    mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript
    
    mWebAppInterface = new WebAppInterface();
    //设置和原生和Js交互的接口
    //参数:接口类,Js调用原生时需要的引用名(自定义命名)
    mWebView.addJavascriptInterface(mWebAppInterface, "app");
    
    交互接口
    class WebAppInterface {
            /**
             * Js 调用原生
             */
            @JavascriptInterface //一定加注解否则可能会报错
            public void sayHello(String name) {
                if (!TextUtils.isEmpty(name)) {
                    Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
                }
            }
    
            /**
             * 原生调用Js
             */
            public void showName(String name) {
                mWebView.loadUrl("javascript:showName('" + name + "')");
            }
        }
    

    完整交互代码

     private void initView() {
            mWebView = (WebView) findViewById(R.id.webview_test);
            btn_test = (Button) findViewById(R.id.btn_test);
    
    
            mWebView.loadUrl("file:///android_asset/index.html");
            mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript
    
            mWebAppInterface = new WebAppInterface();
            //设置和原生和Js交互的接口
            //参数:接口类,Js调用原生时需要的引用名(自定义命名)
            mWebView.addJavascriptInterface(mWebAppInterface, "app");
    
            btn_test.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mWebAppInterface.showName("测试");
                }
            });
        }
    
        class WebAppInterface {
            /**
             * Js 调用原生
             */
            @JavascriptInterface //一定加注解否则可能会报错
            public void sayHello(String name) {
                if (!TextUtils.isEmpty(name)) {
                    Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
                }
            }
    
            /**
             * 原生调用Js
             */
            public void showName(String name) {
                mWebView.loadUrl("javascript:showName('" + name + "')");
            }
        }

    展开全文
  • android与html5交互

    千次阅读 2016-10-14 18:46:44
    现在app中嵌套html5的用法相当的普及,但是对于她们之间的交互却又感到很模糊,接下来从两方面讲解一下,自己动手写就会明白很多。一、点击html5页面中的按钮,调用android中的方法1、android页面 webView = ...

    现在app中嵌套html5的用法相当的普及,但是对于她们之间的交互却又感到很模糊,接下来从两方面讲解一下,自己动手写就会明白很多。

    一、点击html5页面中的按钮,调用android中的方法

    1、android页面

     webView = (WebView) findViewById(R.id.webview);
     //设置webView的一些属性
     WebSettings webSettings = webView.getSettings();
     //允许与js进行交互
     webSettings.setJavaScriptEnabled(true);
     //添加一个对象,让js可以访问该对象的方法,该对象中可以调用js中的方法,参数一:创建的类名,参数二:调用时的接口名
     webView.addJavascriptInterface(new JsOperation(), "webViewObj");
    
     webView.loadUrl(mUrl);
     webView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
                 view.loadUrl(url);  
                 return true;
            });
    
    //与上面添加的对象名称一致
    class JsOperation {
         @JavascriptInterface//该注解一定要加让Javascript可以访问
         public void backHome() {
                //点击按钮后发生的事
            }
    }
    

    2、js中调用

    <script type = "text/javascript">
    
        function getAndroidMsg{
            //window.接口名.方法名(参数);
            window.webViewObj.backHome();
        }
    
    </script>

    二、通过android中的按钮控制html5中的内容

    这种类型用到的比较少

    1、android

    webView = (WebView) findViewById(R.id.webview);
     //设置webView的一些属性
     WebSettings webSettings = webView.getSettings();
     //允许与js进行交互
     webSettings.setJavaScriptEnabled(true);
     //添加一个对象,让js可以访问该对象的方法,该对象中可以调用js中的方法,参数一:创建的类名,参数二:调用时的接口名
     webView.addJavascriptInterface(new JsOperation(), "webViewObj");
    
     webView.loadUrl(mUrl);
     webView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                 view.loadUrl(url);  
                 return true;
            });
    
            ……
    
    //在android中访问html5中的方法:javascript:方法名(参数)
    webView.loadUrl("javascript:showInfoFromAndroid('访问到了')");

    2、html5

    <script type = "text/javascript">
    
     //在android代码中调用此方法  
      function showInfoFromAndroid(msg){  
        alert("来自客户端的信息:"+msg);  
      }     
    
    </script>
    展开全文
  • Android与html5交互 -- JavascriptInterface

    万次阅读 2016-03-18 17:35:42
    Android中使用WebView可加载html5,具体步骤如下: (前提:本地Html5存放到assets文件夹下) 一:使用WebView加载Html5,简单显示 1:清单文件中添加访问权限:android.permission.INTERNET 2:Activity中生成...

    Android中使用WebView可加载html5,具体步骤如下:

    (前提:本地Html5存放到assets文件夹下)

    一:使用WebView加载Html5,简单显示

    1:清单文件中添加访问权限:android.permission.INTERNET

    2:Activity中生成WebView组件,布局文件中添加<WebView>控件,或者动态添加

    3:本地文件html5中有js的话,webview必须设置支持js的属性:webview.getSettings().setJavaScriptEnabled(true);  这里可以设置其它属性,随后附上

    4:使用WebView加载html5文件 :webView.loadUrl("file:///android_asset/XX.html");

    二:WebView与html5之间的交互

    <1>js调用Android中的函数

    1:webView.addJavascriptInterface(obj,str);

    参数一:android中的实例对象

    参数二:js中别名

    注:如果js中调用此对象的某方法,须在此公有方法前加上注解@JavascriptInterface,否则访问不了,目前只知道这种写法只能调用对象的方法。

    如果不加webView.setWebChromeClient()这个方法,js中的alert对话框将不会提示。

    2:js中使用str.xx()/window.str.xx()调用android中的方法

    (Android中的list须转换成json的字符串形式传入到js中,用eval(json)进行获取)

    <2>anroid中调用js的方法

    1:js中编写带参或不带参的方法 如function init(){alert("js中方法显示");}

    2:用webView.loadUrl("javascript:init()");进行调用显示即可

    三:webView加载html5全屏显示解决办法

    1:<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" user-scalable=no />

    四:webView的属性(必要的)

    myWebView.getSettings().setJavaScriptEnabled(true);//可以使用js

    myWebView.getSettings().setDefaultTextEncodingName("GBK");//设置编码格式

    myWebView.setWebViewClient(newWebViewClient());//限制在webview中打开网页,不用默认浏览器

    myWebView.getSettings().setBuiltInZoomControls();//设置是否支持缩放

    myWebView.addJavascriptInterface(obj,str);//向html页面注入java对象,在Android4.2之

    前并未限制此方法,根据java反射机制造成攻击,所以在此版本之后则限制了js对java对象方法调用的权

    限(必须声明注解公共的方法才能被页面调用)

    
    
    
    
    
    
    
    
     
    
     
    
     
    
    											在这里声明,如有不明确的地方请各位留言指教。
     
    
     
    

    展开全文
  • http://blog.csdn.net/u013658374/article/details/74902765 Android--Native与html5交互
  • AndroidHtml5交互的demo

    2016-05-21 15:25:15
    这是一个AndroidHtml5交互的小demo,说实在的这些小demo还太少了,之前为了解决Androidhtml5交互,遇到很多坑,希望分享给大家能让大家少走些弯路
  • android js 与html交互

    2011-09-17 11:26:05
    android js 与html交互android js 与html交互android js 与html交互
  • Android原生代码与HTML5交互
  • Android Html5 、JS交互

    千次阅读 2016-11-16 19:47:40
    Android与Html5、JS做交互

    Android与Html5、JS做交互分为两种情况。

    1. Html5调用Android的方法

        在Android上展示Html5的页面是通过控件WebView实现的,这我们都知道。而Html端若想调用Android的东西,只能通过Android端在load这个界面之前,给WebVeiw添加一个对象,然后Html端去获取这个对象。
    
        通过这个对象我们可以做很多东西,因为Html端获得这个对象后就可以调取这个对象内的任意方法。例如:传值、跳转等。
    
        首先来看Android端需要做的:
    
             1. 创建一个对象;
             2. 在onCreate()中讲这个对象传递过去;
             3. load这个页面;
    
        代码如下:
    
    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            wv_main_body = (WebView) findViewById(R.id.wv_main_body);
    
            // 把本类的一个实例添加到js的全局对象window中,
            wv_main_body.addJavascriptInterface(new InJavaScript(this), "android_lvstudio");
            wv_main_body.loadUrl("file:///android_asset/webpage.html");
    
        }
    `/**
     * 需要传递给Html端的对象类
     * @author LvStudio
     *
     */
    final class InJavaScript {
        private Context context;
    
        public InJavaScript() {
    
        }
    
        /**
         * 由于涉及到了跳转,上下文对象Context需要通过构造传过来。当然也可以传其他东西。
         * 
         * @param context
         */
        public InJavaScript(Context context) {
            this.context = context;
        }
    
        /**
         * 简单的点击跳转,不涉及参数及返回值。
         */
        @JavascriptInterface
        public void goNext() {
            Intent it = new Intent(context, OtherActivity.class);
            context.startActivity(it);
        }
    
        /**
         * 通过获取Html端的参数,进行操作后,将结果返回给Html端。
         * 
         * 此处可进行本地数据库操作,网络请求等,适需求而定。
         * 
         * @param num1
         * @param num2
         * @return
         */
        @JavascriptInterface
        public int queryData(int num1, int num2) {
            int sum = 0;
            sum = num1 + num2;
            return sum;
        }
    }`
    
        **然后是Html端需要做的就是通过这个对象调用相应的方法。**
        代码如下:
    
    window.android_lvstudio.goNext();// 跳转
    var sum = window.android_lvstudio.queryData(1,1); // 传值比获取返回值

    2. Android调用Html5的方法

    这块的操作就比较简单了,直接通过loadUrl()就可以了。
    
    简单的传字符串过去,代码如下:
    
    wv_main_body.loadUrl("javascript:writeInAndroid("+"这是传给Html端的参数"+")");// 向Html页面传值

    加班中仓促~~~,注意事项稍后补充。

    展开全文
  • Android与HTML5交互常见问题

    千次阅读 2016-12-08 15:51:01
    Android与HTML5交互常见问题
  • 安卓Android与H5(JS)交互(双向) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始的微信分享功能,今天增加的是反向需求,由APP...
  • Android笔记 AndroidwebView与HTML5交互 JavaScript java 交互 电商平台
  • Android与html交互的demo

    2016-08-06 11:29:45
    Android与html交互的demo
  • android与html5交互——数据库操作,UI操作,以及html5的localStorage、定位功能,还有简单的跳转页面
  • Android+html5交互

    2017-01-19 14:39:05
    Android + Html5交互 Android中使用WebView可加载html5,具体步骤如下: (前提:本地Html5存放到assets文件夹下) 一:使用WebView加载Html5,简单显示 1:清单文件中添加访问权限:android.permission....
  • HTML(JavaScript)与Android的webView控件相互通信,今天仔细研究才发现,这两者相互调用是非常简单的,只需要在Android里面调用JavaScript的方法,以及在JavaScript里面调用Android里面的方法即可完成,思路很简单,...
  • 很多同学都不知道,Android 如何 HTML5交互,例子讲的很详细。
  • Android利用JSBridge与HTML5交互使用

    千次阅读 2016-12-31 14:58:42
    最近在做一个论坛项目,项目当中涉及了Android Native与Html5之间的交互操作,其实主要也就是Java端JavaScript端的交互工作,由于本人新手一枚,此前并无此方面的经验,所以就在网上找了一些相关的资料,得知在...
  • Android原生代码与html5交互

    千次阅读 2016-08-16 09:53:47
    原文地址:http://www.cnblogs.com/zhaoleigege/p/5310355.html
  • 最新版安卓Android与H5(JS)交互(双向)开发Demo, 1,提示H5调用 2,安卓原生调用H5 3,JS反向调用安卓原生方法
  • App与Html5交互

    2018-01-19 10:52:16
    该代码主要针对android APP开发与HTML5交互中的一下问题
  • android 与html js交互

    2011-11-02 18:40:42
    android 浏览器事项网页js交互的经典例子,简单清晰。
  • 这是Android调用HTML5的过程 HTML5(文件名称为xxx.html)的代码:`<!DOCTYPE html> <html lang="zh-cn"> <title>HTML5代码 这是一号标题 这是六号标题 </body>
  • html5与安卓native交互,相互调用

    千次阅读 2017-03-23 23:39:51
    转发自http://blog.csdn.net/a38017032/article/details/47700325 html5与安卓native交互,相互调用 WebView的使用
  • Android与HTML5交互主要是两个部分, 与HTML5交互以及JavaScript的交互, 与HTML5交互可以通过注册onclick事件转化为JavaScript的交互Android与JavaScript的交互主要是通过相互调用方法实现的, Android对...
  • android h5 之间交互

    2018-01-05 15:44:16
    android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,521
精华内容 38,208
关键字:

安卓与html5交互