Saucer 页面嵌入使用举例

Saucer 页面嵌入使用举例

以一个Vue3项目为例，把写好的页面转化为适配saucer框架的cpp代码，供C++项目调用。

saucer-dev/cli 包安装

安装@saucer-dev/cli包：

pnpm install @saucer-dev/cli

或：

npm install @saucer-dev/cli -D --save

对于TypeScript项目，则还要安装@saucer-dev/types包。

由于我这个例子是Vue3的TypeScript项目，且我想把该包放在开发模式中，并写入到package.json中，故：

npm i -D @saucer-dev/types -S

执行生成

修改package.json

在package.json中增加一个专属于saucer embed的命令——build-saucer：

  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "build-saucer": "saucer embed ./dist",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix"
  }

我们的Vue3项目生成的发布文件在dist目录，故设置为./dist。

当然，这里也可按照官方文档直接修改build命令或采用全局模式，为了环境隔离和使用方便，这里我采用了独立命令的方式。

执行命令

在终端输入npm run build-saucer，成功生成相关文件：

生成了一堆供saucer项目调用的头文件，如需要被调用的all.hpp：

#pragma once

#include <string>
#include <unordered_map>

#include <saucer/webview.hpp>

#include "assets/index-BmKUOS99.js.hpp"
#include "assets/index-DoQOFAyg.css.hpp"
#include "favicon.ico.hpp"
#include "index.html.hpp"

namespace saucer::embedded
{
    inline auto all()
    {
        std::unordered_map<std::string, embedded_file> rtn;

        rtn.emplace("assets/index-BmKUOS99.js", embedded_file{saucer::stash<>::view(fhki3Onodun733QweSkUmPOL5hKDk0Jm1AqbHqEO8PwSND7gSjDttklr4NKGNC8ZOd5rwiR9ZA4D9qJn1zePt2LQhkcmqqux30aZcME5M4SUmdR8gb9tHpT), "application/javascript"});
        rtn.emplace("assets/index-DoQOFAyg.css", embedded_file{saucer::stash<>::view(f2ueru2Ph6oUn6cBGB4hz5sqV5WtUjxJeGqnBxffPel7N9qBjKcjOoD7b84Jfbm7O9hQEkRU7VBZOKe1iSEYstFgUGeW9iEV9oQR14NmA7wWIc55krt99P6Yt), "text/css"});
        rtn.emplace("favicon.ico", embedded_file{saucer::stash<>::view(f6NJUXUjfjH0o1Nwiy8ylpWyqYKLO7zXnevrg8CrDqJN97IGSXyz7MMsxEoSSqf4To8hOYjJ70UyhGiUmLZAii7FTItTyfJ9qfmDWh), "image/vnd.microsoft.icon"});
        rtn.emplace("index.html", embedded_file{saucer::stash<>::view(f1XjtLfpkQwqzWIsQOFjiWL44ycpgAeZnK5IKNIc4nxuSqcoUAAPSQFEHFhDfrRNqkX6dMwROShLTqyBKQXDjhcZIpKiz93M1eZAa), "text/html"});

        return rtn;
    }
} // namespace saucer::embedded

参考资料

• Saucer Embedding
• DeepSeek辅助写一个Vue3页面
• C++ Saucer 编写Windows桌面应用