爱数博客

AnyShare Web组件概述

AnyShare Web 组件是一套封装 AnyShare Web 客户端常用业务的组件库，该组件库实现 AnyShare Web 客户端业务解耦，并且提供内容检索、文档预览、文档共享等业务组件。

通过 AnyShare Web 组件，程序开发人员可以在自己的 Web 应用程序中快速集成 AnyShare 业务，丰富自己的 Web 应用程序，体现数据的价值，带给用户更友好的交互体验。

AnyShare Web 组件清单

AnyShare Web 组件技术原理

技术栈

• React：一款用于构建用户界面的 JavaScript 库。
• Mobx：通过响应式编程实现简单高效，可扩展的状态管理。

技术原理

Anyshare Web组件是一套基于React和Mobx技术实现的业务组件库。

Anyshare Web组件的主要核心技术是调用React的render函数进行页面的渲染。render函数接收一个根组件作为参数，而在根组件中通过React-Router的MemoryRouter组件实现根据路由渲染相应业务组件同时不修改浏览器地址栏的URL。

由于业务组件运行时需要一些信息，同时，需要将AnyShare Web组件内部中切换业务组件的方式提供给开发人员，所以，在AnyShare Web组件的主入口文件，通过export导出一个create方法，该方法接收组件渲染DOM节点、组件语言、接口地址和接口访问令牌四个参数，该方法返回一个Promise对象，Promise对象中通过React的Context特性将resolve函数、组件语言、接口地址和接口访问令牌等信息在React组件之间进行共享，等待组件执行完毕，调用resolve函数将业务组件的启动方式返回给开发人员。即核心代码如下：

开发人员可通过下面方式进行初始化组件：

如何集成AnyShare Web 组件

本章节主要内容是介绍如何调用AnyShare Web 组件，包括AnyShare Web组件包结构、如何集成组件。

AnyShare Web组件包结构说明

AnyShare Web 组件提供如下包：WebComponents.tar.gz

解压后，顶层目录显示组件包的构建信息，进入顶层目录后，文档结构如下所示：

• css 文件夹：包含 css 样式文件
• js 文件夹：包含 js 脚本文件
• media 文件夹：包含图片资源文件
• demo 文件夹：包含业务组件的使用示例
• docs 文件夹：包含开发者指南、组件清单、组件说明书、测试说明书、changelog.txt
• asset-manifest.json 文件：包含资源清单，不会对应用的运行产生任何影响，浏览器不会请求

集成AnyShare Web组件

配置静态资源

AnyShare Web 组件运行时，需要加载一些静态资源。AnyShare Web 组件的静态资源包含 media 文件夹下的图片资源文件。为保证组件运行时，可以正常加载静态资源，程序开发人员需要在项目中导入静态资源和配置静态资源的访问路径。

导入 AnyShare Web 组件静态资源文件

直接将组件包中的 media 文件夹复制到项目的静态资源目录或静态资源目录中某个子目录下

配置 AnyShare Web 组件静态资源访问路径

配置原因

AnyShare Web 组件的静态资源访问路径，默认值为/，即当项目启动后，以当前访问页面的协议、域名和端口作为路由前缀去访问 meida 文件夹。但是，由于项目的静态资源访问路径不一定为/，或者 media 文件夹可能被复制到项目的静态资源目录某个子目录下，导致 AnyShare Web 组件的静态资源访问路径需要额外访问前缀，此时，程序开发人员就需要在项目中配置 AnyShare Web 组件静态资源访问路径。

配置方式

程序开发人员通过指定项目中 html 文件 name=anyshare-sdk-public-path 的 meta 标签的 content 值，修改 AnyShare Web 组件的静态资源访问路径：

 修改AnyShare Web组件的静态资源访问路径

• content 值与 webpack 的 publicPath 值类似，可以/、./、//:、https://、http://开始
• content 值必须以/结尾

配置福昕资源转发

程序开发人员如果在项目中以preview或appContainerManager形式调用预览业务组件，则需要在项目中配置福昕资源的转发，否则，可以跳过配置福昕资源转发步骤。

配置原因

• 在项目中以preview或appContainerManager形式调用预览组件并且使用福昕预览方式预览文档时，预览组件中会请求 foxit 文件夹下的福昕资源文件，由于 AnyShare 无版权发布福昕资源，所以组件包未提供 foxit 文件夹，导致程序开发人员无法将 foxit 文件夹资源直接集成到项目中。
• 福昕预览中使用到 Web Workers 技术，Web Workers 在加载资源文件不允许跨域，所以在开发环境和生产环境中，对福昕资源的请求需要做转发处理。

配置方式

默认情况下，AnyShare Web 组件的静态资源的默认访问路径为/，所以在项目中对/foxit 请求进行转发，转发至 AnyShare Web 客户端服务的/anyshare/static/foxit。

当 AnyShare Web 组件的静态资源的访问路径存在访问前缀 prefix 时，在项目中对/prefix/foxit 请求进行转发，转发至 AnyShare Web 客户端服务的/anyshare/static/foxit。

程序开发人员需要根据项目的实际情况选取合适的转发方案，比如，开发环境下，通过 http-proxy-middleware 中间件转发，生产环境下，通过 nginx 转发。