準(zhǔn)備工作
1、下載JsBridgedemo
拷貝library/src/main/java/com/github/lzyzsd/jsbridge下源碼到自己的項(xiàng)目中
拷貝library/src/main/assets/目錄下WebViewJavascriptBridge.js到項(xiàng)目資源目錄
2、下載x5內(nèi)核Android SDK(完整版)
開啟x5內(nèi)核
在項(xiàng)目的Application中開啟x5內(nèi)核
/**
* 開啟x5內(nèi)核
*/
private void initX5WebView() {
//搜集本地tbs內(nèi)核信息并上報(bào)服務(wù)器,服務(wù)器返回結(jié)果決定使用哪個(gè)內(nèi)核。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
@Override
public void onCoreInitFinished() {
}
@Override
public void onViewInitFinished(boolean b) {
//X5內(nèi)核初始化完成,true使用x5內(nèi)核,false使用系統(tǒng)內(nèi)核
LogUtil.e("x5內(nèi)核使用:" + b);
}
};
//x5內(nèi)核初始化
QbSdk.initX5Environment(getApplicationContext(), cb);
}
當(dāng)日志輸入 x5內(nèi)核使用:false 時(shí),代表x5內(nèi)核開啟失敗,使用系統(tǒng)內(nèi)核。
原因之一,app之前用系統(tǒng)內(nèi)核,創(chuàng)建的數(shù)據(jù)庫(kù),x5無法使用。(日志會(huì)有輸出)
解決方法:刪除app重新安裝即可。
替換內(nèi)核
1、BridgeWebView中繼承的android.webkit.WebView替換為com.tencent.smtt.sdk.WebView
2、BridgeWebViewClient繼承的android.webkit.WebViewClient替換為com.tencent.smtt.sdk.WebViewClient
重寫WebChromeClient,使<input type="file" /> 生效
1、新建WebChromeClient,重寫文件上傳回調(diào)方法
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void openFileChooser(ValueCallback<Uri> valueCallback, String s, String s1) {
uploadMessage = valueCallback;
choosePicture();
}
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
uploadMessageAboveL = valueCallback;
choosePicture();
return true;
}
});
當(dāng)系統(tǒng)版本高于21(5.0)是,valueCallback.onReceiveValue()方法接收的是Uri數(shù)組,需要特殊處理。
2、打開系統(tǒng)照片選擇器
private void choosePicture() {
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_REQUEST_CODE);
}
3、選擇圖片并處理
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == FILE_CHOOSER_REQUEST_CODE) {
Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
if (uploadMessageAboveL != null) {
onActivityResultAboveL(data);
} else if (uploadMessage != null) {
uploadMessage.onReceiveValue(result);
uploadMessage = null;
}
}
}
4、高于5.0系統(tǒng)特殊處理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(Intent intent) {
Uri[] results = null;
if (intent != null) {
String dataString = intent.getDataString();
ClipData clipData = intent.getClipData();
if (clipData != null) {
results = new Uri[clipData.getItemCount()];
for (int i = 0; i < clipData.getItemCount(); i++) {
ClipData.Item item = clipData.getItemAt(i);
results[i] = item.getUri();
}
}
if (dataString != null)
results = new Uri[]{Uri.parse(dataString)};
}
uploadMessageAboveL.onReceiveValue(results);
uploadMessageAboveL = null;
}
H5端代碼
html
<img id="imgS" style="width: 50%; height: auto; margin: auto" >
<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);">
js
<script>
function selectFileImage(fileObj) {
//獲取文件
var file = fileObj.files['0'];
//創(chuàng)建讀取文件的對(duì)象
var reader = new FileReader();
//創(chuàng)建文件讀取相關(guān)的變量
var imgFile;
//為文件讀取成功設(shè)置事件
reader.onload=function(e) {
console.log('文件讀取完成');
imgFile = e.target.result;
console.log(imgFile);
<!--document.getElementById("imgS").src= imgFile;-->
document.getElementById("imgS").setAttribute("src",imgFile);
};
//正式讀取文件
reader.readAsDataURL(file);
}
</script>