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,});@overrideState createState() => _AppWebViewState();}class _AppWebViewState extends State {late final WebViewController controller;int progress = 0;@overridevoid 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;}}}@overrideWidget 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,

)