在 WebViewer 工程开发中，通过 Template（模板）进行 UI 布局可灵活定制界面结构，满足个性化交互需求。以下是基于 Template 实现 UI 布局的详细操作步骤：
1. 定义布局模板结构
布局模板需以 <webpdf> 作为唯一根组件，内部可嵌套标准 HTML 标签（如<div>）与 WebViewer 自定义组件（如<xbutton>、<viewer>），构建完整界面框架。示例代码如下：
<webpdf>
<div class="toolbar">
<xbutton>按钮示例</xbutton>
</div>
<div class="fv__ui-body">
<viewer @touch-to-scroll></viewer>
</div>
</webpdf>
关键说明：<viewer> 组件是 PDF 内容渲染的核心区域，任何布局模板中都必须包含，否则无法正常显示 PDF 文件。
2. 通过 getLayoutTemplate 方法返回模板
需在 UIExtension.PDFUI 的 appearance 配置中，继承基础 Appearance 类并重写 getLayoutTemplate 方法，将步骤 1 中定义的模板内容以字符串形式返回，实现自定义布局与 WebViewer 的关联。示例代码如下：
var CustomAppearance = UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
return [
'<webpdf>',
' <viewer></viewer>',
'</webpdf>'
].join('');
}
});
3. 配置 Viewer 选项并初始化 PDFUI
完成模板定义后，需通过 new UIExtension.PDFUI() 初始化实例，配置核心参数（如 SDK 路径、许可证信息、渲染目标元素），使自定义布局生效并加载 WebViewer 功能。代码示例如下：
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: './lib',
jr: { licenseSN: 'yourSN', licenseKey: 'yourKey' }
},
renderTo: '#pdf-ui',
appearance: CustomAppearance
});
4. 动态修改布局（可选操作）
若需在 WebViewer 运行过程中调整 UI（如新增按钮、修改组件位置），可使用 WebViewer 提供的组件操作接口（如 after、prepend、replace），通过代码动态插入或修改界面元素。代码示例如下（新增按钮）：
pdfui.getComponentByName('target-component').then(component => {
component.after('<xbutton>新按钮</xbutton>', [
{ target: '新按钮', config: { callback: () => alert('点击') } }
]);
});
支持的核心接口：
- after：在目标组件后方插入内容
- prepend：在目标组件内部最前方插入内容
- replace：用新内容替换目标组件
5. 使用指令与组件属性优化交互
在模板中可通过 @符号 绑定指令（如提示、手势响应），或通过自定义属性配置组件行为，增强 UI 交互体验。指令需与 WebViewer 对应的功能模块（如 uix-addons）匹配，确保功能生效。代码示例如下（带提示的按钮）：
支持的接口包括after、prepend、replace等。
<xbutton @tooltip tooltip-title="提示内容">带提示的按钮</xbutton>
注意事项
- SDK 版本适配：上述步骤基于 WebViewer SDK v10.0.0 编写，不同版本的 API 可能存在差异，实际开发中需结合所用版本的官方文档调整。
- 功能模块依赖：部分指令（如 @tooltip）或组件需依赖额外功能模块（如 uix-addons），需确保工程中已引入相关模块文件。
- 许可证有效性：viewerOptions.jr 中的许可证信息（licenseSN、licenseKey）需替换为真实有效的密钥，否则可能导致功能受限。
