本身原來是作iOS開發,後來轉成react-native,iOS中的webview還好,最新的WkWebView兼容性還行。可是遇到android的時候,真的是被各類的手機支配的心累。這篇文章主要說下webView在Flutter中怎麼使用。找到最適合項目的方案javascript
On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.html
引入庫在pubspec.yaml中加入。沒有用最新版本,還沒更新到2.0java
webview_flutter: ^1.0.7
複製代碼
這個插件是官方推薦的使用也比較簡單python
import 'package:webview_flutter/webview_flutter.dart';
@override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
);
}
複製代碼
控制webView的展現的寬高:react
@override
Widget build(BuildContext context) {
return UnconstrainedBox(
child: Container(
height: 300,
width: 300,
child: WebView(
initialUrl: 'https://flutter.dev',
)),
);
}
複製代碼
WebViewController _webViewController;
WebView(
initialUrl: '',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
_loadHtmlFromAssets();
},
)
_loadHtmlFromAssets() async {
String fileHtmlContents = await rootBundle.loadString('本地路徑html文件在項目中的路徑');
_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
}
複製代碼
聽說flutter_webview_plugin這個插件是在webview_flutter基礎上作的封裝,有興趣的能夠看下。這些都不是重點。這兩個能夠插件能夠說在iOS上沒有問題,可是在android上呢,隨着碎片化的機型適配,我遇到的比較特殊的局勢oppo和vivo手機上適配不太行,須要騰訊X5內核的才行。android
針對於android的加載webView的解決方案。 一樣pubspec.yaml文件添加web
x5_webview: ^0.24.6
複製代碼
插件介紹android6.0以上須要動態申請權限, 使用permission_handler庫進行申請權限react-native
//請求權限
Map<Permission, PermissionStatus> statuses = await [
Permission.phone,
Permission.storage,
].request();
//判斷權限
if (!(statuses[Permission.phone].isGranted &&
statuses[Permission.storage].isGranted)) {
print("權限被拒絕");
return;
}
複製代碼
初始化:markdown
var isOk = await X5Sdk.init();
print(isOk ? "X5內核成功加載" : "X5內核加載失敗");
複製代碼
支持直接打開頁面app
X5Sdk.openWebActivity("https://www.baidu.com",title: "web頁面");
複製代碼
內嵌webView:
X5WebView(
url: "https://www.baidu.com",
javaScriptEnabled: true,
header: {"TestHeader": "測試"},
userAgentString: "my_ua",
//Url攔截,傳null不會攔截會自動跳轉
onUrlLoading: (willLoadUrl) {
_controller.loadUrl(willLoadUrl);
}
onWebViewCreated: (control) {
_controller = control;
},)
複製代碼
僅對與android平臺
若是項目中遇到,直接返回html的數據,直接使用flutter_html展現便可, 一樣的方式引入
flutter_html: ^1.1.1
複製代碼
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('flutter_html'),
),
body: Html(data: """ <h1>Table support:</h1> <table> <colgroup> <col width="50%" /> <col span="2" width="25%" /> </colgroup> <thead> <tr><th>One</th><th>Two</th><th>Three</th></tr> </thead> <tbody> <tr> <td rowspan='2'>Rowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan</td><td>Data</td><td>Data</td> </tr> <tr> <td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td> </tr> </tbody> <tfoot> <tr><td>fData</td><td>fData</td><td>fData</td></tr> </tfoot> </table>""", style: {
// tables will have the below background color
"table": Style(
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
// some other granular customizations are also possible
"tr": Style(
border: Border(bottom: BorderSide(color: Colors.grey)),
),
"th": Style(
padding: EdgeInsets.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.topLeft,
),
// text that renders h1 elements will be red
"h1": Style(color: Colors.red),
}));
}
複製代碼
加載自定義的富文本 線上編譯器編輯富文本 實際顯示以下:
flutter_fai_webview 也能夠這裏不一一說了,感興趣的能夠看一下,選擇一款適合本身的
歡迎你們來討論。。。。。。