YYHome/packages/cs_plugin_basic/lib/widget/webview_page.dart

import 'dart:convert';

import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:plugin_platform/engine/image/image_nine_grid.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/constants/color_constants.dart';
import 'package:widgets/my_button.dart';

/// webview 封装
// ignore: must_be_immutable
class WebViewPage extends StatefulWidget {
  final String? initialUrl;
  bool? showAppbar = true;
  Map? arguments = {'title': '', 'initialUrl': ''};
  String? bottomBtnTxt; //是否有底部按钮，底部按钮的文本
  VoidCallback? bottomBtnAction; //底部按钮的回调

  List<Widget>? actions = [];

  WebViewPage({Key? key, this.showAppbar, this.initialUrl, this.arguments, this.actions, this.bottomBtnTxt, this.bottomBtnAction}) : super(key: key);

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  WebViewController? webViewController;
  final _key = UniqueKey();
  String? title;
  bool _showAppbar = true;
  int _stackToView = 1;
  String? _initialUrl;
  double _webViewHeight = 200;

  @override
  void initState() {
    super.initState();
    title = widget.arguments != null ? widget.arguments!['title'] : null;
    _showAppbar = widget.showAppbar ?? true;
    Log.d("传入的initialUrl：${widget.initialUrl}");
    _initialUrl = widget.initialUrl ?? widget.arguments!['initialUrl'];
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  void dispose() async {
    super.dispose();
    // 销毁 WebView 实例
    webViewController?.loadUrl('about:blank');
    webViewController?.clearCache();
  }

  @override
  void didUpdateWidget(covariant WebViewPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.initialUrl != oldWidget.initialUrl) {
      super.didUpdateWidget(oldWidget);
    }
  }

  // 注册js回调
  _invokeJavascriptChannel(BuildContext context) {
    return [
      JavascriptChannel(
        name: 'Invoke',
        onMessageReceived: (JavascriptMessage message) {
          // var webHeight = double.parse(message.message);
          // setState(() {
          //   print('打印webHeight:$_webViewHeight');
          //   _webViewHeight = webHeight;
          // });
        },
      ),
      JavascriptChannel(
        name: 'Invoke1',
        onMessageReceived: (JavascriptMessage message) {
          // var devicePixelRatio = double.parse(message.message);
          // setState(() {
          // _webViewHeight = devicePixelRatio;
          // });
        },
      ),
      JavascriptChannel(
        name: "integral",
        onMessageReceived: (JavascriptMessage message) {
          // print("交互");
          // print("参数： ${message.message}");
          // Map res = changeStringToJsonMap(message.message);
          // print(res["operation"]);
          // _controller?.evaluateJavascript("getAddressBook('sdad')");
        },
      ),
      JavascriptChannel(
        name: "MessageDeal",
        onMessageReceived: (JavascriptMessage message) async {
          // print("交互");
          // print("参数： ${message.message}");
          // print(webViewController);
          // webViewController
          //     ?.runJavascriptReturningResult("showMessage('我（Flutter）收到了你的消息)");
          // _controller?.evaluateJavascript("document.title");
        },
      ),
      JavascriptChannel(
        name: "callWithDict",
        onMessageReceived: (JavascriptMessage message) {
          // print("交互");
          // print("参数： ${message.message}");
        },
      ),
    ];
  }

  // 获取页面高度
  _getWebViewHeight() async {
    // 方式一：
    // await webViewController?.runJavascriptReturningResult('''
    //     try {
    //       // Invoke.postMessage([document.body.clientHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight]);
    //       let scrollHeight = document.documentElement.scrollHeight;
    //       if (scrollHeight) {
    //         Invoke.postMessage(scrollHeight);
    //       }
    //     } catch {}
    //     ''');
    // 方式二：
    var originalHeight = await webViewController!.runJavascriptReturningResult("document.body.offsetHeight;");
    _webViewHeight = double.parse(originalHeight);
    setState(() {
      _webViewHeight = _webViewHeight <= 0 ? 300 : _webViewHeight;
    });
    // print('网页高度-----' + _webViewHeight.toString());
  }

  // 返回与后退的处理
  Future<bool> _onWillPop() async {
    if (webViewController == null) {
      Log.d("WebView都没有加载成功，直接返回退出即可");
      //WebView都没有加载成功，可以直接退出
      Navigator.of(context).pop();
      return false;
    } else {
      //如果点击了内部链接之后，可以返回，则直接返回
      if (await webViewController!.canGoBack()) {
        Log.d("点击内部链接，可以后台，调用后退");
        await webViewController!.goBack();
        return false; // 防止退出页面
      } else {
        Log.d("点击内部链接，无法后退，直接返回");
        Navigator.of(context).pop(); // 不能后退则退出当前页面
        return true;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: _showAppbar ? MyAppBar.appBar(context, title ?? "", backgroundColor: Colors.white, actions: widget.actions, backCallback: _onWillPop) : null,
        body: SafeArea(
          bottom: true,
          top: false,
          child: Column(
            children: [
              IndexedStack(
                index: _stackToView,
                children: [
                  Column(
                    children: [
                      Expanded(
                        child: WillPopScope(
                          onWillPop: _onWillPop,
                          child: WebView(
                            key: _key,
                            initialUrl: _initialUrl!.startsWith("http")
                                ? _initialUrl
                                : Uri.dataFromString(
                                    _initialUrl!,
                                    mimeType: 'text/html',
                                    encoding: Encoding.getByName('utf-8'),
                                  ).toString(),

                            userAgent: '',
                            //JS执行模式 是否允许JS执行
                            javascriptMode: JavascriptMode.unrestricted,
                            //webview创建好
                            onWebViewCreated: (WebViewController controller) {
                              webViewController = controller;
                            },
                            onProgress: (int progress) {
                              // print('progress=====>$progress');
                              if (progress == 100) {
                                Future.delayed(const Duration(milliseconds: 500)).then((value) => {
                                      // 获取页面高度
                                      _getWebViewHeight()
                                    });
                              }
                            },
                            onPageStarted: (String url) {
                              // print('onPageStarted=====>$url');
                            },
                            onPageFinished: (String url) {
                              Log.d('onPageFinished=====>$url');
                              if (mounted) {
                                setState(() {
                                  _stackToView = 0;
                                });
                              }
                            },
                            onWebResourceError: (WebResourceError error) {
                              // print('error=====>$error');
                            },
                            gestureNavigationEnabled: true,
                            // 注册js 回调
                            javascriptChannels: _invokeJavascriptChannel(context).toSet(),
                            navigationDelegate: (NavigationRequest request) async {
                              //如果是tel标签需要阻止并调用 launchUrl 的方法调用拨打电话
                              if (request.url.startsWith('tel:')) {
                                // 拦截tel链接
                                if (!await launchUrl(Uri.parse(request.url))) throw '无法启动拨打电话功能';
                                return NavigationDecision.prevent; // 阻止WebView导航到该链接
                              }

                              // 可以继续WebView的内部跳转
                              return NavigationDecision.navigate;
                            },
                          ),
                        ),
                      )
                    ],
                  ),
                  Container(
                    color: Colors.white,
                    child: const Center(
                      child: CircularProgressIndicator(
                        strokeWidth: 3,
                        valueColor: AlwaysStoppedAnimation(ColorConstants.appBlue),
                      ),
                    ),
                  ),
                ],
              ).expanded(),

              //底部按钮
              if (widget.bottomBtnTxt != null)
                MyButton(
                  onPressed: widget.bottomBtnAction,
                  text: widget.bottomBtnTxt ?? "",
                  textColor: Colors.white,
                  backgroundColor: context.appColors.btnBgDefault,
                  fontWeight: FontWeight.w500,
                  type: ClickType.throttle,
                  fontSize: 16,
                  minHeight: 50,
                  radius: 0,
                )
            ],
          ),
        ));
  }
}