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

1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:tools="http://schemas.android.com/tools"
4    android:layout_width="match_parent"
5    android:layout_height="match_parent"
6    android:orientation="vertical">
7
8    <WebView
9        android:id="@+id/wv_webview"
10        android:layout_width="fill_parent"
11        android:layout_height="fill_parent" />
12
13</LinearLayout>

　　（3）MainActivity.java

1public class MainActivity extends AppCompatActivity {
2
3    WebView webView;
4
5    @Override
6    protected void onCreate(Bundle savedInstanceState) {
7        super.onCreate(savedInstanceState);
8        setContentView(R.layout.webview);
9
10        webView = (WebView)findViewById(R.id.wv_webview);
11        loadWeb();
12    }
13
14    public void loadWeb(){
15        //String url = "https://www.baidu.com/";
16        String url = "file:///android_asset/index.html";
17        //此方法可以在webview中打开链接而不会跳转到外部浏览器
18        webView.setWebViewClient(new WebViewClient());
19        webView.loadUrl(url);
20    }
21
22
23    //重载onKeyDown的函数，使其在页面内回退,而不是直接退出程序
24    public boolean onKeyDown(int keyCode, KeyEvent event) {
25        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
26            webView.goBack();
27            return true;
28        }
29        return super.onKeyDown(keyCode, event);
30    }
31    
32}

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方法的支持

1　　　　　　//支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
2
3　　　　　　webView.getSettings().setJavaScriptEnabled(true);
4
5　　　　　　//支持弹窗，也就是支持html网页弹框　　　　　　webView.setWebChromeClient(new WebChromeClient(){    　　　　　  public boolean onJsAlert(WebView view,String url,String message,JsResult result ){       　　　　　　return super.onJsAlert(view,url,message,result);    　　　　　　}　　　　　　});
6
7　　　 （2）调用h5无参无返回值的方法（直接调用）　　　　　　h5方法：
8
9　　　　　　　function show(){   　　　　　　　　document.getElementById("temp").innerHTML = "Hello world";　　　　　　　}
10
11 　　　　　调用：
12
13　　　　　 webView.loadUrl("javascript:show()"); 　　　（3）调用h5有参无返回值的方法　　　　　　　当调用H5带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；当传入变量名时，需要用转义符。　　　　　　　h5方法：　　　　　　　　
14
15　　　　　　　function alertMsg(message){   　　　　　　alert(message);　　　　　　　}
16
17　　　　　　　调用：　　　　　　
18
19　　　　　　　webView.loadUrl("javascript:alertMsg('哈哈')");　　　　　　　String content = "9880";　　　　　　　webView.loadUrl("javascript:alertMsg(\""+content+"\")");　　　　（4）调用h5有返回值方法
20
21　　　　　　　function sum(i,j){   　　　　　　 return i+j;　　　　　　　}　　　　　　调用：
22
23　　　　　　webView.evaluateJavascript("sum(1,2)",new ValueCallback() {    　　　　　　@Override    　　　　　　public void onReceiveValue(Object value) {        　　　　　　Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();    　　　　　　}　　　　　　});　　　
24
25完整代码：       index.html
26
27<!DOCTYPE html>
28<html>
29<head>
30<title>测试</title>
31
32</head>
33<body onLoad="init();">
34    <div id="temp">h5页面</div>
35</body>
36<script type="text/javascript">
37
38
39    //无参无返回值的方法
40    function show(){
41        document.getElementById("temp").innerHTML = "Hello world";
42    }
43
44    //有返回值的方法
45    function sum(i,j){
46        return i+j;
47    }
48
49    //有参无返回值的方法
50    function alertMsg(message){
51        alert(message);
52    }
53
54</script>
55</html>
56
57　　　　webview.xml　　　　
58
59<?xml version="1.0" encoding="utf-8"?>
60<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
61xmlns:tools="http://schemas.android.com/tools"
62android:layout_width="match_parent"
63android:layout_height="match_parent"
64android:orientation="vertical">
65
66    <Button
67        android:id="@+id/btn"
68        android:layout_width="match_parent"
69        android:layout_height="wrap_content"
70        android:text="Button"
71        android:layout_marginBottom="12dp"
72        android:layout_marginTop="8dp"/>
73
74
75    <WebView
76        android:id="@+id/wv_webview"
77        android:layout_width="fill_parent"
78        android:layout_height="fill_parent" >
79
80
81    </WebView>
82
83</LinearLayout>
84
85MainActivity.java
86
87public class MainActivity extends AppCompatActivity {
88
89    WebView webView;
90    Button btn;
91
92    @Override
93    protected void onCreate(Bundle savedInstanceState) {
94        super.onCreate(savedInstanceState);
95        setContentView(R.layout.webview);
96
97        btn = (Button)findViewById(R.id.btn);
98
99        btn.setOnClickListener(new View.OnClickListener(){
100            public void onClick(View v){
101                //调用H5无参无返回值方法
102                webView.loadUrl("javascript:show()");
103                //调用H5有参方法
104                webView.loadUrl("javascript:alertMsg('哈哈')");
105                String content = "9880";
106                webView.loadUrl("javascript:alertMsg(\""+content+"\")");
107                //调用H5有返回值方法
108                webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
109                    @Override
110                    public void onReceiveValue(Object value) {
111                        Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
112                    }
113                });
114            }
115        });
116
117
118        webView = (WebView)findViewById(R.id.wv_webview);
119        loadWeb();
120
121    }
122
123    @SuppressLint("JavascriptInterface")
124    public void loadWeb(){
125
126        String url =  "file:///android_asset/index.html";
127        //此方法可以在webview中打开链接而不会跳转到外部浏览器
128        webView.setWebViewClient(new WebViewClient());
129        webView.loadUrl(url);
130
131        //支持弹窗，也就是支持html网页弹框
132        webView.setWebChromeClient(new WebChromeClient(){
133            public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
134                return super.onJsAlert(view,url,message,result);
135            }
136        });
137
138        //支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
139        webView.getSettings().setJavaScriptEnabled(true);
140    }
141
142
143    public boolean onKeyDown(int keyCode, KeyEvent event) {
144        //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
145        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
146            webView.goBack();
147            return true;
148        }
149        return super.onKeyDown(keyCode,event);
150    }
151
152
153}
154
155 三、H5如何调用Android中的方法    Android需要新建一个类，里边提供给H5操作的方法，并规定别名。　　（1）新建一个类　　　　
156
157　　　　public  class  JsInteration  {   　　　　 @JavascriptInterface    　　　　public  String  back() {        　　　　return "hello world";    　　　　}　　　　}　　　　（2）webView添加js接口，并起别名　　
158
159　　　　webView.addJavascriptInterface(new JsInteration(),"android");
160
161　　（3）H5调用　　　　
162
163　　　　window.android.back();    完整代码：    index.html
164
165<!DOCTYPE html>
166<html>
167<head>
168<title>测试</title>
169
170</head>
171<body onLoad="init();">
172    <div id="temp">h5页面</div>
173
174    <button id="btn" onclick="getMsg()">按钮</button>
175</body>
176<script type="text/javascript">
177
178    function getMsg(){
179        var result=window.android.back();
180          document.getElementById("temp").innerHTML=result;
181    }
182
183</script>
184</html>
185
186MainActivity.java
187
188public class MainActivity extends AppCompatActivity {
189
190    WebView webView;
191   
192    @Override
193    protected void onCreate(Bundle savedInstanceState) {
194        super.onCreate(savedInstanceState);
195        setContentView(R.layout.webview);    
196
197        webView = (WebView)findViewById(R.id.wv_webview);
198        loadWeb();
199
200    }
201
202    @SuppressLint("JavascriptInterface")
203    public void loadWeb(){
204
205        String url =  "file:///android_asset/dj_index.html";
206        //此方法可以在webview中打开链接而不会跳转到外部浏览器
207        webView.setWebViewClient(new WebViewClient());
208        webView.loadUrl(url);
209
210        /*
211          打开js接口，参数1为本地类名；参数2为别名
212         */
213        webView.addJavascriptInterface(new JsInteration(),"android");
214    }
215
216
217
218
219    public  class  JsInteration  {
220        @JavascriptInterface//一定要写，不然h5调不到这个方法
221        public  String  back() {
222            return "hello world";
223        }
224    }
225
226
227    public boolean onKeyDown(int keyCode, KeyEvent event) {
228        //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
229        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
230            webView.goBack();
231            return true;
232        }
233        return super.onKeyDown(keyCode,event);
234    }
235
236
237}

Android与H5混合开发

评论区

相关推荐