JavaScript與Android交互（Kotlin）

小夥伴們在使用安卓原生webview時常常能碰到js調用安卓手機相機、相冊或錄音等功能，前端小姐姐寫好了代碼功能，在IOS手機測試沒有問題，一到安卓手機裏功能怎麼就失效了呢，安卓程序員確定覺得本身代碼哪裏配置的有問題，一頓調試，最後發現仍是不行，因而乎各類百度谷歌，最後發現原來是webview本身的問題（順便吐槽下，爲何webview這個經常使用的控件，谷歌公司就不能優化下呢，坑太多了！），好了廢話很少說，進入正文。

先來講說什麼是JS交互：

說的通俗一點就是前端一些調用不了原生代碼的功能，或者在一些複雜頁面和混排頁面上，原生沒有網頁來得快，因此在實際項目中，不少狀況下都是原生頁面摻雜着webView 加載js的網頁的，這就涉及到二者之間的交互以及傳值問題。

Android調用JS方法：

• 經過WebView的loadUrl()調用（API小於等於18使用）
• 經過WebView的evaluateJavascript()調用（API大於18使用）

JS調用Android方法：

• 經過WebView的addJavascriptInterface()
• 經過WebViewClient的shouldOverrideUrlLoading()回調攔截url
• 經過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回調攔截JS對話框alert()、confirm()、prompt()方法
• 因爲方法二和方法三使用方法複雜，大多數同窗使用的都是方法一，可是方法一存在嚴重漏洞，這裏不作過多介紹。

Android調用Js方法

一、把須要測試的js代碼放到src/main/asserts文件夾下，測試代碼以下

二、配置wevView屬性，並寫一個測試按鈕進行點擊監聽

因爲是測試，我把js代碼文件放到了asserts進行加載測試，實際項目中是加載的連接，道理都同樣，按鈕點擊監聽結果：

三、Android調用js方法時傳值給js。有時候在Android調用js方法時須要傳遞參數給js，咱們只要在安卓端調用js方法內將參數拼進去便可，int類型可直接拼進去，string類型轉成json後傳給js，如圖：

結果顯示爲：

Android調用js方法時須要注意事項：

• 若是安卓剛打開頁面就去調用js方法通常狀況下是沒有反應的，緣由是js頁面尚未加載完畢，因此咱們須要監聽頁面加載完畢才能去調用js方法

• webview調用js方法時必須在主線程中調用

Android調用js兩種方法對比：

JS調用Android方法

1、經過WebView的addJavascriptInterface()

一、js調用Android方法時須要一個交互橋樑，交互橋樑的名字前端和Android起的名字必須同樣。

二、js代碼測試代碼爲：

三、點擊網頁內按鈕監聽事件，能夠看出js成功調用了安卓的toast方法：

四、優勢：使用簡單 缺點：存在嚴重漏洞

2、經過WebViewClient的shouldOverrideUrlLoading()回調攔截url

一、約定url協議

二、Android端重寫WebViewClient類的shouldOverrideUrlLoading()方法，註釋很清楚，直接看註釋

三、點擊網頁內按鈕，js成功調用了安卓的toast方法，參數傳遞也沒有問題：

四、優勢：不存在方法1中的漏洞 缺點：獲取返回值方法複雜，須要約束協議

3、經過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回調攔截JS對話框alert()、confirm()、prompt()方法

經常使用的攔截是 JS的輸入框（即prompt()方法），由於只有prompt()能夠返回任意類型的值，操做最全面方便、更加靈活

一、約定url協議

二、Android端複寫WebChromeClient類中對應彈框方法進行攔截並解析

三、能夠看出來攔截方法跟shouldOverrideUrlLoading()同樣，這裏就不上圖展現結果了

四、優勢：不存在漏洞 缺點：獲取返回值方法複雜，須要約束協議

Android和JS複雜交互

舉個栗子：JS在點擊頁面上一個按鈕時須要選取安卓手機相冊照片功能，選擇後須要安卓程序員把圖片上傳到後臺服務器，獲取到網絡連接後再把圖片連接經過loadUrl()或者evaluateJavascript()方法傳遞給H5端，來實現一個複雜交互過程。

說是複雜交互，其實仍是簡單交互的混合使用，只要理解了簡單交互的步驟和值傳遞，再複雜的交互相信你們也不在話下。