Android'de WebView ve JS arasındaki etkileşimin tam analizi
Her şeyden önce, hibrit olan ve esas olarak yerel Android ve h5'in karma gelişimi anlamına gelen bir kavram öne sürülmelidir. Bunu neden yapmak istiyorsun? Aynı etkinlik için, saf bir yerel geliştirme yöntemi kullanıyorsanız, hem Android hem de iOS'un aynı arayüz setini ve hatta mantığı sürdürmesi gerektiğini, bu nedenle geliştirme ve bakım maliyetinin çok büyük olacağını ve hibrit geliştirme yöntemini kullanırsanız, Ön uç öğrencilerin bir dizi arayüz ve mantık yazmasına izin verin. Yerel taraf için, onu görüntülemek için karşılık gelen kapsayıcıyı kullanın (Android için bu kapsayıcı elbette WebView'dur). Öyleyse neden tüm sayfalar bu şekilde geliştirilmiyor? Arayüzü görüntülemek için h5 kullanırken kullanıcı deneyimi her zaman yerelden daha düşük olduğundan, ikisi arasında bir değiş tokuşa ihtiyacımız var.
Hibritin ne olduğunu anlattıktan sonra, aşağıdaki senaryoları ele alalım:
-
Senaryo 1: Ön uç sayfasında bir düğme vardır Bu düğmeyi tıklamak, yerel bir bileşeni (bir kadeh kaldırmak gibi) görüntülemelidir veya bu düğmeyi tıklatmak, yerel tarafta zaman alan bir görevi gerçekleştirmelidir.
-
Senaryo 2: Ön sayfada hala bir düğme var Bu düğmeyi tıklamanın mantığı şudur: giriş yaptıysanız, ilgili arayüze atlayacaksınız; giriş yapmadıysanız, giriş arayüzüne atlayacaksınız. Ve bu giriş arayüzü yerelimiz tarafından korunmaktadır.
Yukarıdaki iki senaryoyu okuduktan sonra, herkesin de bir problem keşfettiğine inanıyorum: Hibrit geliştirme yöntemlerinde çözülmesi gereken bir sorun var, yani ön uç ve yerel iletişim. Aşağıda, aktif yerel Android ve h5 arasındaki iletişim yöntemi tanıtılacaktır.
WebView nasıl kullanılır
WebView kontrolünü kullanmak, diğer kontrollerle aynıdır. Düzende bir "WebView" etiketi kullanın. WebView, gezinme çubuğunu, adres çubuğunu ve diğer eksiksiz tarayıcı işlevlerini içermez. Yalnızca bir web sayfasını görüntülemek için kullanılır. Web sayfasını Web Görünümüne yükleyin ve loadUrl kullanın.
İnternete erişim izninin manifest dosyasına eklendiğini unutmayın:
< kullanım izni android: name = "android.permission.INTERNET" / >
Bununla birlikte, Android'de bir bağlantıya tıkladığınızda, başlamak için varsayılan, telefonda yüklü olan tarayıcı programını çağırmaktır. Bu nedenle, bu işlemi WebView aracılığıyla yapmak istiyorsanız, WebViewClient kullanmanız gerekir.
Elbette, WebViewClient nesnesini genişletmek için WebViewClient'i miras alan bir sınıf da yazabiliriz.
Daha sonra sadece setWebViewClient içeriğini değiştirmeniz gerekir
Ek olarak, kullanıcı alışkanlıkları nedeniyle WebView daha çok bir tarayıcı gibi davranmalı, yani geçmişe geri dönebilmelidir, bu nedenle sistemin geri düğmesini goBack, goForward geçmiş sayfasına ileri ve geri göz atabilir.
Örnek 1: WebViewClient Kullanımı
Düzen kodu activity_main.xml:
MainActivity kodu:
public class MainActivity, Activity {
özel Web Görünümü web Görünümü;
@Override
korumalı void onCreate (Bundle registeredInstanceState) {
super.onCreate (SavedInstanceState);
setContentView (R.layout.activity_main);
// Web görünümü denetimini edinin
webView = (WebView) findViewById (R.id.webView);
// WebViewClient'i kurun
/*webView.setWebViewClient(new MyWebViewClient); * /
// Sayfayı yüklemek için web görünümünü kullanın
webView.loadUrl ("
webView.setWebViewClient (yeni WebViewClient {
@Override
public boolean shouldOverrideUrlLoading (WebView görünümü, String url) {
view.loadUrl (url);
doğruya dön;
}
@Override
public void onPageStarted (WebView görünümü, String url, Bitmap favicon) {
// TODO Otomatik oluşturulan yöntem saplaması
super.onPageStarted (görünüm, url, favicon);
}
@Override
public void onPageFinished (WebView görünümü, String url) {
// TODO Aut (görünüm, url);
}
});
}
@Override
// Sistemin geri düğmesini geçersiz kıl
public boolean onKeyDown (int keyCode, KeyEvent olayı) {
eğer (keyCode == KeyEvent.KEYCODE_BACK webView.canGoBack) {
webView.goBack;
doğruya dön;
}
dönüş super.onKeyDown (keyCode, olay);
}
}
JavaScript ve java arasında karşılıklı çağrı
WebSetting çok kullanışlıdır.WebSetting aracılığıyla, Android'in yerel JavascriptInterface'i js ve Java arasında iletişim kurmak için kullanılabilir.
Örnek 2: JavaScript ve java arasında karşılıklı çağrılar
Önce bir parça html kodu yazıyoruz:
Bu, düğmeli çok basit bir HTML5 sayfası. Bu düğmeye tıklamak, js betiğindeki showToast yöntemini çalıştıracaktır.
Peki bu showToast yöntemi ne işe yarar?
Control.showToast'ı görebilirsiniz, bunun hakkında daha sonra konuşacağımız şey, Android projemizdeki java koduna bakalım.
Layout_main.xml düzen dosyasını yazın
Düzenin içeriği çok basittir, yani bir WebView denetimini yerleştirmek
MainActivity.java kodunu yazın
paket com.example.hybirddemo;
ithal android.annotation.SuppressLint;
android.app.Activity içe aktarımı;
android.os.Bundle'ı içe aktarın;
ithal android.util.Log;
ithal android.view.Menu;
ithal android.view.MenuItem;
android.webkit.JavascriptInterface'i içe aktarın;
android.webkit.WebSettings'i içe aktarın;
android.webkit.WebView dosyasını içe aktarın;
android.widget.Toast'u içe aktarın;
public class MainActivity, Activity {
özel Web Görünümü web Görünümü;
@Override
korumalı void onCreate (Bundle registeredInstanceState) {
super.onCreate (SavedInstanceState);
setContentView (R.layout.activity_main);
// Web görünümü denetimini edinin
webView = (WebView) findViewById (R.id.webView);
// WebView ayarlarını alın
WebSettings webSettings = webView.getSettings;
// JavaScript'i kullanılabilir olacak şekilde ayarlayın, bu cümle gereklidir, aksi takdirde her şey boşuna olacaktır
webSettings.setJavaScriptEnabled (true);
// Web görünümüne JavaScript arayüzü ekleyin
webView.addJavascriptInterface (yeni JsInterface, "kontrol");
// html sayfasını web görünümünden yükleyin
webView.loadUrl ("file: ///android_asset/MyHtml.html");
}
public class JsInterface {
@JavascriptInterface
public void showToast (String toast) {
Toast.makeText (MainActivity.this, tost, Toast.LENGTH_SHORT) .show;
Log.d ("html", "tost başarısını göster");
}
genel boşluk günlüğü (final String msg) {
webView.post (yeni Çalıştırılabilir {
@Override
public void run {
webView.loadUrl ("javascript günlüğü (" + "'" + msg + "'" + ")");
}
});
}
}
}
Yukarıdaki kod esas olarak aşağıdaki adımları gerçekleştirir:
a) Webview kontrolünü edinin
b) Web görünümü ayarlarını alın, JavaScript'i kullanılabilir olacak şekilde ayarlayın ve JavaScript kanalını açın
c) Android programında bir arayüz oluşturun ve ilgili mantığı yazın
Önceki js betiğindeki showToast yöntemine bakın
Buradaki kontrol bizim arayüzümüzdür. Arayüzün showToast metodu denir. Açıkçası bu, Android'i çağıran ve bir Toast çıkaran js kodudur.
Kontrol adını verdiğimiz bu arayüzü görebilir ve son olarak loadUrl aracılığıyla sayfayı yükleyebilirsiniz.
Önce bir tostun görüntülendiğini ve ardından log yönteminin çağrıldığını görebilirsiniz.Günlük yönteminde, js betiğinin günlük yöntemi çağrılır. Js'nin günlük yöntemi, konsolda msg çıktısını almaktır. Bu, açıkça Android'in js yöntemini çağırmasıdır.
d) Web görünümüne kendi JavaScript arayüzümüzü ekleyin
Web Görünümü'nün addJavascriptInterface yöntemi ile kendi yazdığımız bir arayüz enjekte edin.
e) Daha önce yazdığımız html dosyasını yüklemek için webview kontrolünü kullanın
Programı gerçek bir telefonda çalıştırın ve içeriği konsola başarıyla gönderin:
Bu şekilde js ve java arasındaki intermodülasyonu tamamladık, çok basit mi?
Android'de JS uyarılarını, iletişim kutularını vb. İşleme
Android'de JS uyarılarını, iletişim kutularını vb. İşlemek için WebChromeClient nesnesini WebView için ayarlamanız ve yaygın javascript iletişim kutularını işlemek için onJsAlert, onJsConfirm ve onJsPrompt yöntemlerini geçersiz kılmanız gerekir.
Örnek 3: Android'de javascript iletişim kutusunu işleme
1) html sayfa düzenini yazın
< % @ LANGUAGE = "JAVASCRIPT" CODEPAGE = "936"% >
< ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " >
< html xmlns = " >
< baş >
< meta http-equiv = "İçerik Türü" content = "text / html; charset = UTF-8" / >
< Başlık > Üç tür javascript iletişim kutusunu ayrı ayrı test edin < /Başlık >
< script language = "javascript" >
işlev ale
{
alert ("Bu bir uyarı iletişim kutusudur!");
}
fonksiyon firması
{
if (onayla ("Daha fazla bilgi için lütfen bloguma gidin?"))
{
location.href = "
}
Başka
{
alert ("Gitmemeyi seçtiniz!");
}
}
işlev balosu
{
var str = prompt ("Girişli bir iletişim kutusu gösterin", "Bilgilerinizi buraya girin");
eğer (str)
{
alert ("Kullandığınız için teşekkür ederiz, girdiğiniz şudur:" + str)
}
}
< /senaryo >
< / kafa >
< vücut >
< p > Aşağıda 3 çeşit iletişim kutusu gösteriyoruz < / p >
< p > Uyarı, hatırlatıcı iletişim kutusu < / p >
< p >
< input type = "submit" name = "Gönder" value = "Gönder" onclick = "ale" / >
< / p >
< p > Seçimle diyalog < / p >
< p >
< input type = "submit" name = "Gönder2" value = "Gönder" onclick = "firma" / >
< / p >
< p > Kullanıcı girişi gerektiren iletişim kutusu < / p >
< p >
< input type = "submit" name = "Gönder3" value = "Gönder" onclick = "prom" / >
< / p >
< /vücut >
< / html >
Sayfa etkisi:
2) Android'de yazma düzeni
3) Özel bir iletişim kutusunun düzenini yazın
Giriş içeren özel bir iletişim kutusunun TextView ve EditText'ten oluştuğu yeni bir prom_dialog.xml dosyası oluşturun
4) WebView kontrolünü alın ve ilgili ayarları yapın
5) Kullanıcı dönüş tuşuna bastığında onKeyDown yönteminin üzerine yaz, son yüklenen sayfaya dön
6) setWebChromeClient'i WebView'a ayarlayın ve içindeki yöntemi yeniden yazın
Şekil 1 dialog.html sayfası
Şekil 2 javascript uyarı iletişim kutusu
Şekil 3 javascript onayı iletişim kutusu
Şekil 4 javascript bilgi istemi iletişim kutusu
Özet: Bu projede, WebView'ın Javascript iletişim kutularını işlemesine yardımcı olmak için WebView için bir WebChromeClient nesnesi ayarlamak için setWebChromeClient yöntemini kullanın. Şekil 4 bizim özel iletişim kutumuzdur, Şekil 2 ve Şekil 3 yalnızca düğmeyi dinlememiz gerekir Etkinliği tıklayın ve ardından işlemimizi onaylama ve iptal etme yöntemleriyle işlenmek üzere Javascript'e geçirin. Şekil 1 arayüzünde ilk butona tıkladığınızda Şekil 2'deki diyalog kutusu açılacak ve ikinci butona tıkladığınızda Şekil 3'teki diyalog kutusu açılacaktır.Aynı zamanda diğerine atlamak için OK'e tıklayınız. Sayfada üçüncü butona tıkladığınızda Şekil 4'de gösterilen diyalog kutusu açılacak ve içerik girebileceksiniz.
