android、IOS 基于webview 与 HTML 的集成

知识点：

1）android 和 html 的集成  
2）html 如何通过javascript 判断 客户端是 android 还是 IOS
3）IOS 和android 的集成 （我不懂IOS 的oc 开发，所以这部分我省略。。。。我是和我的一个IOS同事一同测试过的，html 是我写的）

html的代码

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>商城红包模拟页面</title>
</head>
<body>
<formmethod="post">
    <P>商品列表</P>
    <tablestyle="BORDER-RIGHT:#ff6600 1px dashed;BORDER-TOP:#ff6600 1px dashed; BORDER-LEFT:#ff6600 1px dashed; BORDER-BOTTOM:#ff6600 1px dashed; BORDER-COLLAPSE:collapse";borderColor=#000000;height=40;cellPadding=1;width=350px; border=1>
<tr>
<td>神州笔记本电脑</td>
    <td>3000.00 元</td>
    <td><buttononclick="javascript:sendOrderXml('神州笔记本电脑');">点我下单</button></td>
    </tr>
<tr>
    <td>联想笔记本电脑</td>
    <td>5000.00 元</td>
    <td><buttononclick="javascript:sendOrderXml('联想笔记本电脑');">点我下单</button></td>
</tr>
</table>
</form>   
</body>  
</html>
<script>
   var ua = navigator.userAgent.toLowerCase();
   var webType;
   
   if (/iphone|ipad|ipod/.test(ua)){
      webViewType = 'iphone';
   } else if (/android/.test(ua)){
      webViewType = 'android';   
   }else{
    webViewType='pc';
   }

   <!-- 下面的orderXml 是商城下单的详细内容信息  -->

   function sendOrderXml(orderXml){
      if('iphone'==webViewType){
      var f = document.forms[0];
      f.action="ios://orderxml="+encodeURI(orderXml);
      f.submit(); 
      }else if('android'==webViewType){
      window.myObj.dopay(encodeURI(orderXml));
      }else if('pc' == webViewType){
      window.myObj.dopay(encodeURI(orderXml));
      }
   }
</script>

Android 代码

package com.htjc.baseframe;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.LinearLayout;

public class WebViewActivityextends BaseActivtiy{

private WebView webview;
private LinearLayout ll_rootView;
@SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface" })
@Override
protected void onCreate(BundlesavedInstanceState) {

super.onCreate(savedInstanceState);
ll_rootView = new LinearLayout(this);
ll_rootView.setOrientation(LinearLayout.VERTICAL);
webview = new WebView(this);
WebSettings settings =webview.getSettings();


settings.setJavaScriptEnabled(true);
// webview.loadUrl("http://192.168.1.117:8080/webview/test.html");  
webview.loadUrl("file:///android_asset/test.html");  
webview.addJavascriptInterface(new JavaScriptObject(),"myObj");  
ll_rootView.addView(webview);
setContentView(ll_rootView);
}



public class JavaScriptObject {  

@JavascriptInterface
    /**
    * 此方法用于下单操作
    * @param name
    */

    public void dopay(Stringname){

      Log.i("xiexie",name+"----");
      String result="";
      try {
        result = URLDecoder.decode(name,"UTF-8");
      } catch (UnsupportedEncodingExceptione) {
      e.printStackTrace();
    }
    System.out.println(result);
    Log.i("xiexie11",result+"----");
    }

}  
}

android、IOS 基于webview 与 HTML 的集成

猜你喜欢