目录
AnyShare Web组件概述
AnyShare Web 组件是一套封装 AnyShare Web 客户端常用业务的组件库，该组件库实现 AnyShare Web 客户端业务解耦，并且提供内容检索、文档预览、文档共享等业务组件。
通过 AnyShare Web 组件，程序开发人员可以在自己的 Web 应用程序中快速集成 AnyShare 业务，丰富自己的 Web 应用程序，体现数据的价值，带给用户更友好的交互体验。
AnyShare Web 组件清单
| 组件名称 | 功能解释 |
|---|---|
| addAccessor | 添加访问者 |
| copy | 复制文档 |
| doclist | 文档目录浏览 |
| download | 文档下载 |
| move | 移动文档 |
| preview | 文档预览 |
| search | 智能搜索 |
| select | 选择文档树 |
| share | 文档共享 |
| upload | 文档上传 |
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 组件运行时，需要加载一些静态资源。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 组件的静态资源访问路径：
l content 值与 webpack 的 publicPath 值类似，可以/、./、//:、https://、http://开始
l 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 转发。
配置示例
一个基于 express 和 http-proxy-middleware 的简单转发示例：
注意：
由于在生产环境下，客户或合作伙伴的业务系统不一定支持请求的转发，针对福昕资源转发问题，Web组件提供一种可选方案，在不支持请求转发的场景下，可以采用该方案使用福昕预览功能。即程序开发人员以url 形式进行福昕预览，而不是preview或appContainerManager形式进行福昕预览。
url拼接规则：
| 参数 | 描述 | 可选 |
|---|---|---|
| host | AnyShare域名 | 必传 |
| port | AnyShare Web客户端端口 | 必传 |
| docid | 文档id | 必传 |
| tokenid | 访问令牌 | 必传 |
| name | 文件名称 | 必传 |
| rev | 文件版本号 | 可选（不传默认最新版本） |
配置 DOM 节点
程序开发人员在集成 AnyShare Web 组件时，需要在项目中配置 AnyShare Web 组件渲染的 DOM 节点。通过在 html 文件中，添加 DOM 元素完成配置 DOM 节点。
注意：DOM 节点渲染后，才可以正常执行组件初始化。
导入样式文件
程序开发人员在集成 AnyShare Web 组件时，需要在项目中导入 AnyShare Web 组件的样式文件，以确保组件 UI 正常，可以通过下面三种方式导入样式文件。
在 html 文件中导入样式文件：
在类 js 文件中导入样式文件：
在类 css 文件中导入样式文件：
初始化组件库
程序开发人员在集成 AnyShare Web 组件时，在项目导入 AnyShare Web 组件的脚本文件后，就可以初始化组件库。
全局变量
在 html 文件中，通过 script 标签导入脚本文件后，将有一个 AnyShareSDKFactory 的全局变量，调用 AnyShareSDKFactory.create 方法初始化组件库：
模块化
在类 js 文件中，通过 ES6 Modules 语法从脚本文件导入 create 方法后，使用 create 方法初始化组件库：
调用业务组件
在使用 create 方法初始化组件库成功后，create 方法返回一个 Promise 对象，Promise 对象的 resolve 值为 object 对象，object 对象中的 appContainerManager 是一个容器管理器，程序开发人员可以通过 appContainerManager 启动业务组件，object 对象中的其他字段分别对应着不同业务组件，程序开发人员可以通过相应字段调用相应业务组件。
使用appContainerManager 启动添加访问者组件示例：
使用addAccessor启动添加访问者组件示例：
8676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
