使用 Cef 实现 C++ 与 JavaScript 交互

使用场景：

在pc client 客户端中， 许多应用场景都会涉及到部分模块需要内嵌h5页面 以便于高效率开发和交互

其工作原理其实类似于 electron 原理 ， 所以很好理解

NimCefWebInstance 全局对象，拓展了一个 call 方法和一个 register 方法，分别提供前端调用 C++ 方法和注册本地的方法让 C++ 调用。

不多说 上代码：

1. 根据项目编码需要，进行封装了一下(使用的方法名都是与C++开发共同指定的协议)

Bridge.js

/**
 *
 * @param {*} exce  C++ 接口名
 * @param {*} message  传参
 */
export const nativeCall = (exce, message) =>
  new Promise(resolve => {
    window.NimCefWebInstance.call(
      exce,
      {
        message
      },
      (err, { message }) => resolve(message)
    );
  });

// 打开系统浏览器
export const OpenSystemBrowser = async (
  data,
  exce = "NativeExecutePrivilege"
) =>
  await nativeCall(exce, {
    operation: "OpenSystemBrowser",
    data
  });

2. 一般使用情况 （点击打开系统默认浏览器 并跳转指定链接）

// import 封装的方法
import { OpenSystemBrowser } from "@utils/js/Bridge";

/**
 * @OpenSystemBrowser {*} => 和 C++ 约定好的 交互接口名称
 * @param {*} => 传递参数
 * @open_url => 跳转地址
 */
openSystemBrowser(){
   let param = {
      open_url: item.jump_url
    };
   OpenSystemBrowser(param, "NativeExecutePrivilege");
}

3. 注册一个js方法给native C++调用

/**
 *
 * @param {*} name 函数名
 * @param {*} callback 指向函数
 */
export const register = (name, callback) => {
  console.log(`call: register @${name}`);
  window.NimCefWebInstance.register(name, callback);
};

//  注意：调用C++的方法 都必须在dom加载完之后
export const clientisready = callback => {
  document.onreadystatechange = () => {
    register("clientisready", callback);
  };
};

import { clientisready } from "@utils/js/Bridge";

mounted() {
	clientisready(this.getMessage)
},
methods: {
    getMessage() {
      return {
        message:
          "showJs function was executed, this message return by   		JavaScript."
      };
    },

到此，使用CEF实现C++与JavaScript 基本完成。 后续将会有更多实用的技巧分享出来，持续关注......