flutter加载html并获取js，flutter 调用js

九、Flutter之webview

1、Flutter的webview常用的第三方库有 flutter_webview_plugin 、 webview_flutter ，后者的文档较少，暂先学习flutter_webview_plugin。

2、webview的版本是webview_flutter： ^0.22+1 现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。

3、在Widget销毁之前将WebView的监听和view销毁掉。flutter生命周期大体上可以分为三个阶段：初始化、状态变化、销毁。

4、从Android 0（API级别28）开始，默认情况下禁用明文支持。

5、其实做的事情跟原生封装WebView组件类似。

6、现在讲下对两种组件进行截图的方式：对普通的组件进行截图的话，使用RepaintBoundary包裹需要截图的组件就行。官方的webivew的层级太高会无法展示按钮，且通过RepaintBoundary截图是空白的。

相关问答

Q1: flutter_inappbrowser和h5交互

1、需求，app中使用webview和h5交互，根据h5发过来的消息，在屏幕上展示flutter组件，并且可以发送消息给h5。首先使用的组件是flutter_WebView_plugin，这个组件不能嵌套flutter组件，所以放弃这个组件。

2、flutter加载h5很卡的解决方法如下：一种临时解决方案，在切换动画加载完毕后，再去构造 WebView，这样从用户角度上看，就不会有路由切换动画的卡顿了。

3、Flutter是最新的跨平台应用程序框架之一，由Google开发并于2017年发布。 Flutter是一个免费的开源跨平台框架，它允许你用一组代码创建一个移动应用程序。

Q2: Flutter加载不同的环境变量获取不同的配置参数

点击Button 之后，我们把 num 变量加一，并使用 setState 通知状态发生了改变，Flutter 会根据新的状态更新 UI。如果有接触过小程序开发，setState 就和小程序的 setData 类似。

releas版本与debug版本的applicationId不一样 为了客户端上两个版本共存，通常debug设置不同applicationId，这会导致需要填写applicationId申请的第三方平台使用不正常，比如小米推送和微信分享等。

参考官网博客： https：//flutterchina.club/setup-windows/ 在配置环境中，执行flutter doctor时，碰到这类问题unable to find git in your path，flutter的bin也配置了，git的也配置了，还是出现这个问题。

从下图中可以看出，前面几条 flutter doctor 命令执行的时候总是未响应，通过各种方式执行都是一样的结果，但是dart命令是能够正常执行。

从兼容方面来说， PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核。

Q3: flutter加载h5很卡

1、一开始我就使用Future、async、await去做异步操作，以为这样能解决问题，经过一天研究发现他们都还在同一个线程里面，也就是UI线程，导致卡顿，这明显不是我们想要的异步加载数据。

2、FlutterWebView.m文件：通过以上骚操作，就可以实现webview_flutter在android和ios设备上加载本地html文件了。

3、flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以总体和 native WKWebView 表现差不多。如果是混编项目中，因为它被包了一层，所以页面加载上存在一定的劣势，所以混编项目中仍然推荐使用 WKWebView。

4、第一步：终端：open $HOME/.bash_profile 第二步：关闭，终端：source $HOME/.bash_profile 接着输入：open ~/.zshrc 这样就不用每次重新export路径了，然后重启电脑用Android studio create flutter项目时就可以通过了。

5、Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

6、需求，app中使用webview和h5交互，根据h5发过来的消息，在屏幕上展示flutter组件，并且可以发送消息给h5。首先使用的组件是flutter_WebView_plugin，这个组件不能嵌套flutter组件，所以放弃这个组件。

Q4: 如何开发小程序

有两种方法，一种方法是自己开发，这需要有一定的基础，微信小程序虽是腾讯出品，但是核心的思想跟vue等框架是一样的。

小程序开发包括申请小程序账号、选择开发工具、选定自己小程序的主题方向、开始制作等。申请小程序账号 目前小程序支持个人主体申请，个人注册小程序流程也很简单：打开微信公众平台，然后点击立即注册小程序，按照提示操作即可。

注册小程序；选择第三方平台；制作微信小程序；授权小程序；发布小程序、微信审核。

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

首先在浏览器打开微信公众平台，扫码登录进入小程序网页。此前由于注册过，不做赘述，点击箭头指向位置打开开发。找到自己的appid，复制id以便进行后续操作。

Q5: 【Flutter】利用Future封装出js中的Promise

1、下面我们尝试，利用 Future 封装出js中我们熟悉的 Promise 。

2、在开发工具的插件设置中，安装上面说到的 Flutter 和 Dart 插件。Flutter 插件用于支持 Flutter 的运行、调试、热重载等功能，而 Dart 插件则提供了代码的输入校验、代码补全等功能。

3、promise的作用：ajax是异步请求，多层嵌套会造成回调地狱，promise模拟同步，将异步回调类似于同步来处理业务逻辑。var p = new Promise(function（）{ //这里用于处理异步的回调 })，必传回调函数，不传程序会抛出异常。

4、then方法的实现里，确实是返回了一个新的Promise，你说的double，其实是then的第一个参数onFulfilled。

flutter加载html并获取js的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 调用js、flutter加载html并获取js的信息别忘了在本站进行查找喔。