Android与H5混合开发

Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力，且具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以App和H5页面相结合就显得尤为重要。而android和H5都不可能独立存在，而是相互影响的。例如，H5页面要获取App中的用户的基本信息，App端要操作H5页面等。

本文主要功能要点

1.webView如何加载H5页面

2.Android如何调用H5中的方法

3.H5如何调用Android中的方法
       

       一、webView如何加载H5页面

1.载入远程页面

（1）在AndroidManifest.xml文件中添加权限

<uses-permission android:name="android.permission.INTERNET"/>

　　  （2）布局文件webview.xml

<?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:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

　　    （3）MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView webView;

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

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();
    }

    public void loadWeb(){
        //String url = "https://www.baidu.com/";
        String url = "file:///android_asset/index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);
    }

    //重载onKeyDown的函数，使其在页面内回退,而不是直接退出程序
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

2.载入本地页面

（1）新建assets目录用来存放html页面

　　　　 右键app->new->folder->assetsfolder

（2）html页面放入assets目录

　　（3）修改url

　　   webview.loadUrl(file:///android_asset/index.html);

   二、Android如何调用H5中的方法

             （1）添加webview对调用js方法的支持

　　　　　　//支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
　　　　　　webView.getSettings().setJavaScriptEnabled(true);
　　　　　　//支持弹窗，也就是支持html网页弹框　　　　　　webView.setWebChromeClient(new WebChromeClient(){    　　　　　  public boolean onJsAlert(WebView view,String url,String message,JsResult result ){       　　　　　　return super.onJsAlert(view,url,message,result);    　　　　　　}　　　　　　});
　　　 （2）调用h5无参无返回值的方法（直接调用）　　　　　　h5方法：
　　　　　　　function show(){   　　　　　　　　document.getElementById("temp").innerHTML = "Hello world";　　　　　　　}
 　　　　　调用：
　　　　　 webView.loadUrl("javascript:show()"); 　　　（3）调用h5有参无返回值的方法　　　　　　　当调用H5带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；当传入变量名时，需要用转义符。　　　　　　　h5方法：　　　　　　　　
　　　　　　　function alertMsg(message){   　　　　　　alert(message);　　　　　　　}
　　　　　　　调用：　　　　　　
　　　　　　　webView.loadUrl("javascript:alertMsg(‘哈哈‘)");　　　　　　　String content = "9880";　　　　　　　webView.loadUrl("javascript:alertMsg(\""+content+"\")");　　　　（4）调用h5有返回值方法
　　　　　　　function sum(i,j){   　　　　　　 return i+j;　　　　　　　}　　　　　　调用：
　　　　　　webView.evaluateJavascript("sum(1,2)",new ValueCallback() {    　　　　　　@Override    　　　　　　public void onReceiveValue(Object value) {        　　　　　　Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();    　　　　　　}　　　　　　});　　　
完整代码：       index.html







<!DOCTYPE html>
<html>
<head>
<title>测试</title>

</head>
<body onLoad="init();">
    <div id="temp">h5页面</div>
</body>
<script type="text/javascript">

    //无参无返回值的方法
    function show(){
        document.getElementById("temp").innerHTML = "Hello world";
    }

    //有返回值的方法
    function sum(i,j){
        return i+j;
    }

    //有参无返回值的方法
    function alertMsg(message){
        alert(message);
    }

</script>
</html>









　　　　webview.xml　　　　









<?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:layout_height="match_parent"
android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginBottom="12dp"
        android:layout_marginTop="8dp"/>

    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

    </WebView>

</LinearLayout>





MainActivity.java









public class MainActivity extends AppCompatActivity {

    WebView webView;
    Button btn;

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

        btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                //调用H5无参无返回值方法
                webView.loadUrl("javascript:show()");
                //调用H5有参方法
                webView.loadUrl("javascript:alertMsg(‘哈哈‘)");
                String content = "9880";
                webView.loadUrl("javascript:alertMsg(\""+content+"\")");
                //调用H5有返回值方法
                webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
                    @Override
                    public void onReceiveValue(Object value) {
                        Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
                    }
                });
            }
        });

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        //支持弹窗，也就是支持html网页弹框
        webView.setWebChromeClient(new WebChromeClient(){
            public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
                return super.onJsAlert(view,url,message,result);
            }
        });

        //支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
        webView.getSettings().setJavaScriptEnabled(true);
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }

}





 三、H5如何调用Android中的方法    Android需要新建一个类，里边提供给H5操作的方法，并规定别名。　　（1）新建一个类　　　　


　　　　public  class  JsInteration  {   　　　　 @JavascriptInterface    　　　　public  String  back() {        　　　　return "hello world";    　　　　}　　　　}　　　　（2）webView添加js接口，并起别名　　


　　　　webView.addJavascriptInterface(new JsInteration(),"android");


　　（3）H5调用　　　　


　　　　window.android.back();    完整代码：    index.html



<!DOCTYPE html>
<html>
<head>
<title>测试</title>

</head>
<body onLoad="init();">
    <div id="temp">h5页面</div>

    <button id="btn" onclick="getMsg()">按钮</button>
</body>
<script type="text/javascript">

    function getMsg(){
        var result=window.android.back();
          document.getElementById("temp").innerHTML=result;
    }

</script>
</html>



MainActivity.java



public class MainActivity extends AppCompatActivity {

    WebView webView;

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

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/dj_index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        /*
          打开js接口，参数1为本地类名；参数2为别名
         */
        webView.addJavascriptInterface(new JsInteration(),"android");
    }

    public  class  JsInteration  {
        @JavascriptInterface//一定要写，不然h5调不到这个方法
        public  String  back() {
            return "hello world";
        }
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }

}



原文地址：https://www.cnblogs.com/daisy270/p/8444924.html
				


				
时间： 2024-10-10 12:58:55 

		


		


	

	
	

		


		
Android与H5混合开发的相关文章


						

		

			

                原生Android结合H5混合开发小结
			

		

		

									

				混合开发概述 微信,微博以及现在市面上大量的软件使用内嵌了H5页面:有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在IOS上直接复用页面, 从而提高开发效率. 实现的原理: 本质是:Java代码和Javascript调用 H5页面,只是Html的扩展,Javascript用来处理页面的逻辑 Android和H5互调案例: 一.java调用js WebView的基本设置: private void initWebView() { webView = new WebView(t			

		

	

						

		

			

                能挣钱的微信JSSDK+H5混合开发
			

		

		

									

				H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在大众创业就要从一个微信公众号开始,这个公众号可以有基本的1-3个功能,拿“悠泊停车”来说,刚开始就只有一个微信公众号,它代替了所有的Native APP功能,让“悠泊停车”迅速打开了市场,并拉来百万美元投资. 目前微信公众号开发已经遍地都是,但真正H5场景应用还少得可怜,大部分小企业都只有简单的菜单			

		

	

				

		

			

                ios&amp;h5混合开发项目仿app页面跳转优化
			

		

		

									

				前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段,我们的项目主要页面都是由网页做的,只有一些IM.支付.分享.推送.上传照片这些用的是原生功能,大家都知道ios原生app的体验一直是很好的,现在改成了混合开发,无疑中就有些舍弃了ios原生的用户体验,而这个作为一个向来以用户体验为先的开发人员来说,这个真的是难以忍受,所以开始了以优化用户体验的为目			

		

	

				

		

			

                H5混合开发二维码扫描以及调用本地摄像头
			

		

		

									

				今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码. 科普网址: H5如何生成安卓组件对象 H5调用安卓本地摄像头api 在线二维码图片生成器 二维码扫描:(使用的是mui的框架,下面是html代码) <!doctype html> <html>			

		

	

				

		

			

                H5混合开发APP配置以及第一个工程--博客园老牛大讲堂
			

		

		

									

				前段时间有人问我怎样用H5开发app,我恰好知道就把步骤粘出来,有不懂的地方给我留言,我再修改.--博客园老牛大讲堂 思想:首先用Hbuilder开发工程,把自己的工程粘贴到APICloud的工程里面.然后用网上的APICloud的内容打包内容. 环境:Hbuilder,夜神模拟器,APICloud开发工具. 提示:因为APICloud因为提示功能不好,所以建议如果想开发就用Hbuilder开发.开发完就把css,js,img粘里面就行了. 第一.首先下载一个APICloud开发环境(APICl			

		

	

				

		

			

                9-10【H5混合实战】基于自定义WebView实现H5混合开发-3
			

		

		

									

				封装好了WebView,下面来使用它.Nav里面每个图标点击会跳转到H5的页面. 跳转需要用到Navigator来push一个页面.然后里面使用MaterialPageRoute, 导入WebVIew这个widget 运行测试 点击 点击左侧的按钮可以返回. 点击返回,并没有返回到我们的首页,而是打开了另外一个H5页面 这个H5页面是携程的首页 怎么规避这个问题呢?接下俩就需要扩展我们的WebView来和H5之间进行一个混合. 在我们webView页面加载指定的url的时候.native做一些操			

		

	

				

		

			

                9-9【H5混合实战】基于定义WebView实现H5混合开发-2
			

		

		

									

				webview具体展示的内容,想让它撑满整个界面. 用Expanded这个widget 初始化加载的时候提示信息 目前WebView还有一个bug.即使我们默认让它隐藏,也设置了初始化加载的信息.但是 你会发现它是无效的.但是在不久的将来,它修复了这个bug ,就可以正常使用了. 状态栏的颜色的判断, 如果和String类型的颜色 转换成Color这个widget需要的参数 Color是接收一个int类型的颜色 首先需要知道颜色是6位还8位的.如果是6位的话就需要前面补两位.补0x表示16位,			

		

	

				

		

			

                Android混合开发，html5自己主动更新爬过的坑
			

		

		

									

				如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱.乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎... 近期公司让用h5混合开发.一些页面和功能有h5分担,最初时候放在本地assets目录下,后来因为前端同事频繁改动和更新.再加上数据安全方面考虑,决定把包放在serve			

		

	

				

		

			

                Android 混合开发，html5 自动更新爬过的坑
			

		

		

									

				现在使用混合开发的公司越来越多,虽然出现了一些新技术,比如Facebook的react native.阿里的weex,但依然阻挡不了一些公司采用h5的决心,当然,这也是从多方面考虑的选择. 在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱.乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎... 最近公司让用h5混合开发,一些页面和功能有h5分担,最初时候放在本地assets文件夹下,后来由于前端同事频繁修改和更新,再加上数据安全方面考虑,决定把包放在服务器,