Flutter的webview常用的第三方庫(kù)有flutter_webview_plugin霜大、webview_flutter，后者的文檔較少革答，暫先學(xué)習(xí)flutter_webview_plugin战坤。
一曙强、flutter_webview_plugin
添加依賴
flutter_webview_plugin: ^0.3.0
導(dǎo)入包
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
iOS端info.plist配置，其中NSAppTransportSecurity節(jié)點(diǎn)是為了支持http協(xié)議
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
一個(gè)簡(jiǎn)單的demo
new MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "https://www.baidu.com",
appBar: new AppBar(
title: new Text("Widget webview"),
),
),
},
);
要監(jiān)聽(tīng)鏈接跳轉(zhuǎn)的話途茫，實(shí)現(xiàn)onUrlChanged即可
final _urlCtrl = TextEditingController(text: selectedUrl);
@override
void initState() {
super.initState();
...
_urlCtrl.addListener(() {
selectedUrl = _urlCtrl.text;
});
// Add a listener to on url changed
_onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
if (mounted) {
setState(() {
//這里攔截url變化碟嘴，可以實(shí)現(xiàn)點(diǎn)擊號(hào)碼撥號(hào)
_history.add('onUrlChanged: $url');
if(url.startsWith('tel:')){
print(url);
launch(url);
}
});
}
});
}
二、webview_flutter
添加依賴
webview_flutter: ^0.3.3+1
導(dǎo)入包
import 'package:webview_flutter/webview_flutter.dart';
iOS端info.plist配置
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
一個(gè)簡(jiǎn)單的demo
return WebView(
initialUrl: 'https://www.baidu.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
// TODO(iskakaushik): Remove this when collection literals makes it to stable.
// ignore: prefer_collection_literals
);
但是在webview里點(diǎn)擊鏈接跳轉(zhuǎn)的時(shí)候囊卜，測(cè)試機(jī)有時(shí)會(huì)跳轉(zhuǎn)到系統(tǒng)瀏覽器上娜扇，并且點(diǎn)擊文本框無(wú)法彈出鍵盤，交互性很弱栅组。
二者共同的缺點(diǎn)是與javascript難以交互雀瓢，目前只能實(shí)現(xiàn)Flutter->JS傳遞信息，還沒(méi)找到可以進(jìn)行完美交互的第三方庫(kù)玉掸。并且一些常見(jiàn)的協(xié)議還不支持刃麸，比如撥號(hào)和調(diào)用攝像頭等，期待后續(xù)完善司浪。
