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