Android和JS的简单交互

原创 2015年11月21日 20:47:13

先来看下Web App Hybrid App Native App的图形解析
这里写图片描述

Web App

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

优点:
(1)、开发成本低
(2)、更新快
(3)、无需通知用户更新,不需要手动升级
(4)、能够跨多个平台和终端

缺点:
(1)、临时性的入口
(2)、无法获得系统级别的通知,提醒,特效。。
(3)、用户留存率低
(4)、设计受限诸多
(5)、体验性差

Hybrid App

Hybrid App指的是半原生半web的混合类app,需要下载安装,看上去类似Native App,但是有很少的UI Web View,访问的内容是Web

Hybrid App极力的打造类似于Native APP的体验,但是受限于技术,网速等。。。

Native App

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

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

缺点:
(1)、开发成本高,不同平台有不同的开发语言和界面适配
(2)、维护成本高,(例如一款app,已经更新至V5版本,但是仍然有用户使用V3,V4版本,需要更多的开发人员维护之前的版本)
(3)、更新缓慢,根据不同的平台,提交–审核–上线等经过的流程较复杂

因为Native App是Web App 和Native App的交叉部分,那么就相当于继承了两个的优点。

三者之间的优缺点比较:

这里写图片描述

Android于HTML交互

交互的两种方式:
1、Android调用HTML

2、HTML调用Android

步骤:

1、设置允许执行的JS脚本

mWebView.getSettings().setJavaScriptEnabled(true);

2、添加通信接口

mWebView.addJavascriptInterface(mInterface, "app");

3、JS调用Android

mInterface.showName("hello javascript");

4、Android调用JS

mWebView.loadUrl("javascript:showName('"+name+"')");

WebView的三种加载方式:

//打开本包内assers目录下的index.html文件
    mWebView.loadUrl("file:///android_asset/index.html");

//打开本地sd卡内的index.html文件
    mWebView.loadUrl("content://com.android.thmlfileprovider/sdcard/index.html");

//打开指定URL的html文件
    mWebView.loadUrl("html://www.baidu.com(也就是地址)");

项目来说明使用:

**首先我们先创建一个Module
布局文件很简单:**

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:text="调用JS"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</LinearLayout>

创建一个assets包,在此包下创建一个html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5 测试</title>

<style type="text/css">
    .input{
        width:98%;
        height:38px;
    }
    .button{
        width:60%;
    height:20px;
    background:#fffeff;
    }
</style>
<script type="text/javascript">
       //js调用as
    function sayhello(){
        var name = document.getElementById("textName").value;
        app.sayHello(name);
    }

    //as调用js

    function showName(name){
        document.getElementById("textName").value = name;
    }
</script>
</head>
<body>
    <input id="textName" class="input">
    <br/>
    <hr>
    <button class="button" onclick="sayhello()">say hello</button>
</body>
</html>

然后activity活动代码:

这里写代码片
package com.example.ruolan.hybridapp;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView mWebView;

    private Button mButton;

    private WebAPPInterface mInterface;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webView);
        //打开本包内assets目录下的index.html文件
        mWebView.loadUrl("file:///android_asset/index.html");
        //1、设置允许执行的JS脚本
        mWebView.getSettings().setJavaScriptEnabled(true);
        mInterface = new WebAPPInterface(this);
        //2、添加通信接口
        mWebView.addJavascriptInterface(mInterface, "app");

        mButton = (Button) findViewById(R.id.button);
        mButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        //js调用as
        mInterface.showName("hello javascript");
    }

    class WebAPPInterface {

        public Context mContext;

        public WebAPPInterface(Context context) {
            this.mContext = context;
        }

        //js调用as
        @JavascriptInterface  //加上这一句话,不然的话在高版本的时候有可能报错
        public void sayHello(String name) {
            Toast.makeText(mContext, "name= " + name, Toast.LENGTH_SHORT).show();
        }

        //as调用js

        public void showName(final String name) {
            //要在子线程中更新ui,这里我们使用了runOnUiThread()线程
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:showName('" + name + "')");
                }
            });
        }
    }

}

当然了哈,如果是搞android的,那么我们只要写好android前端的代码,对html的调用提供一个封装好的接口,如果是html端,就会封装好android调用JS的接口。

好了,我们来上一些效果图:
刚开始的运行的图形:
这里写图片描述

点击了调用JS按钮(实现android调用js):
这里写图片描述

最后点击say hello按钮:
这里写图片描述

当然了,这里只是一个特别简单的一个例子,我们可以在我们的接口中来定义或者是写入更加复杂的代码,完成我们需要的效果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android:你要的WebView与 JS 交互方式 都在这里了

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由Android的WebView实现的,其中涉及到Android客户端与W...
  • carson_ho
  • carson_ho
  • 2017年03月22日 09:19
  • 80769

Android与HTML+JS交互入门

在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javasc...
  • leejizhou
  • leejizhou
  • 2016年03月15日 13:01
  • 36781

android中Webview与javascript的交互(互相调用)

最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主...
  • Beyond0525
  • Beyond0525
  • 2013年07月18日 23:07
  • 147805

WebView---Android与js交互实例

Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HT...
  • IT1039871366
  • IT1039871366
  • 2015年06月05日 09:37
  • 44823

Android与JS的交互汇总

1、首先看一下Android中webview的属性设置 //垂直不显示 this.setVerticalScrollBarEnabled(false); ...
  • quan648997767
  • quan648997767
  • 2017年04月05日 15:32
  • 429

浅谈混合开发与Android,JS数据交互

本文是作者原创,如转载请注明出处!一.概论 现在时代已经走过了移动互联网的超级火爆阶段,市场上移动开发人员已经趋于饱和,显然,只会原生APP的开发已不能满足市场的需求,随着H5的兴起与火爆,H5在原...
  • liuxu841911548
  • liuxu841911548
  • 2017年05月05日 17:39
  • 4639

Android与JS的交互简单实现

Android与JS的交互简单实现现在Android的势头慢慢已经趋向平稳.java的光辉岁月再一次燃烧(虽然java一直都是一颗常青树).Android为什么要使用js呢?如果一个webview都可...
  • fengltxx
  • fengltxx
  • 2016年11月26日 13:09
  • 4827

Android WebView 与JS的数据交互

关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术n...
  • cappuccinoLau
  • cappuccinoLau
  • 2012年12月05日 22:55
  • 125413

Android和H5(JS)简单交互

接着上一篇《WebView简单使用》加载好界面之后要有一个需求就是当用户点击页面上的一个按钮时,JS要调用Android本地的方法,下面就说下JS怎样调用Android本地的方法的: 首先需要先配置...
  • github_36962753
  • github_36962753
  • 2016年12月08日 17:33
  • 1195

android原生和H5交互

最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下 Android原生 和 H5 之间交互的方法,这里来总结一下: 1、hybrid通信,主要就是前端的js和我们Andr...
  • ManYiZilin
  • ManYiZilin
  • 2017年04月05日 15:33
  • 3447
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android和JS的简单交互
举报原因:
原因补充:

(最多只允许输入30个字)