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

【问题标题】：Outlook Custom Add-In from XML Error来自 XML 错误的 Outlook 自定义加载项
【发布时间】：2017-09-03 15:22:57
【问题描述】：

我一直在开发一个可以在 Web 应用程序和桌面应用程序中使用的 Outlook 加载项。我遵循了本教程：Write your first Outlook add-in
我能够让插件在网络应用程序中工作，但我无法让它在桌面应用程序中加载。当我导入它时，有时 Outlook 崩溃或有时加载项加载，但当我尝试运行它时，我收到一个错误，指出加载项设置不正确。我尝试调试，我设法获得的唯一信息是我的加载项使用的 Office.js 文件中似乎存在错误，考虑到此加载项在 Web 应用程序中按预期工作，我觉得这很奇怪.

你能告诉我这里可能有什么问题吗？提前致谢！这是我用来将自定义加载项添加到 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 中使用加载项

【问题讨论】：

无法使用示例清单来诊断正在发生的事情。太多节点有占位符，无法告诉我们您是否有有效条目。
感谢您的评论，@MarcLaFleur-MSFT！占位符所代表的值通过了这些要求：github.com/OfficeDev/office-js-docs/blob/master/docs/overview/… 在我的 app-home.html 文件中，我加载了这个 office-js 文件：appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js 如前所述，插件在 Web 应用程序中工作。这应该意味着条目是有效的？您能否具体说明我可以提供哪些更有用的信息？我发现在 Outlook 桌面中很难调试，插件不是在 Visual Studio 中制作的。
我会通过 office-addin-validator @github.com/OfficeDev/office-addin-validator 运行它
office-addin-validator 已通过。在 Outlook 桌面中，我设法通过多次右键单击“附加调试器”来获得更有用的错误消息，直到出现带有错误消息的弹出窗口。它是：“Office.js 尚未完全加载。请稍后再试或确保在 Office.initialize 函数中添加您的初始化代码。”
非常好，非常有帮助。您可以添加您的主页 HTML 和 JS 吗？此错误意味着您错过了 5 秒的启动超时窗口。

标签： xml outlook add-in office-js

【解决方案1】：

您的加载项与 the 5 second window to initialize your add-in 冲突。与其他客户端（Outlook 2016 for Windows）相比，某些客户端（Outlook Web App）在遵守此超时方面没有那么严格。

以下是一些一般性提示：

从 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 的调试版本时，它也会动态加载平台特定脚本的调试版本。

鉴于这适用于某些客户端，但不适用于其他客户端，您显然正处于 5 秒窗口的边缘。因此，虽然这应该没什么大不了的，但中断几毫秒的网络活动肯定不会有什么坏处。

立即分配初始化函数

当加载项启动时，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 函数在执行任何“实际工作”之前等待 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 函数。这三个项目是您唯一拥有的前期依赖项，其他所有内容都可以留在页面底部。

【讨论】：

谢谢你，马克。此信息非常有帮助。我应用了你的建议，但遗憾的是它对于桌面客户端来说仍然加载太慢。我用我的新代码更新了gist。也许其他原因可能导致加载缓慢？
我解决了这个问题。是 ECMAScript 与 IE 11 不兼容，所以我将 JS 代码转换为普通 JS 使用babeljs。您的回答也很有帮助，因此我将其标记为已接受。
我正在使用 Office.onReady(cb) 并在启动后启动我的“应用程序”。