flutter 封装webview和使用本地网页

这篇具有很好参考价值的文章主要介绍了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<AppWebView> createState() => _AppWebViewState();
}

class _AppWebViewState extends State<AppWebView> {
  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<String, dynamic> msg = json.decode(sendMesStr);

    String method = msg["method"] ?? "";
    // Map<String, dynamic> 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,

)文章来源地址https://www.toymoban.com/news/detail-843645.html

到了这里,关于flutter 封装webview和使用本地网页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/weixin_43575775/article/details/136341605

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【错误记录】Android WebView 报错 ( 网页无法打开 位于 http://... 的网页无法加载, 因为 net::ERR_CLEARTEXT_NOT_PERMITTED )

    报错信息 : 网页无法打开 位于 http://… 的网页无法加载, 因为 net::ERR_CLEARTEXT_NOT_PERMITTED ; 在 Android 9.0 及以上的系统版本中 , 系统默认情况下禁止应用程序使用不安全的明文流量进行网络连接, 以提高用户的安全性。 这意味着,如果应用程序尝试连接到一个不安全的 HTTP 网

    2024年02月11日
    浏览(27)
  • 【Flutter】Flutter 如何使用 WebView

    在移动应用开发中,我们有时候需要在应用内部打开网页,而不是跳转到外部的浏览器。这时候,我们就需要使用到 WebView。那么在 Flutter 这个强大的移动应用开发框架中,我们如何使用 WebView 呢? 如果你想深入学习 Flutter,掌握更多的技巧和最佳实践,我有一个好消息要告

    2024年02月16日
    浏览(9)
  • flutter:webview_flutter的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(8)
  • QT - QML 遇到 module “QtQuick.Controls“ version 2.5 is not installed 的相关问题的解决策略

    问题由来, 在跟着视频敲代码时,需要用到 DelayButton 这个控件,因此需要导入相关的库模块 (跟着视频敲的是import QtQuick.Controls 2.5 ),但可能由于版本较低的原因没有安装这个库模块。根据输入提示,有个 import QtQuick.Controls 2.1,但是,这个库模块中并不支持 DelayButton 这个

    2024年02月12日
    浏览(10)
  • flutter开发实战-webview插件flutter_inappwebview使用

    flutter开发实战-webview插件flutter_inappwebview使用 在开发过程中,经常遇到需要使用WebView,Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter,flutter_inappwebview。之前整理了一下webview_flutter,查看https://blog.csdn.net/gloryFlow/article/details/131683122 这里我们使用fl

    2024年02月07日
    浏览(9)
  • flutter:webview_flutter和flutter_inappwebview的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(16)
  • 在 Flutter 中使用 webview_flutter 4.0 | js 交互

    大家好,我是 17。 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇。两个原因: Flutter WebView 是 Flutter 开发的必备技能 现有的文章都是关于老版本的,新版本 4.x 有了重要变化,基于 3.x 的代码很多要重写。 WebView 的文章分两篇 在 Flutter 中使用 webview_flutter 4.0 | js

    2024年01月18日
    浏览(7)
  • Android 使用webView打开网页可以实现自动播放音频

    使用webview 自动播放音视频,场景如,流媒体自动部分,音视频通话等。会出现如下问题:   解决方案如下: 配置webview 如下,这样可以自动播放音频。

    2024年02月12日
    浏览(14)
  • uniapp - 完美解决 mqtt 插件报错:socketTask onOpen is not a function问题(在uniapp小程序/h5网页/安卓苹果app端中使用mqtt协议报错解决)

    在uniapp全端平台开发中,安装引入mqtt物联网协议使用报错:socketTask onOpen is not a function 解决办法。 这个错误频发于App端、nvue等, 本博客可完美解决该报错问题。 其实,

    2024年01月18日
    浏览(11)
  • 微信小程序使用webview打开pdf文档及显示网页内容

    一、微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容 需要用到微信小程序的两个api 下载资源到本地 wx.downloadFile wx.openDocument 前一个api下载资源到本地,后一个api打开pdf文档 二、根据网页链接,把网页内容在微信小程序内部显示 需要用到微信小程序的一个标签

    2024年02月09日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包