Cordova 文档预览插件架构解析
1. 项目文件结构说明
cordova-plugin-document-viewer/
├── src/
│ ├── android/ # Android 原生代码
│ ├── ios/ # iOS 原生代码
│ ├── windows/ # Windows 原生代码
│ └── www/ # 通用接口定义
├── www/
│ └── DocumentViewer.js
├── plugin.xml # 插件元数据配置
├── package.json # NPM 包信息
└── README.md # 使用文档
- src/：存放各平台的原生实现代码，按操作系统分类组织。
- www/：包含前端 JavaScript 接口文件
DocumentViewer.js，负责桥接 JavaScript 与原生层。 - plugin.xml：定义了插件标识、平台依赖和文件映射规则。
- package.json：描述 NPM 包的版本、关键词及兼容平台。
2. 入口文件分析
插件的核心接口定义在 www/DocumentViewer.js 中，它封装了与原生模块的通信逻辑：
// www/DocumentViewer.js
var cordovaExec = require('cordova/exec');
var DocViewer = {
openDocument: function(filePath, mimeType, config, successCb, errorCb) {
cordovaExec(successCb, errorCb, "SitewaertsDocumentViewer", "openDocument", [filePath, mimeType, config]);
}
};
module.exports = DocViewer;
通过 exec 方法调用原生层的 openDocument 动作，实现文档查看功能。
3. 关键配置文件详解
plugin.xml
此文件声明插件的跨平台集成方式，节选内容如下：
<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-document-viewer"
version="1.0.0">
<name>Document Viewer</name>
<description>Cordova plugin for viewing documents.</description>
<js-module src="www/DocumentViewer.js" name="DocumentViewer">
<clobbers target="cordova.plugins.SitewaertsDocumentViewer" />
</js-module>
<platform name="android">
<config-file target="config.xml" parent="/*">
<feature name="SitewaertsDocumentViewer">
<param name="android-package" value="de.sitewaerts.cordova.documentviewer.DocumentViewer"/>
</feature>
</config-file>
<source-file src="src/android/DocumentViewer.java" target-dir="src/de/sitewaerts/cordova/documentviewer"/>
</platform>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="SitewaertsDocumentViewer">
<param name="ios-package" value="SitewaertsDocumentViewer"/>
</feature>
</config-file>
<source-file src="src/ios/SitewaertsDocumentViewer.m" />
</platform>
</plugin>
- iOS 和 Android 平台均需注册
SitewaertsDocumentViewer特性并指定对应的原生类。 - 通过
source-file标签将原生代码引入项目。
package.json
该文件定义了 NPM 包的基本属性：
{
"name": "cordova-plugin-document-viewer",
"version": "1.0.0",
"description": "Cordova plugin to view documents.",
"cordova": {
"id": "cordova-plugin-document-viewer",
"platforms": [
"android",
"ios",
"windows"
]
},
"keywords": [
"cordova",
"document",
"viewer",
"ecosystem:cordova",
"cordova-android",
"cordova-ios",
"cordova-windows"
],
"author": "",
"license": "MIT"
}
通过上述配置文件，开发者可以快速理解插件的目录布局、原生桥接机制以及平台兼容性要求。
