flutter 封装webview和使用本地网页

���先看到flutter_webview_plugin 用法特别简单

flutter_webview_plugin | Flutter PackagePlugin that allow Flutter to communicate with a native Webview.https://pub-web.flutter-io.cn/packages/flutter_webview_plugin缺点： 没有实现js sdk的功能 没有办法 使用JavaScriptChannel 的功能

后面使用webview_flutter

webview_flutter | Flutter packageA Flutter plugin that provides a WebView widget on Android and iOS.https://pub-web.flutter-io.cn/packages/webview_flutter组件

import 'dart:convert';import 'dart:io';import 'package:flutter/cupertino.dart';import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';class AppWebView extends StatefulWidget {  final String url;  final Function(dynamic)? onMessageReceived;  const AppWebView({    super.key,    required this.url,    this.onMessageReceived,  });  @override  State createState() => _AppWebViewState();}class _AppWebViewState extends State {  late final WebViewController controller;  int progress = 0;  @override  void initState() {    super.initState();    controller = WebViewController()      ..setJavaScriptMode(JavaScriptMode.unrestricted)      ..addJavaScriptChannel("lh", onMessageReceived: onMessageReceived)      ..enableZoom(true)      ..setBackgroundColor(const Color(0x00000000))      ..setNavigationDelegate(        NavigationDelegate(          onProgress: (int progress) {            // Update loading bar.            this.progress = progress;            setState(() {});          },          onPageStarted: (String url) {},          onPageFinished: (String url) {},          onWebResourceError: (WebResourceError error) {},          onNavigationRequest: (NavigationRequest request) {            if (request.url.startsWith('https://www.youtube.com/')) {              return NavigationDecision.prevent;            }            return NavigationDecision.navigate;          },        ),      )      ..loadRequest(Uri.parse(widget.url));  }  // 接受h5发送来的数据  onMessageReceived(message) async {    widget.onMessageReceived?.call(message);    //接收H5发过来的数据    String sendMesStr = message.message;    print("onMessageReceived sendMesStr：${sendMesStr}");    Map msg = json.decode(sendMesStr);    String method = msg["method"] ?? "";    // Map data = msg["data"] ?? {};    if (method.isNotEmpty) {      switch (method) {        case "back":          controller.goBack();          break;      }    }  }  @override  Widget build(BuildContext context) {    if (!kIsWeb && (Platform.isIOS || Platform.isAndroid)) {      return Scaffold(        // appBar: AppBar(title: const Text('Flutter Simple Example')),        body: Stack(children: [          WebViewWidget(controller: controller),          if (progress != 100)            const Center(              child: CupertinoActivityIndicator(),            )        ]),      );    } else {      return const Center(        child: Text('WebView control is not supported on this platform yet.'),      );    }  }}

使用

Get.to(() => AppWebView(      url: 'http://localhost',      onMessageReceived: onMessageReceived,));

注意：需要重启项目才会生效

 

加载本地网页

String html =

    await rootBundle.loadString('assets/index.html');

String localHtmlFilePath = Uri.dataFromString(

  html,

  mimeType: 'text/html',

  encoding: Encoding.getByName('utf-8'),

).toString();

pubspec.yaml

  assets:

    - assets/index.html

使用

AppWebView(

  url: localHtmlFilePath,

   onMessageReceived: onMessageReceived,

)