好久沒有動過部落格了，近段時間公司沒啥事情，是以利用這點時間給大家分享一些學到的東西，當然本人技術有限可能難免會有些錯誤，也希望各位看官多多指引，好了今天給大家說的是我們現在在一些電商應用裡面經常會涉及的一些技術點如Android原生與前端之間的互動，當然現在各大公司都推出一些架構如weex,cordova等等供大家使用學習，但作為一名普通開發者，我們還是先把最基本搞懂，開篇前可能還是希望大家先熟悉下webview的基本用法和或多或少了解一點h5的文法；
/**
* Android通過WebView調用 JS 代碼
* 對于Android調用JS代碼的方法有2種：
1. 通過WebView的loadUrl（）友善簡潔 效率低擷取傳回值麻煩，使用場景：對應就是不需要傳回值及對性能要求不高
2. 通過WebView的evaluateJavascript（）效率高及擷取傳回值更友善(該方法的執行不會使頁面重新整理)缺點是向下相容性差(android4.4以上這也是其使用場景)
*/ public class MainActivity extends AppCompatActivity {
private WebView mWv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWv = ((WebView) findViewById(R.id.wv));
WebSettings mWvSettings = mWv.getSettings();
//設計與js互動的權限
mWvSettings.setJavaScriptEnabled(true);
//設定允許js彈窗
mWvSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//先載入js代碼
//格式規定為:file:///android_asset/檔案名.html
mWv.loadUrl("file:///android_asset/javascript.html");
//由于設定了彈窗檢驗調用結果，是以需要js支援對話框
//webview隻是載體，内容渲染需要WebChromeClient類去實作
//通過設定WebChromeClient對象處理JavaScript對話框
//設定響應js的Alert函數
mWv.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
b.setTitle("kevin");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
/*
特别注意：JS代碼調用一定要在 onPageFinished（） 回調之後才能調用，否則不會調用。
onPageFinished()屬于WebViewClient類的方法，主要在頁面加載結束時調用
mWv.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Toast.makeText(MainActivity.this,"加載完成",Toast.LENGTH_SHORT).show();
}
});*/
}
public void goTransfer(View view) {
//通過handler發送消息
mWv.post(new Runnable() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void run() {
//方式一:loadUrl方法；加載js中對應的方法(方法名一定要對)
// mWv.loadUrl("javascript:callJS()");
//方式二:evaluateJavascript（）
/* 優點：該方法比第一種方法效率更高、使用更簡潔。
因為該方法的執行不會使頁面重新整理，而第一種方法（loadUrl ）的執行則會。
Android 4.4 後才可使用*/
/* mWv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
Toast.makeText(MainActivity.this,"傳回值:"+s,Toast.LENGTH_SHORT).show();
}
});*/
//為了更好的相容性 推薦這樣使用
final int version = Build.VERSION.SDK_INT;//安卓版本變量
if(version < 18){
//Android4.4以下
mWv.loadUrl("javascript:callJS()");
}else {
//Android4.4及以上時
mWv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
Toast.makeText(MainActivity.this,"傳回值:"+s,Toast.LENGTH_SHORT).show();
}
});
}
}
});
}
} 好了！看了這些注釋大家應該了解了，接下來我貼出本地html代碼(通常放在assets目錄下與java檔案夾平級)及布局代碼
// 文本名：javascript
<html>
<head>
<meta charset="utf-8">
<title>yanxun</title>
// JS代碼
<script>
// Android需要調用的方法
function callJS(){
alert("Android調用了JS的callJS方法");
}
</script>
</head>
</html> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="yanxun.com.webviewandjsdemo.MainActivity">
<WebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_margin="10dp"
android:background="#fdfdfd"
/>
<Button
android:text="點我調用js代碼"
android:layout_margin="10dp"
android:onClick="goTransfer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
好了，這篇主要說了下webview去調用js,下篇我們來看看更重要的js調用webview,tips-一般webview會涉及網絡操作大家别忘了添權重限哦，！！
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)