最近公司的项目需要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>