在Flutter中使用Webview打开网页

码字辛苦!转载请注明出处!

0.前言

因为众所周知的原因,谷歌和苹果都默认禁用了http明文协议,这本身是一件好事

糟糕的是,许多网站资源文件还是使用了http协议,这对于从安卓/ios转向flutter的开发者来说

——又是一个深坑

话不多说,我作为一个从安卓转向flutter的开发者,总结一下经验,希望能帮到和我一样深受其害的朋友

1.配置安卓http明文传输权限

我知道你在想什么,导入webview和使用的步骤在后面,但这里的准备工作没做好的话,开什么网页都只能看到白板~

打开flutter中的Android项目:/android/app/src/main/AndroidManifest.xml

找到<Application>标签,添加如下内容:


    <application
        ...
        
        添加这一行
        android:usesCleartextTraffic="true"
        
        ...>

2.配置ios http明文传输权限

打开flutter中的ios项目:/ios/Runner/Info.plist

添加如下内容:

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

3.清理缓存,停止app(!!!非常重要!!!

由于flutter的热重载机制,会导致上述修改不起作用,要让上述修改生效,需要执行以下两步:

1.如果app已经运行,需要点击ide上的停止按钮,杀死app,确保下次不会从热重载启动

2.使用命令行终端,进入项目根目录,执行以下命令清理缓存

flutter clean

执行完成后,代码会全红,别紧张,只不过清理掉了依赖库而已

4.引入webview_flutter库

在pub中添加依赖:

  webview_flutter: ^2.0.8

5.重新下载依赖

执行以下命令

flutter pub get

抄作业:

以下是一个超级简单的webview demo,你也可以按webview_flutter的文档自己编写

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

main() {
  runApp(WebViewApp());
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({Key? key}) : super(key: key);

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

class _WebViewAppState extends State<WebViewApp> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebView(
        initialUrl: "https://www.baidu.com/",
        javascriptMode: JavascriptMode.unrestricted,
        onPageStarted: (String url) {
          print("onPageStarted $url");
        },
        onPageFinished: (String url) {
          print("onPageFinished $url");
        },
        onWebResourceError: (error) {
          print("${error.description}");
        },
      ),
    );
  }
}

现在,就可以运行app测试了~

最后是乞讨环节

### 解决方案 针对Flutter在Android上通过WebView加载速度慢的问题,可以采取多种策略来提升性能。由于Android的WebView控件缺乏直接支持延迟加载JavaScript脚本的能力[^2],因此需要探索其他方法。 #### 使用预缓存资源 提前下载并存储静态文件(如HTML, CSS, JavaScript),这样当应用启动时可以直接从本地读取这些文件而不是每次都重新请求网络资源。这可以通过Service Worker API实现离线功能,在首次访问后将后续请求拦截下来,并提供已缓存的内容给用户。 ```javascript // service-worker.js 文件中的部分代码片段用于注册service worker 和 缓存管理 self.addEventListener('install', event => { event.waitUntil( caches.open('my-cache').then(cache => cache.addAll([ '/', '/index.html', '/main.css', '/app.js' ]) ) ); }); ``` #### 减少不必要的HTTP请求次数 合并多个样式表或脚本到单个文件中减少请求数量;压缩图片尺寸以及采用更高效的编码格式比如WebP代替JPEG/PNG等传统形式也能有效降低传输时间开销。 #### 启用Gzip/Br压缩算法 服务器端配置启用GZIP或者Brotli (br) 压缩方式发送响应数据包之前先对其进行压缩处理再传送给客户端解析执行,从而加快网页渲染过程的速度。 #### 配置CDN加速分发服务 利用内容分发网络(Content Delivery Network),把网站上的各种资源分布在全球各地的数据中心节点里边去,使得不同地区的访客都能够就近获取所需资料,进而改善整体浏览体验质量。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值