一、问题背景
对于Flutter的App开发来说，在一些场景下，我们需要用到内嵌的WebView来加载一些H5网页资源等。
在移动平台Android和IOS中，官方已经有插件来实现相关功能，webview_flutter，支持移动平台的内嵌WebView功能，使用简单，也可以通过源码导入的方式实现自定义功能。
在Flutter 3.0后，开始全面支持桌面平台，MacOS，Windows等。
我们的摸鱼kik App，作为资讯订阅类应用，在PC上也有很强的用户需求，所有需要开发桌面平台版本。
Window版本的摸鱼kik，当然也需要有相应的WebView插件来实现资讯内容的浏览功能。
下面主要来介绍一下在Windows平台上的内嵌WebView如何使用。
本文章暂时只介绍一个基本的插件使用和打包方式，之后会再通过源码层面介绍插件的具体情况，以及如何使用微软的fixed version版本，将网页内嵌到自己的源码中。
二、了解WebView2 Runtime
要使用WebView，我们需要先了解一下Windows平台上的WebView环境。
Microsoft Edge WebView2 是Windows平台的WebView内核。
控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本机应用中显示 web 内容。
使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码，或在单个 WebView2 实例中生成所有本机应用。
三、插件接入
对于移动平台Android和IOS来说，WebView插件包括两个部分，即Android和IOS原生部分代码实现，以及Dart语言实现的Flutter调用层。
对于Windows平台，原理也是一样的，即Windows API与C++实现的原生部分，以及Dart语言实现的Flutter调用层。
想要深度自定义的开发者，可以参考WebView2Samples，这是微软在Github上提供的Webview2库的相关代码与演示Demo。之后再自己实现Flutter层的MethodChannel调用即可。
仅想要使用WebView功能，不需要深度自定义，可以使用开发好的Flutter插件，webview_windows
四、 Webview_windows介绍
使用webview_windows进行开发，需要
- Visual Studio 2019+版本
- Window10 SDK
- nuget.exe
运行包含WebView2的软件，需要电脑上安装以下环境
- WebView2 Runtime
运行时环境后面会说明，如何保障没有安装WebView2 Runtime的电脑运行软件时可以正常使用。
其中前两项是需要安装在开发设备上的环境，nuget.exe需要我们放到工程根目录下。nuget下载路径，下载最左侧的exe文件即可。
环境配置好后，在项目配置中增加
dependencies:
webview_windows: ^0.2.0
之后执行flutter pub get即可。
基本使用示例：
late WebviewController _controller;
@override
void initState() {
super.initState();
_controller = WebviewController();
initPlatformState();
}
@override
Widget build(BuildContext context) {
return Webview(_controller);
}
Future initPlatformState() async {
// Optionally initialize the webview environment using
// a custom user data directory
// and/or a custom browser executable directory
// and/or custom chromium command line flags
//await WebviewController.initializeEnvironment(
// additionalArguments: '--show-fps-counter');
try {
await _controller.initialize();
await _controller.setBackgroundColor(Colors.white);
await _controller.setPopupWindowPolicy(WebviewPopupWindowPolicy.deny);
await _controller.loadUrl(url);
if (!mounted) return;
setState(() {});
} catch(e) {
}
}
至此，WebView已经可以在Windows上正常使用了。
这里以我目前开发的阅读App摸鱼Kik举例，目前支持Android与IOS，PC端过段时间即将上线，也欢迎下载体验。
加载一个微博页面的效果大致如下，效果和电脑中的浏览器体验基本一致：
五、WebView2 Runtime环境预安装
由于我们使用了WebView2，它只能在安装了WebView2 Runtime的电脑上运行，所以我们在对Windows软件进行打包时候，需要配置好安装环境。让用户在安装过程中无感知地装入WebView2 Runtime。
这里还是以摸鱼Kik举例，介绍一下Flutter的Windows平台项目如何进行打包和预安装环境的配置。
Visual Studio配置
1.找到SLN文件
SLN：解决方案文件。解决方案是用于在 Visual Studio 中组织项目的结构。
2.安装插件 installer project
在扩展-管理扩展中安装Microsoft Visual Studio Installer Project
插件本身体积不大，但可能涉及网络环境问题（墙）
3.为工程创建setup project
在弹出菜单中搜索Setup Project
在Setup Project创建完成后，会自动打开其配置窗口
这里面包含3个项目
- Application Folder
- User's Desktop
- User's Programs Menu
Application Folder配置
Application Folder中存放项目所需要的所有文件
其中包括
- 资源文件
- 动态链接库
- 项目执行文件
Visual Studio在打包时候将这些文件一并放到安装包中，在安装时候解压出来
首先为Application Folder添加项目输出
先将自己项目作为主输出，添加到Application Folder中
在添加成功后，可以在右侧看到我们的项目输出。其中包括Visual Studio自动添加的一些环境依赖的动态链接库
如MSVCP140.dll等等，是启动所需要的环境。(这里建议直接去系统C盘/Windows/System32下，将不带D的DLL文件拖进来。比如VCRUNTIME140_1.dll，VCRUNTIME140.dll。图中带D后缀的为Debug版本)
然后我们添加资源文件
Flutter的资源文件位置为：\工程目录\build\windows\runner\Debug(Release)
将其整体导入到Application Folder中，并保持层级不变
导入成功后结构如图所示：
之后再为项目添加额外的依赖，如Flutter插件所需要的动态链接库，这些文件要根据插件的需求进行添加
比如Flutter的数据库需要依赖sqlite3.dll
如果项目中有插件依赖一些额外的动态链接库，就需要手动添加进来。
在添加完成所有需要的资源后，初步完成Application Folder的配置
预安装环境配置
由于项目可能依赖一些额外的启动环境，如.net framework，WebView2Runtime等，我们需要将这些安装文件导入到我们的项目中，并在安装软件时候，通过引导程序为用户安装这些环境。
引导程序会先检测系统是否有所需要的运行环境，如果没有，则先安装环境，再安装软件。
整个过程对于用户来说是没有明显感知的，只需要一直进行下一步即可。
打开我们所创建的 Setup Project的属性，在此处打开Prerequisites配置。
Prerequisites包含所支持的环境，这里面有3个选项
- 从组件供应商的网站上下载系统必备组件
- 从与我的应用程序相同的位置下载系统必备组件
- 从下列位置下载系统必备组件
其中第一和第三个选项都是从网络上下载，区别在于是从官方网站还是自己所配置的服务器上下载。
第二个选项是我们来提供安装包，一同打包到安装包中，在安装开始时候，引导程序如果发现环境不满足运行，先来安装我们提供的这些文件，再去安装软件。
如何配置预安装包
Visual Studio会从以下位置查找环境安装包
C:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages
其中每个环境对于的子文件夹路径不一样，如.net framework对应DoNetFX，后面的数字表示版本号，如472代表4.7.2
打开任意需要的环境路径，这里以DotNetFX472举例。初始状态如下
每个文件夹对应一种语言。
这个语言是引导程序在安装时候为用户展示的界面
其中zh-Hans是简体中文
我们需要为打包提供2个安装包，程序安装包和语言包
每个语言路径下有Eula和Package两个文件
Eula：微软软件补充程序许可条款
Package：是对引导程序的翻译，并指明了我们需要在哪里下载语言包
搜索fwlink即可找到：
http://go.microsoft.com/fwlink/?LinkId=863262&clcid=0x804
-
-
-
-
-
-
-
-
-
-
-
Microsoft .NET Framework 4.7.2 (x86 和 x64)
zh-Hans
安装 Microsoft .NET Framework 4.7.2 需要管理员权限。请与管理员联系。
在此操作系统上不支持安装 Microsoft .NET Framework 4.7.2。请与应用程序供应商联系。
在 IA-64 操作系统上不支持该版本的 Microsoft .NET Framework 4.7.2。请与应用供应商联系。
http://go.microsoft.com/fwlink/?LinkId=863262&clcid=0x804
http://go.microsoft.com/fwlink/?LinkId=863258&clcid=0x804
尝试安装 Microsoft .NET Framework 4.7.2 时出现故障。
配置Edge WebView Runtime环境
对于Flutter Windows上的Webview，使用了微软的WebView2 Runtime环境
在我们打包时候，需要添加这个环境的依赖，并且和其他环境一样提供安装程序。
目前这个环境需要我们手动添加配置：
1.在C:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Package*路径下创建WebViewRuntime*
路径如下：
C:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\WebViewRuntime
2.将Webview2的安装包放在此路径下面
安装包下载：WebView2 - Microsoft Edge Developer
- Evergreen Bootstrapper，这是一个下载+安装的包，打开后会自动下载最小的runtime包安装
- Evergreen Standalone Installer，这是完整的离线安装包
- Fixed Version，这是一个固定版本的，可以内嵌到软件内部的压缩包。你可以在软件里嵌入Webview2，这样可以独立于系统中的Webview2存在，软件会使用你自己的Webview2 Runtime，但是会增加安装包的体积。
建议使用Evergreen Bootstrapper
3.配置Product、Package、Eula
仅有安装包并不能直接使用，需要使用配套的引导文件
Product文件：
Package文件：
Edge WebView runtime bootstrapper
en
Administrator permissions are required to install the Microsoft Edge WebView runtime. Contact your administrator.
A failure occurred attempting to install the Microsoft Edge WebView runtime.
http://go.microsoft.com/fwlink/p/?LinkId=2124703
Eula文件：
Eula文件是一个纯文本文件，里面包含协议的内容等。由Package文件引用。
配置完成后即可重新生成 Setup Project。成功后即可生成安装文件。