最近公司的项目需要用到H5来开发所以抽空来了解了一下H5因为是初学所以我用的是HBuilder来开发H5,HBuilder下载地址:点击下载而且HBuilder有一些现成的js和css可以让我这类初学者不用那么繁琐点击查看
这个是首页的代码页面就是一个webView所以就不贴了
package com.example.liuqiang.h5test;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.mWebView);
}
private void init(){
//可以是本地的也可以是网页的
webView.loadUrl("页面地址");
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(this, "test");
}
//可以写在一个公共类里面
//注意:方法的修饰符一定要是public
@JavascriptInterface
public void dd() {
Toast.makeText(this, "dd", Toast.LENGTH_LONG).show();
}
@JavascriptInterface
public void cc() {
Toast.makeText(this, "cc", Toast.LENGTH_LONG).show();
}
}
下面是HTML的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<ul style="height: 100%;" class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p style="margin-left: 20px;">面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p style="margin-left: 20px;">面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p style="margin-left: 20px;">面板1子内容</p>
</div>
</li>
<li style="margin:20px;">
<button type="button" οnclick="window.test.dd()" class="mui-btn">确认</button>
<button type="button" οnclick="window.test.cc()" class="mui-btn">取消</button>
</li>
</ul>
</body>
</html>