整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
日常開(kāi)發(fā)中，為了方便數(shù)據(jù)的輸入和輸出，JavaScript提供了一些常用的輸入輸出語(yǔ)句，具體如表1-3所示。
表1常用的輸入輸出語(yǔ)句
類型 | 語(yǔ)句 | 說(shuō)明 |
輸入 | prompt() | 用于在瀏覽器中彈出輸入框，用戶可以輸入內(nèi)容 |
輸出 | alert() | 用于在瀏覽器中彈出警告框 |
document.write() | 用于在網(wǎng)頁(yè)中輸出內(nèi)容 | |
console.log() | 用于在控制臺(tái)中輸出信息 |
接下來(lái)將分別演示document.write0、console.log0和promptO的使用。
1. document.write()
document.write0的輸出內(nèi)容中如果含有HTML標(biāo)簽，會(huì)被瀏覽器解析。下面利用documenL.write0在頁(yè)面中輸出“我是document.write0語(yǔ)句!”，示例代碼如下。
document.write('我是document.write()語(yǔ)句！');2. console.log()
利用console.log0語(yǔ)句在控制臺(tái)輸出“我是console.log0語(yǔ)句!”，示例代碼如下。
console.log('我是console.log()語(yǔ)句!');console:.log0的輸出結(jié)果需要在瀏覽器的控制臺(tái)中查看。在Chrome 瀏覽器中按“F12”鍵(或在網(wǎng)頁(yè)空白區(qū)域右擊，在彈出的菜單中選擇“檢查”)啟動(dòng)開(kāi)發(fā)者工具，然后切換到“Console”(控制臺(tái))面板，即可看到console.log0的輸出結(jié)果。
3.prompt()
利用prompt0語(yǔ)句實(shí)現(xiàn)在頁(yè)面中彈出一個(gè)帶有提示信息的輸入框，示例代碼如下。
prompt(請(qǐng)輸入姓名：');上述示例代碼運(yùn)行后，將在頁(yè)面中彈出一個(gè)輸人框并提示用戶“請(qǐng)輸人姓名：”提示框。
求出現(xiàn)的原因是這樣的:
我們有一個(gè) h5 頁(yè)面既需要嵌套到 App 內(nèi)部進(jìn)行用戶的信息填寫(xiě)及提交，同時(shí)這個(gè) h5 頁(yè)面也能夠單獨(dú)使用。 而這些用戶信息中就包括 `input`框選擇圖片。 <input type="file" name="avatar" id="avatar" />
出現(xiàn)了什么問(wèn)題呢？
那么問(wèn)題就出在 input 框這里，點(diǎn)擊這個(gè) input 框，調(diào)起 android 手機(jī)自帶的拍照和選擇文件的對(duì)話框。
小米手機(jī)系統(tǒng)調(diào)起
只要選擇「圖片」或者「拍照」都沒(méi)有問(wèn)題
問(wèn)題就出現(xiàn)在選擇「取消」的時(shí)候
出現(xiàn)了問(wèn)題，需要先解決點(diǎn)擊「取消」程序卡死的問(wèn)題
這個(gè)問(wèn)題，這篇文章已經(jīng)介紹過(guò)了
H5 通過(guò) input 標(biāo)簽，調(diào)起 Android 手機(jī)相冊(cè)，點(diǎn)擊取消時(shí)手機(jī)卡住
如果之前沒(méi)有配置過(guò)，可以參考配置一下。
下面說(shuō)今天的正題，就是點(diǎn)擊取消之后，如果之前頭像內(nèi)有圖片，那么取消后會(huì)把之前的圖片干掉，展示出一個(gè)加載錯(cuò)誤的樣子
原因找到了：當(dāng)取消的時(shí)候，為了避免卡頓，返回了一個(gè)圖片的路徑，但是這個(gè)圖片路徑上對(duì)應(yīng)的圖片是不存在的，從而導(dǎo)致了 H5 img 位置 顯示加載失敗
加載失敗
那么現(xiàn)在問(wèn)題就來(lái)了：
如果不返回，就會(huì)卡頓；
如果返回了，就把 img 之前的展示圖片給干掉了
怎么辦呢？
我這邊的思路是:
將原來(lái)的 img 標(biāo)簽內(nèi)的 src 的內(nèi)容存儲(chǔ)到本地，然后判斷：如果用戶點(diǎn)擊了取消，那么就將這個(gè)原來(lái)的 src 內(nèi)容返回回去
那么這樣操作的話，就需要知道，如何拿到 img 標(biāo)簽中的 src 的內(nèi)容。
那么實(shí)際需要做這么幾部
1、這個(gè)需要和 H5 或者后臺(tái)溝通一下，將 H5 中的 這個(gè)頭像的 id 唯一，以保證能唯一找到這個(gè)頭像。
2、根據(jù) id 找到這個(gè) img 標(biāo)簽后，再拿 src 中的內(nèi)容存儲(chǔ)到本地
3、判斷用戶點(diǎn)擊取消時(shí)，將本地存儲(chǔ)的圖片 src 內(nèi)容，返回給 H5。
第三點(diǎn)已經(jīng)在
H5 通過(guò) input 標(biāo)簽，調(diào)起 Android 手機(jī)相冊(cè)，點(diǎn)擊取消時(shí)手機(jī)卡住
這個(gè)文章中提到過(guò)了，找到合適的位置直接返回即可。
所以本篇文章中的重點(diǎn)就是第一步：根據(jù) id 找到 src 的內(nèi)容。
1、創(chuàng)建 addJavascriptInterface 需要的「操作對(duì)象」，這個(gè)操作對(duì)象就是一個(gè)類，名字隨便起，不過(guò)內(nèi)部的方法必須添加@JavascriptInterface注解
//內(nèi)部類
final class InJavaScriptLocalObj {
private static final String TAG = "MainActivity";
/**
* @JavascriptInterface 必須要有的哦
* @param html
*
* 一旦檢測(cè)到 html 匹配到了要找的元素或者屬性，這里就會(huì)調(diào)用，否則不會(huì)調(diào)用這個(gè)方法
*/
@JavascriptInterface
public void showAvatar(String html) {
Log.e(TAG, "showAvatar: " + html);
}
}
2、配置 webview
private void initWebView() {
/**
* 三項(xiàng)均需配置
*/
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
/**
* ambassador_avatar 是和后臺(tái)（h5）商議的唯一的 id
*/
view.loadUrl("javascript：window.local_obj.showAvatar(document.getElementById('ambassador_avatar').getAttribute('src'));");
}
});
}
那么找元素關(guān)鍵的一句，就是
view.loadUrl("javascript：window.local_obj.showAvatar(document.getElementById('ambassador_avatar').getAttribute('src'));");
備注
找元素的方法很相似，就是跟 html 中的找 dom 節(jié)點(diǎn)一樣
可以移步到 w3school 逛網(wǎng)看一看
dom 元素查找方法
這里小總結(jié)一下
通過(guò) id 查找 HTML 元素
通過(guò)標(biāo)簽名查找 HTML 元素
通過(guò)類名查找 HTML 元素
通過(guò) CSS 選擇器查找 HTML 元素
通過(guò) HTML 對(duì)象集合查找 HTML 元素
var myElement = document.getElementById("intro");//返回單個(gè)元素
var x = document.getElementsByTagName("p");//返回元素列表
var x = document.getElementsByClassName("intro");//返回元素列表
var x = document.querySelectorAll("p.intro");//返回元素列表
var x = document.forms["frm1"];//返回元素列表
返回元素列表的方法在使用是 需要像數(shù)組那樣去取得對(duì)應(yīng)的元素，如x[0]
拿到元素之后，通過(guò) DOM 的文檔，拿到想要的屬性、值等等信息。
這樣就能通過(guò)存儲(chǔ)原來(lái)的圖片信息，在點(diǎn)擊取消的時(shí)候把信息返回，解決了本次需求的問(wèn)題。
謝謝大家的收藏、關(guān)注、轉(zhuǎn)發(fā)，持續(xù)更新！
首先映入眼簾的是slf4j，全稱是Simple Logging Facade for Java。從名字可以看出來(lái)這是一個(gè)日志框架，采用了Facade的設(shè)計(jì)模式，說(shuō)白了，這是一個(gè)日志框架接口，應(yīng)用程序里使用slf4j的接口來(lái)打印日志，具體的日志框架可以自由選擇，這樣做是為了方便適配不同的日志框架，比如logback，log4j2等。
官方網(wǎng)站是 http://www.slf4j.org/index.html
log4j是apache的開(kāi)源項(xiàng)目，現(xiàn)在已經(jīng)到2.0版本，所以也叫l(wèi)og4j2，官方網(wǎng)站是
http://logging.apache.org/log4j/2.x/index.html
所以本文的日志打印就是通過(guò)應(yīng)用程序里使用slf4j的接口，然后具體的日志框架是log4j2。
實(shí)驗(yàn)代碼都在上傳在 https://gitee.com/kunpengku/learn-log4j
首先需要增加對(duì)日志框架包的依賴，如下
<dependencies>
<!-- 這個(gè)依賴是slf4j的api-->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.28</version>
</dependency>
<!--下面這兩個(gè)依賴是log4j2的實(shí)現(xiàn)-->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-api</artifactId>
<version>2.13.3</version>
</dependency>
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-core</artifactId>
<version>2.13.3</version>
</dependency>
<!-- 下面這個(gè)依賴是 log4j 橋接slf4j用的-->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-slf4j-impl</artifactId>
<version>2.13.3</version>
</dependency>
</dependencies>import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class LogMain {
static Logger logger = LoggerFactory.getLogger(LogMain.class);
public static void main(String[] args) {
logger.error("Hello World");
}
}這就log4j的helloworld，這是還沒(méi)有任何的配置文件，這時(shí)，log4j會(huì)提供一個(gè)默認(rèn)的配置文件，只能輸出到console上，這里要注意，默認(rèn)配置的Log Level是ERROR的，所以只有ERROR級(jí)別及其以上的打印才能輸出看到，如果這里打印一個(gè)info的日志，是不會(huì)輸出到屏幕的，因?yàn)榧?jí)別太低，過(guò)濾掉了。
輸出
08:17:18.767 [main] ERROR com.kpk.LogMain - Hello World
未完待續(xù)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
