WebView2教程(基于C++)【一】环境初始化

创建一个VisualStudio C++项目，通过NuGet包管理器安装两个包：

注意，在项目属性页设置项目使用：C++ 20，子系统设置成窗口（相应的预处理器也要改变），DPI识别设置成每个监视器高DPI识别。

附加依赖项设置以下几项：

dwmapi.lib
shell32.lib
comctl32.lib
usp10.lib
kernel32.lib
user32.lib

新建一个main.cpp代码如下：

#include <Windows.h>
#include "App.h"

int APIENTRY wWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance,
 _In_ LPTSTR lpCmdLine, _In_ int nCmdShow)
{
    auto result = CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED);
    if (result != S_OK) {
        return 0;
    }
    App::init();
    MSG msg;
    while (GetMessage(&msg, NULL, 0, 0))
    {
        TranslateMessage(&msg);
        DispatchMessage(&msg);
    }
    CoUninitialize();
    return 0;
}

这是入口方法，我们在入口方法里初始化了App类

下面是App类的头文件代码如下：

#pragma once
#include <Windows.h>
#include <fstream>
#include <filesystem>
#include <wrl.h>
#include <wil/com.h>
#include <WebView2.h>
#include <Shlobj.h>
#include <shellapi.h>

class App
{
public:
	~App();
	static void init();
	static void dispose();
	static App* get();
	static ICoreWebView2Environment* getWebViewEnv();
	static std::wstring getAppPath();
private:
	App();
	void initConfig();
	void regScheme();
	bool checkRuntime();
	bool checkRegKey(const HKEY& key, const std::wstring& subKey);
	bool ensureAppFolder();
	HRESULT envCallBack(HRESULT result, ICoreWebView2Environment* env);
};

先看来看看这个类的一部分代码（不是全部）：

#include "App.h"
#include <rapidjson/document.h>
#include <iostream>
#include <fstream>
#include <sstream>
#include <filesystem>
#include <fstream>
#include "Util.h"
#include <string>
#include <vector>
#include <WebView2EnvironmentOptions.h>
#include "Win.h"

using namespace Microsoft::WRL;

namespace {
	static App* app;
	static rapidjson::Document d;
	static std::vector<Win*> wins;
	static 	std::filesystem::path appPath;
	static ICoreWebView2Environment* webViewEnv;
}

App::App()
{
	initConfig();
	if (!checkRuntime()) {
		return;
	}
	if (!ensureAppFolder()) {
		return;
	}
	regScheme();
	auto envCBInstance = Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(this, &App::envCallBack);
	HRESULT result = CreateCoreWebView2EnvironmentWithOptions(nullptr, appPath.c_str(), nullptr/*options.Get()*/, envCBInstance.Get());
	if (FAILED(result)) {
		return;
	}
}
App::~App()
{
	for (size_t i = 0; i < wins.size(); i++)
	{
		delete wins[i];
	}
}
void App::init() {
	if (app) {
		return;
	}
	app = new App();
}
App* App::get() {
	return app;
}
void App::dispose()
{
	delete app;
}

App::init();执行之后，就创建了一个App对象，这个对象被保存在静态变量app中，在App的构造函数中，先初始化了应用程序的配置信息。代码如下：

void App::initConfig()
{
	std::ifstream file("config.json");
	std::string content((std::istreambuf_iterator<char>(file)), std::istreambuf_iterator<char>());
	d.Parse(content.c_str());
}

这段代码读取应用程序(exe文件)所在目录下的config.json文件，并把这个json文件存储在静态变量：static rapidjson::Document d;中，以后我们会从这个d中获取配置信息。

这个config.json文件的代码如下：

{
  "appName": "WebView2JS",
  "windows": [
    {
      "id": "FirstWindow",
      "w": 1200,
      "h": 800,
      "miniWidth": 1200,
      "miniHeight": 800,
      "resizable": true,
      "title": "WebView2JS窗口",
      "frame": false,
      "shadow": true,
      "position": {
        "x": 100,
        "y": 100,
        "centerOfScreen": true
      },
      "webviews": [
        {
          "id": "FirstWebView",
          "url": "https://wv2js/index.html",
          "disableWindowOpen": null,
          "area": {
            "left": 0,
            "right": 0,
            "top": 0,
            "bottom": 0,
            "width": -1,
            "height": -1
          }
        }
      ]
    }
  ]
}

这里配置了窗口和webview的一些基本信息。

需要注意的是，我们读取JSON用到了RapidJSON，至于怎么用这个库，我们这里就不多做介绍了。甚至你可以完全不用json配置文件。

initConfig之后，就会执行checkRuntime方法，代码如下：

bool App::checkRuntime()
{
	std::wstring regSubKey = L"\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}";
	bool hasRuntime = checkRegKey(HKEY_LOCAL_MACHINE, L"SOFTWARE\WOW6432Node" + regSubKey);
	if (hasRuntime) return true;
	hasRuntime = checkRegKey(HKEY_CURRENT_USER, L"Software" + regSubKey);
	if (!hasRuntime) {
		auto result = MessageBox(nullptr, L"error", L"error", MB_OKCANCEL | MB_ICONINFORMATION | MB_DEFBUTTON1);
		if (result == IDOK) {
			ShellExecute(0, 0, L"https://go.microsoft.com/fwlink/p/?LinkId=2124703", 0, 0, SW_SHOW);
		}
		return false;
	}
	return true;
}

这个方法会判断当前的用户环境，是否安装了WebView2的运行时，如果没有，则打开一个网页，让用户去下载WebView2的运行时。

接下去执行ensureAppFolder方法，代码如下：

bool App::ensureAppFolder() {	
	PWSTR pathTmp;
	auto ret = SHGetKnownFolderPath(FOLDERID_RoamingAppData, 0, nullptr, &pathTmp);
	if (ret != S_OK) {
		CoTaskMemFree(pathTmp);
		auto result = MessageBox(nullptr, L"error", L"error", MB_OK | MB_ICONINFORMATION | MB_DEFBUTTON1);
		exit(1);
		return false;
	}
	appPath = pathTmp;
	CoTaskMemFree(pathTmp);
	appPath /= convertToWideChar(d["appName"].GetString());
	if (!std::filesystem::exists(appPath)) {
		auto flag = std::filesystem::create_directory(appPath);
		if (!flag) {
			MessageBox(nullptr, L"error", L"error", MB_OK | MB_ICONINFORMATION | MB_DEFBUTTON1);
			exit(1);
			return false;
		}
	}
	return true;
}

这个方法会初始化一个应用程序缓存目录，：C:Users[user name]AppDataRoamingWebView2JS，其中WebView2JS是从配置文件中读取的。

目录中的文件如下图所示，这与Electron应用差不多

这个路径被保存到appPath静态变量中了。

接下去会执行regScheme方法：

void App::regScheme()
{
	auto options = Microsoft::WRL::Make<CoreWebView2EnvironmentOptions>();
	options->put_AdditionalBrowserArguments(L"--allow-file-access-from-files");
	Microsoft::WRL::ComPtr<ICoreWebView2EnvironmentOptions4> options4;
	HRESULT oeResult = options.As(&options4);
	const WCHAR* allowed_origins[1] = { L"*" };
	auto defaultRegistration = Microsoft::WRL::Make<CoreWebView2CustomSchemeRegistration>(L"wv2js");
	defaultRegistration->put_HasAuthorityComponent(TRUE);
	defaultRegistration->put_TreatAsSecure(TRUE);
	defaultRegistration->SetAllowedOrigins(1, allowed_origins);
	ICoreWebView2CustomSchemeRegistration* registrations[1] = { defaultRegistration.Get() };
	options4->SetCustomSchemeRegistrations(1, static_cast<ICoreWebView2CustomSchemeRegistration**>(registrations));
}

这个方法会为WebView注册一个自定义协议，这样我们就可以用:https://wv2js这个域名加载我们的自定义页面了。

App类构造函数中最后几行代码以异步的方式创建WebView2的环境变量对象，异步回调方法为：envCallBack，这个方法的代码如下：

HRESULT App::envCallBack(HRESULT result, ICoreWebView2Environment* env)
{
	webViewEnv = env;
	rapidjson::Value& winConfigs = d["windows"].GetArray();
	for (size_t i = 0; i < winConfigs.Size(); i++)
	{
		wins.push_back(new Win(winConfigs[i]));
	}
	return S_OK;
}

在这个方法中，webview2的环境对象被保存到静态变量webViewEnv中了，接着创建了窗口对象，并保存到一个容器wins中（静态变量）。

如你所见，依据我们的配置文件，我们是可以在应用程序启动时，直接创建多个窗口的。

App类还有几个简单的方法，如下所示：

ICoreWebView2Environment* App::getWebViewEnv()
{
	return webViewEnv;
}

std::wstring App::getAppPath()
{
	return appPath.wstring();
}

这两个方法用于给其他类提供全局信息。