本文采用Flutter官方WebView插件：https://pub.dartlang.org/packages/webview_flutter

WebView與JS互相調(diào)用是一個(gè)剛需，但是貌似現(xiàn)在大家寫(xiě)的文章講的都不是很清楚，我這個(gè)簡(jiǎn)易指南簡(jiǎn)單粗暴地分為兩部分：JS調(diào)用Flutter和Flutter調(diào)用JS，拒絕花里胡哨，保證一看就懂，一學(xué)就會(huì)。

開(kāi)始之前先簡(jiǎn)單了解一下官方WebView所包含的API：

• onWebViewCreated：在WebView創(chuàng)建完成后調(diào)用，只會(huì)被調(diào)用一次；
• initialUrl：初始load的url；
• javascriptMode：JS執(zhí)行模式（是否允許JS執(zhí)行）；
• javascriptChannels：JS和Flutter通信的Channel；
• navigationDelegate：路由委托（可以通過(guò)在此處攔截url實(shí)現(xiàn)JS調(diào)用Flutter部分）；
• gestureRecognizers：手勢(shì)監(jiān)聽(tīng)；
• onPageFinished：WebView加載完畢時(shí)的回調(diào)。

JS調(diào)用Flutter

JS調(diào)用Flutter有兩種方法：使用javascriptChannels發(fā)送消息和使用路由委托（navigationDelegate）攔截url。

方法1：使用javascriptChannels發(fā)送消息

javascriptChannels參數(shù)可以傳入一組Channels，我們可以定義一個(gè)_alertJavascriptChannel變量，這個(gè)channel用來(lái)控制JS調(diào)用Flutter的toast功能：

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
 return JavascriptChannel(
  name: 'Toast',
  onMessageReceived: (JavascriptMessage message) {
   showToast(message.message);
  });
 }

WebView(
 avascriptChannels: <JavascriptChannel>[
  _alertJavascriptChannel(context),
 ].toSet(),
;

在上面的代碼中，我們定義了一個(gè)_alertJavascriptChannel變量，并給它起了個(gè)name叫Toast，這個(gè)name屬性接收的是一個(gè)字符串，它代表了JS調(diào)用Flutter時(shí)，雙方共同商定好了的一個(gè)協(xié)議，JS通過(guò)這個(gè)name去post對(duì)應(yīng)的信息給Flutter（API為name.postMessage('xxxxxx')）。我們?cè)诰W(wǎng)頁(yè)部分寫(xiě)一個(gè)簡(jiǎn)單的button，點(diǎn)擊后開(kāi)始JS調(diào)用Flutter的邏輯：

<button onclick="callFlutter()">callFlutter</button>

function callFlutter(){
 Toast.postMessage("JS調(diào)用了Flutter");
}

onMessageReceived為Flutter接收到了JS的消息之后的回調(diào)，我們可以通過(guò)message.message來(lái)獲取JS發(fā)給我們的消息內(nèi)容。JavascriptMessage類(lèi)暫時(shí)只有一個(gè)String類(lèi)型的message成員變量，所以如果需要傳遞復(fù)雜數(shù)據(jù)，可以通過(guò)傳遞json字符串來(lái)解決。

代碼重點(diǎn)：JavascriptChannel中的name要與JS中的name.postMessage()相對(duì)應(yīng)??！

方法2：使用路由委托navigationDelegate攔截url

navigationDelegate回調(diào)在每次網(wǎng)頁(yè)路由地址發(fā)生變化的時(shí)候都會(huì)觸發(fā)，因此我們可以攔截特定的url來(lái)實(shí)現(xiàn)JS調(diào)用Flutter。

同樣的，我們?cè)诰W(wǎng)頁(yè)部分寫(xiě)一個(gè)簡(jiǎn)單的button，點(diǎn)擊后跳轉(zhuǎn)路由"js://webview?arg1=111&args2=222"。我們可以和客戶(hù)端協(xié)商好一個(gè)scheme，比如這個(gè)例子里面就是js://webview，我們可以在query string上帶上我們想要傳遞的參數(shù)：

<button onclick="callFlutter()">callFlutter</button>

function callFlutter(){
 /*約定的url協(xié)議為：js://webview?arg1=111&arg2=222*/
 document.location = "js://webview?arg1=111&args2=222";
}

在Flutter端，我們就可以在navigationDelegate回調(diào)中攔截這個(gè)符合js://webviewscheme的路由地址了：

navigationDelegate: (NavigationRequest request) {
   if (request.url.startsWith('js://webview')) {
    showToast('JS調(diào)用了Flutter By navigationDelegate');
    print('blocking navigation to $request}');
    return NavigationDecision.prevent;
   }
   print('allowing navigation to $request');
   return NavigationDecision.navigate;
   },

我們通過(guò)return不同的值，告訴WebView怎么處理這個(gè)路由：

• NavigationDecision.prevent：阻止路由替換；
• NavigationDecision.navigate：允許路由替換。

Flutter調(diào)用JS

在WebView創(chuàng)建完成之后，我們可以拿到一個(gè)WebViewController，通過(guò)它的evaluateJavascript()方法，我們可以執(zhí)行JS語(yǔ)句：

onWebViewCreated: (WebViewController webViewController) {
 _controller = webViewController;
},
······
floatingActionButton: FloatingActionButton(
  onPressed: () {
   _controller
    ?.evaluateJavascript('callJS("visible")')
    ?.then((result) {
     // You can handle JS result here.
    });
  },
  child: Text('call JS'),
  ),

 <p id="p1" style="visibility:hidden;">
 Flutter 調(diào)用了 JS.
 Flutter 調(diào)用了 JS.
 Flutter 調(diào)用了 JS.
 </p>
 
function callJS(message){
 document.getElementById("p1").style.visibility = message;
}

在上面的例子中，我們點(diǎn)擊floatingActionButton后，就會(huì)去執(zhí)行JS中的callJS()方法了，具體UI體現(xiàn)為：將隱藏的段落重新顯示。evaluateJavascript()返回值是一個(gè)Future，因此我們可以接收J(rèn)S給我們的返回值，返回值格式請(qǐng)閱讀官方API注釋。

這里要注意的是，evaluateJavascript()方法，F(xiàn)lutter建議我們?cè)趏nPageFinished回調(diào)之后去執(zhí)行，以保證所有的HTML都已經(jīng)加載完畢了。因此在實(shí)際開(kāi)發(fā)中，我這里展示的這種直接將onWebViewCreated中的controller賦值的方法是不可取的，應(yīng)該是使用FutureBuilder之類(lèi)的方式去實(shí)現(xiàn)比較優(yōu)雅（我在Gist上有完整的例子，大家可以看下）。

源碼

https://github.com/yumi0629

調(diào)試工具推薦使用 Amaze UI ，一個(gè)神奇的網(wǎng)站，一鍵生成調(diào)試網(wǎng)頁(yè)，你值得擁有

注意：源碼中的initialUrl測(cè)試地址請(qǐng)自己生成！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論