前言
由于最近接觸cordova開發，也就是webapp的開發，這是一種基于h5的一種開發的模式，也就是在原生态android和h5的混合開發。由于h5開發的速度比原生态的快，是以這個架構最大的好處是能幫助提高開發效率，架構的缺點，隻能說現在的原生态比h5的效果和流暢度更好，随着手機的發展，h5的展示肯定會随之變好。
代碼學習
在學習cordova之前呢，必須要先了解最基本的android和javascript的調用的方式，可以更好的了解cordova的代碼。
在android中調用javascript主要是通過webview的實作，通過向WebView中注入一個對象，來提供給js一個入口，js可以調用到注入類的方法。下面通過執行個體來展示。
示例
1.在布局main_activity.xml中，定義一個WebView以及其他的需要的控件。
2.在Manifest.xml中加入INTERNET的permission。
3.在工程的main/src/assets下建立一個index.html ，其中要寫入javascript的代碼。
<html>
<body>
<h4>我是一個webview</h4>
<p >打開相機</p>
<input id="btnClick" type="button" value="Open Camera" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
<!--andriod暴露給js的方法-->
JsBridge.exec("test");
};
<!--js方法，android可以調用-->
function func(string) {
alert(string);
}
</script>
</body>
</html>
4.在MainActivity中，需要設定WebView的參數，以及添加一個将要注入的類為JsObject。
首先是JsObject.java：
public class JsObject {
private Context mContext;
public JsObject(Context context) {
this.mContext = context;
}
// js通過此方法進行調用android本地方法
// android4.4後需要加入@JavascriptInterface注解,主要是為了防止惡意程式通過暴露的方法讓JS代碼控制宿主程式，
// 這是一個非常有力的特性，但是同時也存在一些安全問題，因為進一步JS代碼可以通過反射通路到注入對象的公有域。
// 攻擊者可能會在HTML和JavaScript中包含了有威脅性的代碼。
@JavascriptInterface
public void exec(String str) {
showCamera();
}
// 打開照相機
public void showCamera(){
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
mContext.startActivity(intent);
}
}
接着是MainActivity.java
public class MainActivity extends AppCompatActivity {
private Button mSendBtn;
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSendBtn = (Button) findViewById(R.id.send_btn);
mWebView = (WebView) findViewById(R.id.webview);
mSendBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// android調用js的方法
mWebView.loadUrl("javascript:func('android調用js')");
}
});
initWebView();
}
private void initWebView(){
// 設定編碼格式
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
// 支援js
mWebView.getSettings().setJavaScriptEnabled(true);
// 設定透明背景
mWebView.setBackgroundColor(Color.argb(, , , ));
// 向WebView中注入Object,友善JS的調用,也就是暴露方法給JS
mWebView.addJavascriptInterface(new JsObject(this), "JsBridge");
// Sets the chrome handler. This is an implementation of WebChromeClient
// for use in handling JavaScript dialogs, favicons, titles, and the
// progress. This will replace the current handler
// 通過webchromeclient,js可以有豐富的UI操作，如果沒有這一步，則js中的alert沒有辦法彈出dialog
mWebView.setWebChromeClient(new WebChromeClient());
// 加載本地呢的html頁面
mWebView.loadUrl("file:///android_asset/index.html");
}
}
到這裡，這個demo就完成了，比較簡單的一個示例，學習為主！
demo資源網址。
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)