为支撑业务发展，提供某个场景的技术解决方案，可以采用B/S架构，也可以采用C/S架构。一般情况下会优先选用B/S架构，B/S架构上线无需发版，能更快的支撑业务发展，快速迭代。用户通过系统浏览器（如Chrome、Edge、火狐等）打开URL地址来进行业务处理。但无法满足部分特殊场景的诉求，如针对某些特殊硬件的访问，音视频编解码等大数据量计算等。

       基于以上问题，京麦PC团队基于京麦PC客户端内置的CEF嵌入式内核，剥离与京麦业务相关的代码，打造了京东Windows通用浏览器（以下简称京东浏览器），主要解决以下痛点：

1、 针对采用B/S开发的团队：

l  解决B/S开发模式下，网页无法访问特殊硬件的痛点。如智能农批项目需要访问称重秤，京东物流的P0S机、扫码枪等。京东浏览器通过组件化方式打造，可以通过扩展C++组件，访问特殊硬件，并通过通用的JSSDK扩展提供API供前端页面调用。

l  解决国内商家通过系统浏览器访问国外域名，常被防火墙系统拦截，需要手动配置Host的痛点。京东浏览器具备通过修改配置文件，为指定域名配置Host的能力。在Host配置更新时，通过接口拉取最新配置，从而无需用户手动设置，提升体验。

2、 对于采用C/S开发的团队，若部分功能需要打开URL地址，常使用系统浏览器打开，每个用户上安装的系统浏览器各不相同，体验得不到保证。京东浏览器可以作为独立进程或SDK，嵌入其他app的安装包，为用户提供更一致的浏览体验。

本文将介绍京东浏览器的核心功能，包括：

1、 基础功能

2、 扩展功能

3、 合作方式

一、基础功能

京东浏览器是基于CEF内核打造的京东专属PC（Windows & Mac）浏览器，采用组件化方式搭建，支持通过组件进行原生功能扩展，支持JSSDK扩展。Windows1.0版本已开发完成，Mac开发中。核心功能包括：

京东浏览器的主界面如下：

浏览器的整体界面，与主流浏览器保持一致。从顶部往下依次为：

l  多页签：支持打开新页面及弹出页面，支持快捷键切换，双击关闭等操作

l  网址栏：支持直接输入网址打开，非网址时通过设置的搜索引擎搜索

l  收藏栏：支持自定义文件夹，自定义收藏网址

l  网页内容：展示当前打开的网页

右上角提供了换肤，一共提供了6种颜色的皮肤。系统设置功能提供浏览器基础设置。

二、扩展功能

京东浏览器采用组件化架构搭建（ 参照：https://developer.jdcloud.com/article/2086 ），通过扩展组件的方式可以对浏览器的功能进行扩展。主要包括：

1、 JSSDK扩展

提供网页与原生代码的交互通道、提供访问特殊硬件的能力，是JSSDK扩展的目的。组件化接口中的GetJavaScriptExtend()函数，返回IJavaScriptExtend接口对象。

组件化接口

JSSDK扩展接口

若新增一个组件，用来支持截图功能，新增类ScreenShotJSExtend，实现接口

IJavaScriptExtend，代码如下：

// 头文件

#include "IJavaScriptExtend.h"

class ScreenShotJSExtend : public IJavaScriptExtend

{

public:

    ScreenShotJSExtend();

    ~ScreenShotJSExtend();

    virtual QStringList GetExtendApiNames() override;

    virtual QJsonValue Invoke(const QString& extendApiName, const QJsonObject& paramObj) override;

};

// 实现文件

#include "ScreenShotJSExtend.h"

#include "PlatformExtScreenShot.h"

#include <QJsonValue>

#include <QJsonObject>

const QString API_CAPTURESCREEN{ "captureScreen" };

const QString KEY_TYPE{ "type" };

ScreenShotJSExtend::ScreenShotJSExtend()

{

}

ScreenShotJSExtend::~ScreenShotJSExtend()

{

}

QStringList ScreenShotJSExtend::GetExtendApiNames()

{

    return { API_CAPTURESCREEN };

}

QJsonValue ScreenShotJSExtend::Invoke(const QString& extendApiName, const QJsonObject& paramObj)

{

    if (extendApiName == API_CAPTURESCREEN)

    {

        QString strType = paramObj[KEY_TYPE].toString();

        QString data = PlatformExtScreenShot::Instance()->CaptureScreenByType(strType);

        return QJsonObject{ QPair<QString, QJsonValue>("data", data) };

    }

    return QJsonValue();

}

而后通过GetJavaScriptExtend()函数返回类ScreenShotJSExtend的对象。扩展JSSDK的调用方式如下：

function captureCallback(data) { console.log(data) };

jmapp.invokeRaw('extendApi', {module: "PlatformExtScreenShot", api:

"captureScreen", param: {type: "png"}}, captureCallback);

2、 HTTP DNS扩展

京东浏览器提供了正向和逆向两种HTTP DNS扩展的方式。在浏览器初始化时，可以传入存储DNS域名的文件路径，路径格式与Host格式类似，如下：

120.52.148.50 account.shop.jd.com

120.52.148.225 afs.shop.jd.com

120.52.148.210 afsvc.jd.com

120.52.148.50 around.shop.jd.com

浏览器内核在打开网页时，若遇到以上域名，将默认解析为指定IP地址，提升性能。

3、 京东账号登录态扩展

对于京东体系账号，京东浏览器提供原生登录功能，登录后浏览器页面中将维持账号的登录态，在Cookie失效时将自动登录，在此不再详述。

三、合作方式

京东浏览器的源代码已上传到Coding，并在内部开源。若在具体的场景中需要使用，可以采用以下方式：

l  下载Coding的代码，自行编译，直接使用或修改代码，并在工程中使用，地址：

基础库：https://coding.jd.com/JD_PC_BASE/JDBase.git

浏览器：https://coding.jd.com/JD_PC_BASE/JDBrowser.git

代码采用C++开发，界面库采用QT5.12.5，开发环境为VS2017。

l  若需要使用整体的浏览器功能，可以与京麦团队联系，通过支持多端需求的方式提供功能定制和独立安装包。

需要开通代码权限，或有任何问题，可联系ERP：zhouwei142交流。