flutter dependencies
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.15+1
fluttertoast: ^3.1.3
class _ComponentWebviewState extends State<ComponentWebview> {
bool _loading = false;
WebViewController _webViewController;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
//加載 遠程網(wǎng)頁 OR 本地網(wǎng)頁
var isRemote = widget.url.contains('http');
return Stack(
children: <Widget>[
Scaffold(
body: isRemote ? loadRemoteUrl() : loadAssetsUrl(),
floatingActionButton: FloatingActionButton(
onPressed: () {
_webViewController
?.evaluateJavascript(
'customeFunc("Flutter 調(diào)用 JS Time: ${DateTime.now().toUtc()}")')
?.then((result) {
// You can handle JS result here.
print("customeFunc" + result);
});
},
child: Text('調(diào)用JS'),
),
),
//加載網(wǎng)頁提示
uiLoading()
],
);
}
Widget uiLoading() {
if (_loading)
return Center(child:CircularProgressIndicator()) ;//Center(child: Icon(Icons.play_circle_filled));
else
return Container(height: 0.0, width: 0.0);
}
// 定義 網(wǎng)頁中能夠調(diào)用的 Flutter 方法
JavascriptChannel jsChannelShowToast(BuildContext context) {
return JavascriptChannel(
name: 'flutterShowToast',
onMessageReceived: (JavascriptMessage message) {
Fluttertoast.showToast(
msg: message.message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
});
}
///JS和Flutter通信的Channel译红；
/// js 調(diào)用 flutter 方法
List<JavascriptChannel> _getWebViewJavascriptChannels() {
return <JavascriptChannel>[
jsChannelShowToast(context),
];
}
_navigationDelegateHandle(NavigationRequest request) {
print('request.url =======> : ${request.url}');
//路由委托（可以通過在此處攔截url實現(xiàn)JS調(diào)用Flutter部分）；
///通過攔截url來實現(xiàn)js與flutter交互
if (request.url.toLowerCase().startsWith('webviewflutterurl://')) {
// Fluttertoast.showToast(msg:'JS調(diào)用了Flutter By navigationDelegate');
print('blocking navigation to $request}');
return NavigationDecision.prevent;
///阻止路由替換，不能跳轉(zhuǎn)裕照，因為這是js交互給我們發(fā)送的消息
}
return NavigationDecision.navigate;
//允許路由替換
}
///頁面加載完成處理
_onPageFinished(String url) async {
// 獲取當前加載頁面的 title
String title = await _webViewController.getTitle();
widget.titleChandge(title);
setState(() {
_loading = false;
});
print('Page finished url ====> : $url');
//添加一些 webview 初始化數(shù)據(jù)
var jsonData = {'platform': Platform.isAndroid ? 'android' : 'ios'};
var jsonDataString = jsonEncode(jsonData);
print(jsonDataString);
//通知網(wǎng)頁服務器加載完成并觸發(fā)加載完成事件
_webViewController
?.evaluateJavascript(
'triggerEventWebViewFlutterJSBridgeReady($jsonDataString)')
?.then((result) {
print(result);
});
}
}
Remote 網(wǎng)頁
///加載 遠程 html
Widget loadRemoteUrl() {
return WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
setState(() { _loading = true; });
_webViewController = webViewController;
},
javascriptChannels: _getWebViewJavascriptChannels().toSet(),
navigationDelegate: (request) => _navigationDelegateHandle(request),
onPageFinished: (url) => _onPageFinished(url));
}
localhost 網(wǎng)頁
需要引入
import 'dart:io';
import 'package:flutter/services.dart';
///加載 本地 html
Widget loadAssetsUrl() {
return FutureBuilder(
future: _loadHtmlFile(),
builder: (context, snapshot) => WebView(
initialUrl: Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')) .toString(),
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
setState(() { _loading = true; });
_webViewController = webViewController;
},
javascriptChannels: _getWebViewJavascriptChannels().toSet(),
navigationDelegate: (request) => _navigationDelegateHandle(request),
onPageFinished: (url) => _onPageFinished(url)));
}
/// 加載本地 HTML 文件
Future<String> _loadHtmlFile() async {
return await rootBundle.loadString(widget.url);
}
網(wǎng)頁部分
<section style="text-align: center;">
<div id="content"> </div>
<button id="btnFlutterFunc">jquery調(diào)用Flutter</button> <hr>
<button onclick="showToast()">原生Js調(diào)用Flutter</button> <hr>
<a href="webviewflutterurl://fff?p1=123&p2=321">連接攔截 GO ==> :webviewflutterurl://fff?p1=123&p2=321</a>
</section>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
function showToast(message) {
flutterShowToast.postMessage(message || "JS調(diào)用了Flutter");
}
// 首先需要提前定義好事件鸯屿，并且注冊相關的EventListener
var eventWebViewFlutterJSBridgeReady = new CustomEvent('webViewFlutterJSBridgeReady', {
detail: {
//平臺 android OR ios
platform: ''
},
});
function triggerEventWebViewFlutterJSBridgeReady(jsonData) {
console.log(JSON.stringify(jsonData))
setTimeout(function () {
eventWebViewFlutterJSBridgeReady.detail.platform = jsonData.platform
if (window.dispatchEvent)
window.dispatchEvent(eventWebViewFlutterJSBridgeReady);
else
window.fireEvent(eventWebViewFlutterJSBridgeReady);
}, 200)
return '已觸發(fā)事件:webViewFlutterJSBridgeReady:platform:${jsonData.platform}';
}
window.addEventListener('webViewFlutterJSBridgeReady', function (event) {
console.log('觸發(fā)：webViewFlutterJSBridgeReady');
});
window.addEventListener('webViewFlutterJSBridgeReady', function (event) {
showToast('Js:CustomEvent：webViewFlutterJSBridgeReady'+JSON.stringify(event.detail));
});
function customeFunc(message) {
document.getElementById("content").innerHTML = message;
return 'customeFunc 調(diào)用完成'
}
$(function () {
var elementContent = $('.content');
var elementBtnFlutterFunc = $('#btnFlutterFunc');
elementBtnFlutterFunc.unbind('click').bind('click', function () {
showToast();
})
})
</script>
網(wǎng)頁中加入 自定義事件 CustomEvent webViewFlutterJSBridgeReady
以便通知網(wǎng)頁網(wǎng)頁加載完成 在調(diào)用的時候初始化部分 信息 如 硬件平臺信息 等
加載本地網(wǎng)頁加載JQuery 還沒研究透 ... 沒找到方法
String title = 'webview title';
@override
Widget build(BuildContext context) {
var url = 'https://www.baidu.com';
url = 'http://www.baidu.com';
url = 'http://192.168.2.65:9777/Content/static/webview_flutter.html';
var now =new DateTime.now();
url = '$url?t=${now.toUtc()}';
// url = "assets/www/webview_flutter.html";
return Scaffold(
appBar: AppBar(title:Text(title)),
body: ComponentWebview(url: url,titleChandge: (value){
print(value);
setState(() {
title = value;
});
}),
);
}
