javascript 与 c 交互-使用Cef实现C++和JavaScript交互

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

使用场景：

在pc客户端中javascript 与 c 交互，很多应用场景还涉及到一些需要嵌入h5页面的模块javascript 与 c 交互，以实现高效的开发和交互

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

NimCefWebInstance全局对象扩展了call方法和register方法，分别提供后端调用C++方法和注册本地方法供C++调用。

代码就不多说了：

根据项目编码需要进行封装（使用的方法名都是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
  });

一般用法（点击打开系统默认浏览器并跳转到指定链接）

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

注册一个js方法来调用原生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."
      };
    },

至此，C++和JavaScript使用CEF的实现就基本完成了。 后续会有更多实用方法分享，持续关注……