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交互
- 滑动监听