[003]flutter webview加载h5

本文介绍了如何在Flutter应用中使用webview_flutter库加载H5页面,包括添加依赖、安装、配置权限、导入包、处理异常以及实现滑动监听和交互功能。针对iOS和Android的网络权限问题进行了详细说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webview_flutter library:https://pub.dev/packages/webview_flutter

A Flutter plugin that provides a WebView widget.

On iOS the WebView widget is backed by a WKWebView; 
On Android the WebView widget is backed by a WebView.

一个提供WebView小部件的Flutter插件。
在iOS上,WebView小部件由WKWebView支持;
在Android上,WebView小部件由WebView支持。
1.依赖

pubspec.yaml文件中添加依赖webview_flutter: ^0.3.10+2

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  webview_flutter: ^0.3.10+2
2. 安装
// 运行如下命令
$ flutter pub get
3. 配置权限
  • 1、IOS[未验证:来自网络]

需要在Info.plist中添加io.flutter.embedded_views_preview

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
  • 2、Android

需要在AndroidManifest.xml中添加网络权限

<uses-permission android:name="android.permission.INTERNET" />
4. 导入包
import 'package:webview_flutter/webview_flutter.dart';
5. 使用webview加载
// new version
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(new ECardApp());

class ECardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ecard',
      theme: new ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: new HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('加载网络h5'),
      ),
      body: new WebView(
        initialUrl: 'h5 Url/',
      ),
    );
  }
}
6.run,ok

异常处理

IOS出现无法加载http请求的情况,Android在9.0之后也不支持http,所以需要添加信任。

1、IOS

info.plist中添加对HTTP的信任

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
2、Android
  • 2.1、清单文件AndroidManifest.xml的application标签里面设置networkSecurityConfig
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config">
         <!-- ... -->
         <!-- ... -->
    </application>
</manifest>

  • 2.2、在资源文件夹res/xml下面创建network_security_config.xml,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>


todo
  • 缓存处理
  • 监听加载状态
  • flutter和原生app交互
  • 滑动监听

原文链接:flutter webview加载h5

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值