来自 XML 错误的 Outlook 自定义加载项

Question

我一直在研究 Outlook 加载项，它既可以在 Web 应用程序中使用，也可以在桌面应用程序中使用。我遵循了本教程：Write your first Outlook add-in
我能够让加载项在网络应用程序中工作，但我无法在桌面应用程序中加载它。当我导入它时，有时 Outlook 会崩溃，有时加载项会加载，但当我尝试运行时，我会收到一条错误消息，提示加载项设置不正确。我尝试调试，我设法获得的唯一信息是我的加载项使用的 Office.js 文件中似乎有错误，考虑到此加载项在网络应用程序。

你能给我任何关于这里可能出了什么问题的线索吗？提前致谢！这是我用来将自定义加载项添加到 Outlook 应用程序的 XML：

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp">
    <Id>542385a1-816b-4b29-3f27-8d9bbc0ad244</Id>
    <Version>1.0.0.0</Version>
    <ProviderName>Some-Name</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <DisplayName DefaultValue="Some-Default-Value" />
    <Description DefaultValue="Some-Description-Value" />
    <IconUrl DefaultValue="Some-URL-Icon" />
    <HighResolutionIconUrl DefaultValue="Some-URL-Icon-HighRes" />
    <Hosts>
        <Host Name="Mailbox" />
    </Hosts>
    <Requirements>
        <Sets>
            <Set Name="MailBox" MinVersion="1.3" />
        </Sets>
    </Requirements>
    <FormSettings>
        <Form xsi:type="ItemEdit">
            <DesktopSettings>
                <SourceLocation DefaultValue="Add-In-Code-URL (HTML for 'home' page of the Add-In" />
            </DesktopSettings>
        </Form>
    </FormSettings>
    <Permissions>ReadWriteItem</Permissions>
    <Rule xsi:type="RuleCollection" Mode="Or">
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
    </Rule>
    <DisableEntityHighlighting>false</DisableEntityHighlighting>
</OfficeApp>

我想在 Outlook 2016 中使用插件

Answer 1

您的加载项运行与 the 5 second window to initialize your add-in 冲突。某些客户端 (Outlook Web App) 对遵守此超时的要求不如其他客户端（Windows 的 Outlook 2016）严格。

以下是一些一般提示：

从 CDN 引用最小化库

确保您在每个页面的 <head> 部分从 CDN 引用正确的脚本库：

<script src="//appsforoffice.microsoft.com/lib/1/hosted/Office.js"
       type="text/javascript"></script>

在代码 you provided 中，您引用了 office.debug.js。虽然这是一个有效的 URI，但调试版本的加载时间会比压缩版本更长。

office.js 库会根据您使用的客户端动态加载其他库。当您加载 office.js 的调试版本时，它也会动态加载平台特定脚本的调试版本。

鉴于这在某些客户端中有效但在其他客户端中无效，您显然处于 5s 的边缘 window。因此，虽然这应该不是什么大问题，但中断几毫秒的网络肯定不会有什么坏处 activity。

立即分配初始化函数

加载项启动时，Office 开始监视 initialize 属性。超时时钟将继续点击，直到 initialize 被分配了一个有效的功能并且 Office 已经执行它。

为了确保快速发生这种情况，您应该在 <script> 引用 Office.js 之后立即分配 Office.initialize：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script type="text/javascript">
    Office.initialize = function () {

    };
</script>

Office.initialize 中经常被忽视的一点是，它不是您正在执行的函数调用，而是您正在为其分配函数的属性。 Office 将尽快调用它，以便它可以验证你的页面是一个有效的加载项。将函数分配给 initialize 对加载项本身的性能几乎没有明显影响。这将我们带到...

初始化后，等待DOM

始终确保您的 Office.initialize 函数在执行任何 "real work" 之前等待 DOM 填充。这允许 Office 尽快连接所有内容，但在页面完全加载之前推迟执行加载项。这通常使用 JQuery 的 $(document).ready:

<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script type="text/javascript">
    Office.initialize = function () {
        $(document).ready(function () {
            initListeners();
            var config = getConfig();
            if (config) {
                sendTemplatesRequest();
            } else {
                initLogin();
            }
        });
    };
</script>

您的示例代码正确执行了此操作，但您的 app.js 包含您的 initialize 方法，直到最后才被引用。这意味着 DOM 中的所有内容，包括您正在调用的其他库，都需要在触发 initialize 之前完全加载。

你可以（也应该）将所有 JS 库放在 <body> 的底部，但有两个例外：jquery 和 office.js 应该加载在顶部你的 <head> 所以它们比其他任何东西都加载得早。

您会注意到在上面的代码中我引用了 JQuery，然后是 Office，最后是 initialize 函数。这三个项目是您唯一拥有的前期依赖项，其他所有内容都可以留在页面底部。

来自 XML 错误的 Outlook 自定义加载项

Outlook Custom Add-In from XML Error

xml

outlook

add-in

office-js