Flutter-Webview组件处理Scheme协议

项目背景

之前我介绍过Flutter建立JsBridge用于webview与h5通信，有时候h5页面中需要唤醒其他应用的功能，通过约定的Scheme协议，比如weixin://，这时候就需要我们的Webview组件处理，否则就会出现net:ERR_UNKNOWN_URL-SCHEME的页面报错。

插件变更

上篇介绍Webview使用的文章，我用的是官方插件 webview_flutter，实际应用的时候，出现了个难以解决的bug，在华为mate30、android10环境下，h5的input元素调取手机系统键盘会失败，据我们测试，目前只发现在该手机型号、安卓系统下出现该问题，而华为客户占比很重，是必须要解决的，github上有类似的closed issue，推荐使用flutter_webview_plugin，所以就更改了webview插件，这两个插件评分都很高，提供的api类似，使用方法也相似，组件改造工作量很小。

组件改造

1、安装webview_flutter

 flutter_webview_plugin: ^0.3.10+1

2、 ios中在ios/Runner/Info.plist中添加

NSAppTransportSecurity

    NSAllowsArbitraryLoads
    
    NSAllowsArbitraryLoadsInWebContent
    

3、改造WebView组件

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:url_launcher/url_launcher.dart';

import '../configs/config.dart';
import '../utils/adapter.dart';
import '../utils/JsBridgeUtil.dart';
import '../widgets/AppIcon.dart';
import '../widgets/FixedSizeText.dart';

/// 与h5 端的一致 不然收不到消息
const String userAgent = 'FoxApp';

/// WebView页面
class Webview extends StatefulWidget {
  final String url;
  final String title;
  final VoidCallback backCallback;

  Webview({
    Key key,
    @required this.url,
    this.title = '',
    this.backCallback,
  }) : super(key: key);

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

class WebviewState extends State {
  bool isPhone = Adapter.isPhone();
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  final Set jsChannels = [
    JavascriptChannel(
        name: userAgent,
        onMessageReceived: (JavascriptMessage msg) {
          String jsonStr = msg.message;
          JsBridgeUtil.executeMethod(JsBridgeUtil.parseJson(jsonStr));
        }),
  ].toSet();

  // On urlChanged stream
  StreamSubscription _onUrlChanged;

  @override
  void initState() {
    super.initState();
    flutterWebViewPlugin.close();

    // Add a listener to on url changed
    _onUrlChanged =
        flutterWebViewPlugin.onUrlChanged.listen((String url) async {
      if (url.contains('weixin:') || url.contains('alipay:')) {
        await flutterWebViewPlugin.stopLoading();
        await flutterWebViewPlugin.goBack();
        if (await canLaunch(url)) {
          await launch(url);
        } else {
          throw 'Could not launch $url';
        }
      }
    });
  }

  @override
  void dispose() {
    _onUrlChanged.cancel();
    flutterWebViewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: isPhone ? Colors.white : Color(Config.foxColors.bg),
      body: WebviewScaffold(
        appBar: AppBar(
          backgroundColor: isPhone ? null : Color(Config.foxColors.bg),
          leading: AppIcon(Config.foxImages.backGreyUrl, callback: () {
            flutterWebViewPlugin.close();
            Navigator.of(context).pop(true);
            widget.backCallback?.call();
          }),
          title: FixedSizeText(widget.title),
          centerTitle: true,
          elevation: 0,
        ),
        url: widget.url,
        userAgent: "Mozilla/5.0 $userAgent",
        // h5 可以通过navigator.userAgent判断当前环境
        javascriptChannels: jsChannels,
        mediaPlaybackRequiresUserGesture: false,
        withZoom: true,
        withLocalStorage: true,
        hidden: true,
      ),
    );
  }
}

测试同学提出了一个bug，跳转微信时，会偶现net:ERR_UNKNOWN_URL-SCHEME页面，这条issue也在讨论这个问题，https://github.com/fluttercommunity/flutter_webview_plugin/issues/43，本质是插件提供的功能不完善，没有提供拦截页面显示的方法，社区提出了一些解决方式。

/// 兼容android进入报错页
    _onStateChanged = flutterWebViewPlugin.onStateChanged
        .listen((WebViewStateChanged state) async {
      if (mounted) {
        if (state.url.startsWith('weixin:') &&
            state.type == WebViewState.abortLoad) {
          if (await canLaunch(state.url)) {
            await launch(state.url);
          } else {
            throw 'Could not launch ${state.url}';
          }
        }
      }
    });