1.安裝webview_flutter
dependencies:
webview_flutter: ^0.3.19+3
2.android中需要添加網(wǎng)絡(luò)權(quán)限才能使用不然報(bào)錯(cuò)在xml中添加
image.png
<uses-permission android:name="android.permission.INTERNET" />
3.ios中在ios/Runner/Info.plist中添加
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>*
4.使用webView_flutter
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatefulWidget {
String url;
final String title;
WebViewController _webViewController; // 添加一個(gè)controller
WebViewPage({this.url, this.title});
@override
_WebViewState createState() => _WebViewState();
}
class _WebViewState extends State<WebViewPage> {
@override
void initState() {
super.initState();
}
JavascriptChannel _JsBridge(BuildContext context) => JavascriptChannel(
name: 'lkMsg', // 與h5 端的一致 不然收不到消息
onMessageReceived: (JavascriptMessage message) async{
print(message.message);
});
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: <Widget>[
new WebView(
initialUrl: widget.url, // 加載的url
userAgent:"your userAgent", // h5 可以通過(guò)navigator.userAgent判斷當(dāng)前環(huán)境
javascriptMode: JavascriptMode.unrestricted, // 啟用 js交互玄组，默認(rèn)不啟用JavascriptMode.disabled
javascriptChannels: <JavascriptChannel>[
_JsBridge(context) // 與h5 通信
].toSet()
onWebViewCreated: (WebViewController web) {
_webViewController = web;
// webview 創(chuàng)建調(diào)用，
web.loadUrl(url)谒麦；此時(shí)也可以初始化一個(gè)url
web.canGoBack().then((res){
print(res); // 是否能返回上一級(jí)
});
web.currentUrl().then((url){
print(url);// 返回當(dāng)前url
});
web.canGoForward().then((res){
print(res); //是否能前進(jìn)
});
},
navigationDelegate: (NavigationRequest request) {
///在頁(yè)面跳轉(zhuǎn)之前調(diào)用俄讹，TODO isForMainFrame為false,頁(yè)面不跳轉(zhuǎn).導(dǎo)致網(wǎng)頁(yè)內(nèi)很多鏈接點(diǎn)擊沒(méi)效果
if(...) {
return NavigationDecision.prevent // 禁止跳轉(zhuǎn);
}
return NavigationDecision.navigate // 跳轉(zhuǎn);
},
onPageFinished: (String value) {
// webview 頁(yè)面加載調(diào)用
// flutter 調(diào)用h5 端方法
_webViewController
.evaluateJavascript('document.title')
.then((title) {
// 獲取網(wǎng)頁(yè)title
print(title);
});
},
)
],
),
);
}
}
h5 發(fā)送消息給flutter
// postMessage 接受一個(gè)字符串參數(shù)
// lkMsg 與flutter 端的name 保持一致
lkMsg.postMessage(JSON.stringify({type:"msgType",data:"hello flutter!"}));
flutter 調(diào)用h5方法
// flutter
_webViewController.evaluateJavascript("showToast('hello h5')")
// h5
function showToast(msg){
console.log(msg)
}
