继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android与h5交互

米脂
关注TA
已关注
手记 492
粉丝 88
获赞 590

最近公司的项目需要Android原生结合H5进行开发!于是乎就去捣鼓捣鼓了下!!!!!!

在页面布局很复杂并且是动态的时候,android本身的控件就变得不是那么地灵活了,只有借助于网页的强大布局能力才能实现,但是在操作html页面的同时也需要与android其它的组件存在交互,比如说

在load一个url时, 用户点击页面内的某个按钮后, 页面调用android内的组件函数或由android组件去调用JS代码去更新页面,这都是交互问题,听起来很复杂,其实不用担心,webview这个类已经帮我们实现了,只需要直接用就好了。

不多说先上代码:

1、首先先设置web

        web=(WebView)findViewById(R.id.web);
        //设置支持js
        web.getSettings().setJavaScriptEnabled(true);
        //支持alert
        web.setWebChromeClient(new WebChromeClient());
        //加载网页
        web.loadUrl(AppApplication.URL);
        /////////////////////////////////////////////让js页面用手机格式打开///////////////////////////////////////
        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
        web.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // TODO Auto-generated method stub
                //返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
                view.loadUrl(url);
                return true;
            }
        });
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////
        //添加js调用接口类,通过Android这个字段 调用这个类的方法
        web.addJavascriptInterface(new JsPrint(), "android");

        mPrintManager = (PrintManager) this.getSystemService("iboxpay_print");
        //二维码的回调
        qr=new QrCode();
        qr.QrCode(new CallBackQrCodeScan() {
            @Override
            public void QrCodeScanRetrun(String value) {
                // TODO Auto-generated method stub
                //Android调用js自定义函数把二维码返回参数传递给js端
                web.loadUrl("javascript:RetrunQrCodeValue('"+value+"')");
                //android 调用js方法
//             web.loadUrl("javascript:alert(123)");
                //Android自己调自己的函数
//             web.loadUrl("javascript:window.Android.getPayMethods()");
            }
        });

这里注意需要在AndroidManifest.xml文件中添加权限,否则出现Web page not available错误。

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

2、这里是js需要调用的方法

public class JsPrint
{
    //供js调用的打印方法
    @JavascriptInterface
    public void printStart(String printJson)
    {
        Print print = AppApplication.gson.fromJson(printJson, Print.class);
        if(spc.getSharedValues("JUDGMENTMODEL"," ").equals(""))
        {
            printText(print);
       }
        else
        {
            T.showShort(WebH5Activity.this,"盒子打印");
        }

    }
    //供js调用的二维码方法  String printContent
    @JavascriptInterface
    public  void   getQrCodeValue( )
    {
        Scanning();
    }
    //供js调用的支付方法
    @JavascriptInterface
    public void  getPayMethods(String payJson)
    {
        Pay pay=AppApplication.gson.fromJson(payJson, Pay.class);
        //拉卡拉支付
        if(spc.getSharedValues("JUDGMENTMODEL"," ").equals(""))
        {
            PayMoney(pay);
        }
        //盒子支付
        else
        {
            T.showShort(WebH5Activity.this,"盒子支付");
        }
    }
    //供js调用的非接触式ic卡
    @JavascriptInterface
    public void  getContactlessIcCard()
    {
        startActivity(new Intent(WebH5Activity.this,IcActivity.class));
    }
}

4、下面上一下js端的代码:

<button id="getQrCode" ="window.android.getQrCodeValue()">调用二维码</button>
<button id="pay" ="getPayMethods()">调用支付</button>
<button id="getplay" ="printStart()">调用打印</button>
<button id="getic" ="window.android.getContactlessIcCard()">调用ic卡</button>
<script type="text/javascript">
   //打印调用
   function printStart()
   {
       var printValue= {name:"cxh",sex:"man" };
       window.android.printStart(JSON.stringify(printValue));
   }
   //支付调用
   function getPayMethods()
   {
      var payValue={"proc_tp":"00","pay_tp":"0","amt":"0.01","msg_tp":"0200","proc_cd":"000000","order_no":"123456789","appid":"appid","time_stamp":"2017/5/27 13:09","order_info":"123456"};
      
    window.android.getPayMethods(JSON.stringify(payValue));
   }
   //二维码的回调函数
    function  RetrunQrCodeValue(data)
    {
        alert("返回数据"+data);
    }
    //支付的回调函数
    function  PayRetrunValue(data)
    {
        alert("返回数据"+data);
    }
    //打印回调函数
    function  RetrunPrint(data)
    {
        alert("返回数据"+data);
    }
   //ic卡返回回调函数
   function RetrunIc(data)
   {
     alert("返回状态值"+data)
   }
</script>

原文链接:http://www.apkbus.com/blog-839077-68008.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP