详解Flutter WebView与JS互相调用简易指南

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

WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会。

开始之前先简单了解一下官方WebView所包含的API:

  • onWebViewCreated:在WebView创建完成后调用,只会被调用一次;
  • initialUrl:初始load的url;
  • javascriptMode:JS执行模式(是否允许JS执行);
  • javascriptChannels:JS和Flutter通信的Channel;
  • navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
  • gestureRecognizers:手势监听;
  • onPageFinished:WebView加载完毕时的回调。

JS调用Flutter

JS调用Flutter有两种方法:使用javascriptChannels发送消息和使用路由委托(navigationDelegate)拦截url。

方法1:使用javascriptChannels发送消息

javascriptChannels参数可以传入一组Channels,我们可以定义一个_alertJavascriptChannel变量,这个channel用来控制JS调用Flutter的toast功能:

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

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

在上面的代码中,我们定义了一个_alertJavascriptChannel变量,并给它起了个name叫Toast,这个name属性接收的是一个字符串,它代表了JS调用Flutter时,双方共同商定好了的一个协议,JS通过这个name去post对应的信息给Flutter(API为name.postMessage('xxxxxx'))。我们在网页部分写一个简单的button,点击后开始JS调用Flutter的逻辑:

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

function callFlutter(){
 Toast.postMessage("JS调用了Flutter");
}

onMessageReceived为Flutter接收到了JS的消息之后的回调,我们可以通过message.message来获取JS发给我们的消息内容。JavascriptMessage类暂时只有一个String类型的message成员变量,所以如果需要传递复杂数据,可以通过传递json字符串来解决。

代码重点:JavascriptChannel中的name要与JS中的name.postMessage()相对应!!

方法2:使用路由委托navigationDelegate拦截url

navigationDelegate回调在每次网页路由地址发生变化的时候都会触发,因此我们可以拦截特定的url来实现JS调用Flutter。

同样的,我们在网页部分写一个简单的button,点击后跳转路由"js://webview?arg1=111&args2=222"。我们可以和客户端协商好一个scheme,比如这个例子里面就是js://webview,我们可以在query string上带上我们想要传递的参数:

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

function callFlutter(){
 /*约定的url协议为:js://webview?arg1=111&arg2=222*/
 document.location = "js://webview?arg1=111&args2=222";
}

在Flutter端,我们就可以在navigationDelegate回调中拦截这个符合js://webviewscheme的路由地址了:

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

我们通过return不同的值,告诉WebView怎么处理这个路由:

  • NavigationDecision.prevent:阻止路由替换;
  • NavigationDecision.navigate:允许路由替换。

Flutter调用JS

在WebView创建完成之后,我们可以拿到一个WebViewController,通过它的evaluateJavascript()方法,我们可以执行JS语句:

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 调用了 JS.
 Flutter 调用了 JS.
 Flutter 调用了 JS.
 </p>

function callJS(message){
 document.getElementById("p1").style.visibility = message;
}

在上面的例子中,我们点击floatingActionButton后,就会去执行JS中的callJS()方法了,具体UI体现为:将隐藏的段落重新显示。evaluateJavascript()返回值是一个Future,因此我们可以接收JS给我们的返回值,返回值格式请阅读官方API注释。

这里要注意的是,evaluateJavascript()方法,Flutter建议我们在onPageFinished回调之后去执行,以保证所有的HTML都已经加载完毕了。因此在实际开发中,我这里展示的这种直接将onWebViewCreated中的controller赋值的方法是不可取的,应该是使用FutureBuilder之类的方式去实现比较优雅(我在Gist上有完整的例子,大家可以看下)。

源码

https://github.com/yumi0629

调试工具推荐使用 Amaze UI,一个神奇的网站,一键生成调试网页,你值得拥有

注意:源码中的initialUrl测试地址请自己生成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-04-01

Android总结之WebView与Javascript交互(互相调用)

前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web

Android中 webView调用JS出错的解决办法

问题 webView调用JS出错. 复制代码 代码如下: class TestJS {         ......         public TestJS(){         }                 public void save(String data){                        webView.loadUrl("javascript: alert(" + data +")");         }         ..

Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

Android WebView使用方法详解 附js交互调用方法

目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

Android WebView的使用方法及与JS 相互调用

Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m

android webview中使用Java调用JavaScript方法并获取返回值

在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC

Android中实现WebView和JavaScript的互相调用详解

前言 很多复杂的UI界面,在Android中需要配合大量xml代码和java代码实现,而使用HTML5可以非常轻松的实现出来,而且具有很好的跨平台特性,让我们不必为了多个平台而重写代码,H5学习成本也较低,上手快.虽然从目前来说H5在Android系统中的速度可能还欠佳一些,但相信随着手机的性能不断的提高,这些问题都会被解决 使用H5开发Android的UI界面,最重要的就是如何实现Js代码和Java代码之间的互相调用了 在讲解之前,让我们先把项目跑起来 效果图: 准备好index.html文件

Android webview和js互相调用实现方法

Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

Android中在WebView里实现Javascript调用Java类的方法

为了方便网页和Android应用的交互,Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制.只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上. 1.映射Java对象到JavaScript对象上 复制代码 代码如下: mWebView = (WebView) findViewById(R.id.wv_content); mWebView.setVerticalScrollbarOverlay(tr

kettle中使用js调用java类的方法

1. 需要事先将jar包 放在kettle 的 libext 目录,kettle 在启动时会自动加载libext 目录下的所有 jar 包. 2. modified java script 步骤要选中 compatibility mode,并将 content 设置为输出的字段. 代码如下: 复制代码 代码如下: var 变量 = new Packages.包名(参数 );

python如何调用java类

由于 python 本身为脚本语言,且经常存在调用第三方库的情况,有的时候用 java 调用 python 不如用 python 调用 java 方便.下面就整理一下在 python 调用 java 过程中需要哪些操作.(默认是 linux 的 Ubuntu 上调用) 首先 linux 上的 jdk 是一定需要安装的,这个过程在这里就不表了,python 都是 linux 自带的,这里默认是 python2.7. 安装 jpype python 调用 java 主要是靠在 python 中 im

Android WebView上实现JavaScript与Java交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css.js文件和页面上的图片资源进行加载.如果webkit的缓存里面有,就不加载.加载完这些资源之后,就进行css的渲染和js的执行.Css的渲染一般不

Android中替换WebView加载网页失败时的页面

我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难看,于是乎小编就在想能不能自定义一个页面,当数据请求失败时让系统来加载我们自定义好的页面?上网查了很多资料,都没有关于这个问题的解决方法(反正我是没有找到),经过小编的不断琢磨,今天终于实现了这个功能.以下就是本人自定义实现的数据加载失败时的页面: 这样看起来是不是觉得很高大尚.这和我们真正拿到数据

Unity3D游戏引擎实现在Android中打开WebView的实例

本文讲述了如何在Unity中调用Android中的WebView组件,实现内部浏览器样式的页面切换.首先打开Eclipse创建一个Android的工程: UnityTestActivity.java 入口Activity ,Unity中会调用这个Activity中的方法从而打开网页. package com.xys; import android.content.Context; import android.content.Intent; import android.os.Bundle; i

Android中的webview监听每次URL变化实例

通过这个可以监听Android中webview访问的URL变化: webView.setWebViewClient(new WebViewClient(){ @Override public void onLoadResource(WebView view, String url) { Log.e("hao","WebView3:"+view.getUrl()+"\\n"+" URL3:"+url); super.onLoad

Android中关于百度糯米app关闭网页或窗口的方法(99%人不知)

我们公司做了一款使用百度钱包的移动网页支付进行支付的产品,用户通过百度钱包.百度糯米扫描我们 产品的二维码,选择商品,点击支付将会自动调用百度钱包进行支付,支付成功后返回成功页面,在我们的成功页面有关闭 网页按钮,点击关闭按钮或者返回按钮将会关闭页面. 在百度钱包中使用百度轻应用的BLightApp.closeWindow() 方法可以关闭,但是在百度糯米中,按道理可以使用呀, 但是根本就不行,改成传统的window.close()也不行.当时我们在网上搜索和百度糯米的官网中,都没找到解决方法.