一步一步搭建Flutter開發架子-WebView

本身原來是作iOS開發，後來轉成react-native，iOS中的webview還好，最新的WkWebView兼容性還行。可是遇到android的時候，真的是被各類的手機支配的心累。這篇文章主要說下webView在Flutter中怎麼使用。找到最適合項目的方案

webview_flutter

On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.

引入庫在pubspec.yaml中加入。沒有用最新版本，還沒更新到2.0

webview_flutter: ^1.0.7
複製代碼

這個插件是官方推薦的使用也比較簡單

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的展現的寬高：

@override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
          height: 300,
          width: 300,
          child: WebView(
            initialUrl: 'https://flutter.dev',
          )),
    );
  }
複製代碼

加載本地html文件

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內核的才行。

x5_webview

針對於android的加載webView的解決方案。 一樣pubspec.yaml文件添加

x5_webview: ^0.24.6
複製代碼

插件介紹android6.0以上須要動態申請權限, 使用permission_handler庫進行申請權限

//請求權限
Map<Permission, PermissionStatus> statuses = await [
      Permission.phone,
      Permission.storage,
    ].request();
//判斷權限
if (!(statuses[Permission.phone].isGranted &&
statuses[Permission.storage].isGranted)) {
    print("權限被拒絕");
    return;
}
複製代碼

初始化：

var isOk = await X5Sdk.init();
print(isOk ? "X5內核成功加載" : "X5內核加載失敗");
複製代碼

支持直接打開頁面

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平臺

flutter_html

若是項目中遇到，直接返回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 也能夠這裏不一一說了，感興趣的能夠看一下，選擇一款適合本身的

one more things.....

• 圖表展現

歡迎你們來討論。。。。。。