少年乘勇气，百战过乌孙。这篇文章主要讲述Android与H5混合开发相关的知识，希望能为你提供帮助。
        android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力，且具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以App和H5页面相结合就显得尤为重要。而android和H5都不可能独立存在，而是相互影响的。例如，H5页面要获取App中的用户的基本信息，App端要操作H5页面等。
        本文主要功能要点
【Android与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）新建一个类

publicclassJsInteration{
@JavascriptInterface
publicStringback() {
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"); }publicclassJsInteration{ @JavascriptInterface//一定要写，不然h5调不到这个方法 publicStringback() { 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); }}

 

推荐阅读

• 

  python画一朵花，python语言设计一个类代表花其中含2个对象属性2个方法建立2
• 

  世界上最奢华的腕表是哪个？你怎么看？
• 

  梦见蛇的七大预兆 梦见蛇是什么
• 

  萧条是什么意思 萧条的意思
• 

  如何解决企业服务器无法登录的问题？ 企业服务器登不进去怎么办
• 

  冰箱的节目——如何维修您的家用冰箱
• 

  诺言筹靠什么盈利
• 

  redis的高可用和高性能是怎么实现的? redis高性能中间件
• 

  西瓜可以和螃蟹一起吃吗
• 

  和平精英点券怎么获得
• 

  QuantumTunnel（内网穿透服务设计）
• 

  什么什么点头成语
• 

  露微花怎么养 微露花养护
• 

  法兰琳卡高端系列
• 

  每次关闭燃气灶前都要关闭阀门吗
• 

  天坑风水学 天坑在哪个方位
• 

  翡翠的福禄寿是什么颜色 福禄寿翡翠有什么寓意
• 

  湖北省江汉市怎么一直没成立 江汉市成立可能性有多大2020
• 

  适合男士的生日蛋糕 8寸蛋糕直径多少厘米，8寸是几公分
• 

  苹果M2芯片平板，苹果i Pad2 好使吗

• [Android] Toast问题深度剖析
• csharp: mappings using Dapper-Extensions+Dapper.net.
• Testin实验室（陌陌APP通过率为94.92% 基本满足移动社交需求）
• Android自定义控件练手——波浪效果
• Android项目实战（四十）（在线生成按钮Shape的网站）
• 纯净版xp系统安装虚拟机里面后连不上网怎样办
• win xp系统下打开不了pps文件怎样办|xp系统下打开pps文件的办法
• XP系统多了lpk.dll文件怎样办|XP系统查杀lpk.dll病毒的办法
• XP系统打开不了DAT格式文件怎样办|XP系统打开DAT格式文件的办法