茂名专业做网站,品牌建设包括哪些,自做网站多少钱,有做网站的吗前言
最近在研究如何在应用程序中嵌入Web视图#xff0c;发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求#xff0c;就使用了官方库#xff0c;实现一些简单功能是完全ok的
基本使用
官方文档
https://pub-web.flutter-io.cn/packages/webv…前言
最近在研究如何在应用程序中嵌入Web视图发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求就使用了官方库实现一些简单功能是完全ok的
基本使用
官方文档
https://pub-web.flutter-io.cn/packages/webview_flutter
安装
flutter pub add webview_flutter加载并显示web 可以加载html字符串也可以直接加载url链接。官方都提供了对应的方法这里演示加载url
初始化 late WebViewController webViewController;//初始化overridevoid initState() {super.initState();webViewController WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);}显示 显示的时候一般需要结合FutureBuilder比较这是一个异步的过程
FutureBuilder(// 异步方法future: searchNovelFromWeb(),builder: (context, snapshot) {// 等待状态显示的widgetif (snapshot.connectionState ConnectionState.waiting) {return const Center(child: CircularProgressIndicator(),);// 错误时显示的widget} else if (snapshot.hasError) {return const Text(Error);} else {return snapshot.data ?? const Text(No data);}}))FutureWidget searchNovelFromWeb() async {Widget res;try {await webViewController.loadRequest(Uri.parse(https://m.bbxxxxxx.com/s?q凡人修仙));res WebViewWidget(controller: webViewController);} catch (error) {res Text(加载失败${error.toString()});print(加载失败${error.toString()});}return res;}flutter与web之间的交互
flutter通知web让web执行某些操作
官方提供了两个方法runJavaScript、runJavaScriptReturningResult。后者可以向flutter返回执行结果 比如在网页加载完成后获取到网页源代码
webViewController.setNavigationDelegate(NavigationDelegate(onPageFinished: (url) async {print(页面加载完成$url);var html await webViewController.runJavaScriptReturningResult(document.documentElement.innerText;);debugPrint(结果是11$html, wrapWidth: 1024);}));web发生变化后通知flutter 这块也实现了但是不太稳定有时候不能够正常运行 await webViewController.loadRequest(Uri.parse(https://m.bbxxxxxxxt.com/s?q凡人修仙));webViewController.setNavigationDelegate(NavigationDelegate(onPageFinished: (url) async {print(页面加载完成$url);// 添加监听await webViewController.addJavaScriptChannel(Report,onMessageReceived: (JavaScriptMessage message) {print(收到了消息是${message.message});});// 注入脚本await webViewController.runJavaScript(setInterval(() {let time new Date().toLocaleTimeString();Report.postMessage(time);},1000));}));
