Flutter加載Html并實(shí)現(xiàn)與JS 的雙向調(diào)用

https://blog.csdn.net/zl18603543572/article/details/96585707

2019-07-20 16:01:01?早起的年輕人?閱讀數(shù) 2025??收藏?更多

分類專欄：?flutter??flutter 從入門 到精通?

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循?CC 4.0 BY-SA?版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。?

本文鏈接：https://blog.csdn.net/zl18603543572/article/details/96585707

更多文章請查看 flutter從入門 到精通

可以用來加載 Html 頁面，以實(shí)現(xiàn) Android 中 WebView 或者 是 iOS 中的 UIWebView 中的功能。

Flutter中可用于來加載 Html 頁面的插件 ,

flutter_WebView_plugin

webView_flutter

flutter_inappbrowser

html

flutter_html

flutter_html_view

這些多多少滿足不了我項(xiàng)目中的需求，所以花了幾天時(shí)間開發(fā)了 Flutter_Fai_Webview 插件，可實(shí)現(xiàn) Android 中 WebView 或者 是 iOS 中的 UIWebView 中的功能，因?yàn)?Flutter_Fai_Webview 插件本質(zhì)上是通過 PlatformView 功能將原生的 View 嵌套在 Flutter 中。

插件源碼在這里

開發(fā)插件要具備的知識(shí)：

Flutter 與 原生 Android iOS 雙向通信

Flutter通過MethodChannel實(shí)現(xiàn)Flutter 與Android iOS 的雙向通信

Flutter通過BasicMessageChannel實(shí)現(xiàn)Flutter 與Android iOS 的雙向通信

Flutter 中內(nèi)嵌 Android iOS 原生View的編程基礎(chǔ)

flutter調(diào)用android 原生TextView?

flutter調(diào)用ios 原生View?

最重要的一點(diǎn)是 具備 Android iOS 原生語言的開發(fā)能力

Flutter_Fai_Webview 插件可實(shí)現(xiàn)的功能：

同時(shí)適配于 Android Ios 兩個(gè)平臺(tái)

通過 url 來加載渲染一個(gè)Html 頁面

加載 Html 文本數(shù)據(jù) 如?<html> .... </html>等

加載 Html 標(biāo)簽數(shù)據(jù) 如??<p> ... </p>

實(shí)現(xiàn) WebView 加載完成后，自動(dòng)測量 WebView 的高度，并回調(diào) Flutter

實(shí)現(xiàn) WebView 加載完成監(jiān)聽

實(shí)現(xiàn) WebView 上下滑動(dòng)、滑動(dòng)到頂部兼聽、滑動(dòng)到底部兼聽并回調(diào) Flutter

實(shí)現(xiàn) 兼聽 WebView 輸出日志并將日志回調(diào) Flutter

實(shí)現(xiàn) 為 Html 頁面中所有的圖片添加點(diǎn)擊事件 并回調(diào) Flutter

實(shí)現(xiàn) Html 中Js 調(diào)用 Flutter 頁面功能

實(shí)現(xiàn) Flutter 頁面中 觸發(fā) Html 頁面中 Js 方法

本插件開發(fā)的過程將在這里詳細(xì)論述

也就是說在這里將教會(huì)你 開發(fā)一個(gè) Flutter 插件。

Flutter 加載 HTML 詳細(xì)闡述（iOS 端實(shí)現(xiàn)）

Flutter 加載 HTML 詳細(xì)闡述（Android 端實(shí)現(xiàn)）

開始使用

1 基本使用說明

1.1 Flutter 項(xiàng)目中 pubspec.xml 文件中 配置插件

? flutter_fai_webview:

? ? git:

? ? ? url: https://github.com/zhaolongs/Flutter_Fai_Webview.git

? ? ? ref: master

1.2 在使用到 WebView 頁面中

引入頭文件

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

1

1.3 創(chuàng)建 WebView 組件

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網(wǎng)頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調(diào)

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

1.4 FaiWebViewWidget 構(gòu)造參數(shù)說明

? FaiWebViewWidget({

? ? //webview 加載網(wǎng)頁鏈接

? ? this.url,

? ? //webview 加載 完整的 html 文件數(shù)據(jù)? 如 <html> .... </html>

? ? // 不完整的 html 文件數(shù)據(jù) 如 <p></p> 配置到此項(xiàng)，用此屬性來加載，只會(huì)渲染 <p> ... </p> 中已有的樣式 不會(huì)適配移動(dòng)端顯示

? ? this.htmlData,

? ? //webview 加載完整的 html 文件數(shù)據(jù) 或者是 不完整的 html 文件數(shù)據(jù) 如 <p></p>

? ? //不完整的 html 文件數(shù)據(jù) 如 <p></p> 配置到此項(xiàng)，會(huì)自動(dòng)將不完整的 html 文件數(shù)據(jù) 添加 <html><head> .. </head> <body> 原來的內(nèi)容 </body></html>,并適配移動(dòng)端

? ? this.htmlBlockData,

? ? //輸出 Log 日志功能

? ? this.isLog,

? ? // 為 Html 頁面中所有的圖片添加 點(diǎn)擊事件 并通過回調(diào) 通知 Flutter 頁面

? ? // 只有使用 htmlBlockData 屬性加載的頁面才會(huì)有此效果

? ? this.htmlImageIsClick = false,

? ? // Html 頁面中圖片點(diǎn)擊回調(diào)

? ? this.imageCallBack,

? ? // Html 頁面中所有的消息回調(diào)

? ? this.callback,

? });


1.5 原生回調(diào) Flutter 的 callback 以及 Html 頁面中 圖片 點(diǎn)擊回調(diào)說明

? /**

? * code 原生 Android iOS 回調(diào) Flutter 的消息類型標(biāo)識(shí)

? * message 消息類型日志

? * content 回調(diào)的基本數(shù)據(jù)

? */

? Function(int code, String message, dynamic content) callback;


詳細(xì)說明

? //當(dāng)前點(diǎn)擊的圖片 URL

? String imageUrl = null;

? //是否顯示浮動(dòng)按鈕

? bool isShowFloat = false;

? /**

? * code 當(dāng)前點(diǎn)擊圖片的 位置

? * url 當(dāng)前點(diǎn)擊圖片對應(yīng)的 鏈接

? * images 當(dāng)前 Html 頁面中所有的圖片集合

? */

? void imageCallBack(int code, String url, List<String> images) {

? ? imageUrl = url;

? ? setState(() {});

? }

? void callBack(int code, String msg, content) {

? ? String call = "回調(diào) code:" +

? ? ? ? code.toString() +

? ? ? ? " msg:" +

? ? ? ? msg.toString() +

? ? ? ? " content:" +

? ? ? ? content.toString();

? ? if (code == 201) {

? ? ? //加載頁面完成后 對頁面重新測量的回調(diào)

? ? ? //這里沒有使用到

? ? ? //當(dāng)FaiWebViewWidget 被嵌套在可滑動(dòng)的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

? ? ? //設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? ? webViewHeight = content;

? ? } else if (code == 202) {

? ? ? // Html 頁面中 Js 的回調(diào)

? ? ? // Html 頁面中的開發(fā)需要使用 Js 調(diào)用? 【 Android 中 使用 controll.otherJsMethodCall( json )】 【iOS中 直接調(diào)用 otherJsMethodCall( json ) 】

? ? ? // 在 Flutter 中解析 json 然后加載不同的功能

? ? ? String jsJson = content;

? ? } else if (code == 203) {

? ? ? // 為 Html 頁面中的圖片添加 點(diǎn)擊事件后，點(diǎn)擊圖片會(huì)回調(diào)此方法

? ? ? // content 為當(dāng)前點(diǎn)擊圖片的 地址

? ? ? // 實(shí)現(xiàn)更多功能 比如 一個(gè) Html 頁面中 有5張圖片，點(diǎn)擊放大查看并可右右滑動(dòng)

? ? ? // 這個(gè)功能可以在 imageCallBack 回調(diào)中處理

? ? } else if (code == 301) {

? ? ? //當(dāng) WebView 滑動(dòng)到頂部的回調(diào)

? ? } else if (code == 302) {

? ? ? //當(dāng) WebView 開始向下滑動(dòng)時(shí)的回調(diào)

? ? ? //隱藏按鈕

? ? ? isShowFloat = true;

? ? } else if (code == 303) {

? ? ? //當(dāng) WebView 開始向上滑動(dòng)時(shí)的回調(diào)

? ? ? //顯示按鈕

? ? ? isShowFloat = false;

? ? } else if (code == 304) {

? ? ? //當(dāng) WebView 滑動(dòng)到底部的回調(diào)

? ? } else if (code == 401) {

? ? ? //當(dāng) WebView 開始加載的回調(diào)

? ? } else if (code == 402) {

? ? ? //當(dāng) WebView 加載完成的回調(diào)

? ? } else if (code == 403) {

? ? ? // WebView 中 Html中日志輸出回調(diào)

? ? } else if (code == 401) {

? ? ? // WebView 加載 Html 頁面出錯(cuò)的回調(diào)

? ? } else if (code == 501) {

? ? ? // 當(dāng) Html 頁面中有 Alert 彈框彈出時(shí) 回調(diào)消息

? ? } else if (code == 1000) {

? ? ? // 操作失敗 例如 空指針異常 等等

? ? } else {

? ? ? //其他回調(diào)

? ? }

? ? setState(() {

? ? ? message = call;

? ? });

? }

1.6 Flutter 刷新頁面

//調(diào)用此方法 便可刷新（重新加載頁面）

webViewWidget.refresh();

1.7 Flutter 調(diào)用 JS 方法

//testAlert() 就是我們要調(diào)用的 Html 頁面中 JS的方法

// testAlert() 可以自定義與 Html 中的 JS 開發(fā)約定

webViewWidget.loadJsMethod("testAlert()");

2 Flutter 加載頁面

2.1 通過 url 加載 Html 頁面

import 'package:flutter/material.dart';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 加載地址

*? 通過 url 加載了一個(gè) Html頁面 是取常用的方法

*/

class DefaultLoadingWebViewUrlPage extends StatefulWidget {

? @override

? MaxUrlState createState() => MaxUrlState();

}

class MaxUrlState extends State<DefaultLoadingWebViewUrlPage> {

? //要顯示的頁面內(nèi)容

? Widget childWidget;

? //加載Html的View

? FaiWebViewWidget webViewWidget;

? //原生 發(fā)送給 Flutter 的消息

? String message = "--";

? // 頁面

? String htmlUrl = "https://blog.csdn.net/zl18603543572";

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網(wǎng)頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調(diào)

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? ? appBar: AppBar(

? ? ? ? ? leading: IconButton(

? ? ? ? ? ? onPressed: () {

? ? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? ? },

? ? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ? ),

? ? ? ? ? title: Container(

? ? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? ? height: 28,

? ? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? message,

? ? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ? body: webViewWidget,

? ? ? );

? }

? void callBack(int code, String msg, content) {

? ? //加載頁面完成后 對頁面重新測量的回調(diào)

? ? //這里沒有使用到

? ? //當(dāng)FaiWebViewWidget 被嵌套在可滑動(dòng)的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

? ? //設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? if (code == 201) {

? ? ? //頁面加載完成后 測量的 WebView 高度

? ? ? int webViewHeight = content;

? ? ? print("webViewHeight " + webViewHeight.toString());

? ? } else {

? ? ? //其他回調(diào)

? ? }

? ? setState(() {

? ? ? message = "回調(diào)：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

2.2 通過 Html Data 加載 Html 頁面

import 'package:flutter/material.dart';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 通過 htmlBlockData 加載 Html 數(shù)據(jù) 并添加移動(dòng)適配

*/

class DefaultHtmlBlockDataPage2 extends StatefulWidget {

? @override

? DefaultHtmlBlockDataPageState createState() =>

? ? ? DefaultHtmlBlockDataPageState();

}

class DefaultHtmlBlockDataPageState extends State<DefaultHtmlBlockDataPage2> {

? FaiWebViewWidget webViewWidget;

? //原生 發(fā)送給 Flutter 的消息

? String message = "--";

? double webViewHeight = 100;

? //要顯示的頁面內(nèi)容

? Widget childWidget;

? String htmlBlockData = "<!DOCTYPE html><html> <head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">? <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1\"> </head> <body><p><br/></p><p>生物真題&nbsp;</p><p><img src=\"http://pic.studyyoun.com/1543767087584\" title=\"\" alt=\"\"/></p><p><img src=\"http://pic.studyyoun.com/1543767100547\" title=\"\" alt=\"\"/></p><p><br/></p><p><br/></p><p><br/></p></body></html>";

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網(wǎng)頁鏈接

? ? ? htmlBlockData: htmlBlockData,

? ? ? //webview 加載信息回調(diào)

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? leading: IconButton(

? ? ? ? ? onPressed: () {

? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? },

? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ),

? ? ? ? title: Container(

? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? height: 28,

? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? child: Text(

? ? ? ? ? ? message,

? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? ? body: Container(child: webViewWidget,),

? ? );

? }

? callBack(int code, String msg, content) {

? ? //加載頁面完成后 對頁面重新測量的回調(diào)

? ? //這里沒有使用到

? ? //當(dāng)FaiWebViewWidget 被嵌套在可滑動(dòng)的 widget 中，必須設(shè)置 FaiWebViewWidget 的高度

? ? //設(shè)置 FaiWebViewWidget 的高度 可通過在 FaiWebViewWidget 嵌套一層 Container 或者 SizeBox

? ? if (code == 201) {

? ? ? webViewHeight = content;

? ? ? print("webViewHeight " + webViewHeight.toString());

? ? } else {

? ? ? //其他回調(diào)

? ? }

? ? setState(() {

? ? ? message = "回調(diào)：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

2.3 加載混合頁面

也就是說 一個(gè)頁面中，一部分是 Flutter Widget 一部分是 webview 加載。

import 'package:flutter/material.dart';

import 'dart:async';

import 'package:flutter_fai_webview/flutter_fai_webview.dart';

/**

*? 混合頁面加載

*

*/

class DefaultHexRefreshPage extends StatefulWidget {

? @override

? MaxUrlHexRefreshState createState() => MaxUrlHexRefreshState();

}

class MaxUrlHexRefreshState extends State<DefaultHexRefreshPage> {

? FaiWebViewWidget webViewWidget;

? //原生 發(fā)送給 Flutter 的消息

? String message = "--";

? String htmlUrl = "https://blog.csdn.net/zl18603543572";

? double webViewHeight = 1;

? @override

? void initState() {

? ? super.initState();

? ? //使用插件 FaiWebViewWidget

? ? webViewWidget = FaiWebViewWidget(

? ? ? //webview 加載網(wǎng)頁鏈接

? ? ? url: htmlUrl,

? ? ? //webview 加載信息回調(diào)

? ? ? callback: callBack,

? ? ? //輸出日志

? ? ? isLog: true,

? ? );

? }

? @override

? Widget build(BuildContext context) {

? ? return Scaffold(

? ? ? appBar: AppBar(

? ? ? ? leading: IconButton(

? ? ? ? ? onPressed: () {

? ? ? ? ? ? Navigator.pop(context);

? ? ? ? ? },

? ? ? ? ? icon: Icon(Icons.arrow_back_ios),

? ? ? ? ),

? ? ? ? title: Container(

? ? ? ? ? padding: EdgeInsets.only(left: 10, right: 10),

? ? ? ? ? height: 28,

? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? color: Color.fromARGB(90, 0, 0, 0),

? ? ? ? ? child: Text(

? ? ? ? ? ? message,

? ? ? ? ? ? style: TextStyle(color: Colors.white, fontSize: 12),

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? ? body: buildRefreshHexWidget(),

? ? );

? }

? /**

? * 需要注意的是

? * RefreshIndicator 會(huì)覆蓋 WebView 的滑動(dòng)事件

? * 所有關(guān)于 監(jiān)聽 WebView 的滑動(dòng)監(jiān)聽將會(huì)失效

? */

? Widget buildRefreshHexWidget() {


? ? return RefreshIndicator(

? ? ? //下拉刷新觸發(fā)方法

? ? ? onRefresh: _onRefresh,

? ? ? //設(shè)置webViewWidget

? ? ? child: SingleChildScrollView(

? ? ? ? child: Column(

? ? ? ? ? children: <Widget>[

? ? ? ? ? ? Container(

? ? ? ? ? ? ? color: Colors.grey,

? ? ? ? ? ? ? height: 220.0,

? ? ? ? ? ? ? child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[

? ? ? ? ? ? ? ? ? Center(child: Text("這里是 Flutter widget? "),)

? ? ? ? ? ? ? ],),

? ? ? ? ? ? ),

? ? ? ? ? ? Align(

? ? ? ? ? ? ? alignment: Alignment(0, 0),

? ? ? ? ? ? ? child: Text("以下是 Html 頁面 "),

? ? ? ? ? ? ),

? ? ? ? ? ? Container(

? ? ? ? ? ? ? color: Colors.redAccent,

? ? ? ? ? ? ? height: 1.0,

? ? ? ? ? ? ),

? ? ? ? ? ? Container(

? ? ? ? ? ? ? height: webViewHeight,

? ? ? ? ? ? ? child: webViewWidget,

? ? ? ? ? ? )

? ? ? ? ? ],

? ? ? ? ),

? ? ? ),

? ? );

? }

? Future<Null> _onRefresh() async {

? ? return await Future.delayed(Duration(seconds: 1), () {

? ? ? print('refresh');

? ? ? webViewWidget.refresh();

? ? });

? }

? callBack(int code, String msg, content) {

? ? //加載頁面完成后 對頁面重新測量的回調(diào)

? ? if (code == 201) {

? ? ? //更新高度

? ? ? webViewHeight = content;

? ? ? print("webViewHeight " + content.toString());

? ? } else {

? ? ? //其他回調(diào)

? ? }

? ? setState(() {

? ? ? message = "回調(diào)：code[" + code.toString() + "]; msg[" + msg.toString() + "]";

? ? });

? }

}

文章最后發(fā)布于: 2019-07-20 16:01:01

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,317評(píng)論 0贊 17
  • WebView·開車指南 2016-08-31BugDev 北京市東城區(qū)首席Bug布道師開山之作，一整月交通事故血...
    53c021c38a1d閱讀 935評(píng)論 0贊 1
  • WebView簡介 String getUrl()：獲取當(dāng)前頁面的URL。 reload()：重新reload當(dāng)前...
    QM閱讀 3,312評(píng)論 0贊 52
  • Tips 由于WebView的用法實(shí)在太多，如果您只是想查詢某個(gè)功能的使用——建議Ctrl+F（Commad+F）...
    BugDev閱讀 7,908評(píng)論 11贊 109
  • 幽默感幫助家長和孩子，輕松一下，記住歡笑樂趣。今天可以嘗試一下，在大棒和二棒鬧別扭時(shí)，輕輕的把它們疊在一起說疊豬豬...
    棒棒媽_0489閱讀 82評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容