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><buttonοnclick="javascript:sendOrderXml('神州笔记本电脑');">点我下单</button></td>
    </tr>
<tr>
    <td>联想笔记本电脑</td>
    <td>5000.00 元</td>
    <td><buttonοnclick="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+"----");
    }

}  
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3D WebView是一个用于AndroidiOS Web浏览器的工具,用于创建具有3D功能的交互式Web体验。 它为开发人员提供了一种将现有的Web内容转换为3D内容的方式,使用户可以在浏览器中与这些内容进行交互。通过使用3D WebView,开发人员可以利用现有的Web技术来构建令人惊叹的3D效果,并为用户提供更丰富的体验。 这个工具具有许多优点。首先,它可以轻松集成到现有的AndroidiOS应用程序中,无需大量的代码修改。开发人员只需要添加一些简单的代码来创建3D WebView实例,然后将其嵌入到应用程序的界面中即可。 其次,使用3D WebView,开发人员可以利用Web技术中的强大功能,例如HTML5和CSS3,来创建具有各种3D效果的内容。这些效果可以包括旋转、缩放和动画等,让用户在浏览器中获得更沉浸式的体验。 此外,3D WebView还提供了与设备硬件的集成功能。开发人员可以使用设备的传感器(例如加速度计和陀螺仪)来实现更丰富的3D体验。这使得开发人员可以创建响应用户交互的应用程序,提供更精确的控制。 最后,3D WebView还提供了一些工具和指导,以帮助开发人员更轻松地构建3D Web内容。这些工具包括示例代码、文档和社区论坛,供开发人员交流和分享经验。 总的来说,3D WebView是一个强大而灵活的工具,可以帮助开发人员创建具有3D功能的交互式Web体验。它提供了许多优势,使得开发人员能够更轻松地实现令人惊叹的3D效果,并且为用户提供更优质的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值