通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试。

1.引入webview_flutter: ^0.3.5+2   这个是官网推荐用的, 还有一个好像api 里没有互调的操作。
  • onWebViewCreated:在WebView创建完成后调用,只会被调用一次;
  • initialUrl:初始load的url;
  • javascriptMode:JS执行模式(是否允许JS执行);
  • javascriptChannels:JS和Flutter通信的Channel;
  • navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
  • gestureRecognizers:手势监听;
  • onPageFinished:WebView加载完毕时的回调。import 'dart:async';
 js 调用flutter 有俩种方式
1.使用 javascriptChannels
js部分:
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter"); // 使用postMessage toast 是定义好的名称,在接受的时候要拿这个name 去接受
}
flutter部分:
javascriptChannels: <JavascriptChannel>[ //javascriptChannels这个是api提供的互调的方法,
  _alertJavascriptChannel(context),
].toSet(),
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
第二种方法:通过navigationDelegate拦截url
document.location = "js://webview?arg1=111&args2=222"; 通过跳转链接 js:/webview 这个定义好之后
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('js://webview')) { //拦截以js://webview 开始的链接 说明页面执行了这个链接的跳转操作,也就是页面按钮被点击了。那么执行相关的flutter操作。
    showToast('JS调用了Flutter By navigationDelegate'); 
print('blocking navigation to $request}');
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate; //这个是必须有的,NavigationDecision.prevent:阻止路由替换;NavigationDecision.navigate:允许路由替换。
},
flutter调用js:

_controller.future.then((controller) {
controller.evaluateJavascript('callJS("visible")') //参数 是要调用的js 函数名
.then((result) {
  print(result);
  });
}); function callJS(message){ document.getElementById("p1").style.visibility = message; } //控制div 的显示以及隐藏。

flutter WebView flutter js 互调的更多相关文章

  1. WebView与JS互调

    在Android 4.2之后JS的注入需要加入注解 @javascriptInterface 1.Android 调用 JS 初始化WebView控件,开启该控件对JS的支持 调用loadUrl()方 ...

  2. Flutter,webview里面实现上传和下载的功能

    前提:Flutter 与 webview(vue) 一起开发的项目 开始的时候并没有想到什么移动端的,所以上传就用input,下载就用iframe来实现,然而真机实测的时候,input那个方法IOS支 ...

  3. Flutter Webview添加Cookie的正确姿势

    场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条:按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一 ...

  4. 【Flutter】Flutter 一些常用库

    Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...

  5. Flutter介绍 - Flutter,H5,React Native之间的对比

    Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...

  6. webview与JS的交互

    webview与JS的交互 一:hybird app, web app 和 native app 的区别   Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...

  7. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  8. ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调

    近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...

  9. [转]ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调

    本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...

随机推荐

  1. Python Class (一)

    继承 class Character(object): def __init__(self, name): self.health = 100 self.name = name def printNa ...

  2. Java高并发网络编程(三)NIO

    从Java 1.4开始,Java提供了新的非阻塞IO操作API,用意是替代Java IO和Java Networking相关的API. NIO中有三个核心组件: Buffer缓冲区 Channel通道 ...

  3. Kubernetes重大漏洞?阿里云已第一时间全面修复

    近日,Kubernetes社区发现安全漏洞 CVE-2018-1002105,阿里云容器服务已在第一时间完成全面修复,敬请广大用户登录阿里云控制台升级Kubernetes版本. 目前Kubernete ...

  4. Ubuntu 18.04 安装 python3.7

    Ubuntu 18.04系统内置了Python 3.6和Python 2.7版本,以下是在Ubuntu 18.04系统中安装Python 3.7版本的方法. 1. 执行所有升级# sudo apt u ...

  5. AcWing 197. 阶乘分解 (筛法)打卡

    给定整数 N ,试把阶乘 N! 分解质因数,按照算术基本定理的形式输出分解结果中的 pipi 和 cici 即可. 输入格式 一个整数N. 输出格式 N! 分解质因数后的结果,共若干行,每行一对pi, ...

  6. (转)MySQL安装及配置指南

    转:http://wiki.ubuntu.org.cn/MySQL%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97 安装MySQL sudo apt-get install m ...

  7. Wannafly Winter Camp Day5 Div1 E题 Fast Kronecker Transform 转化为NTT或FFT

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog @ Problem:传送门  原题目描述在最下面.  对给定的式子算解.   ...

  8. 批处理禁止指定的IE的加载项

    步骤: 1.查找插件对应的 CLSID 获取 HKCU\Software\Microsoft\Windows\CurrentVersion\Ext\Stats 下的 CLSID, 然后在 HKCR\C ...

  9. 敏捷在《PMBOK指南》知识领域中的应用

    <PMOBOK指南>知识领域 敏捷工作过程中的应用 第四章 项目整合管理 迭代和敏捷方法能够促进团队成员以相关领域专家的身份参与整合管理.团队成员自行决定计划及其组件的整合方式.在适应型环 ...

  10. pytest--两个fixture时,灵活运用

    import pytest@pytest.fixture()def login_r(open_browser): print('登陆') @pytest.fixture()def open_brows ...