>#Outlook WebAddin初探 [TOC] 安装前提 ------------ tn2>首先，确保你的计算机上已安装Node.js和npm。 你可以在[官方网站](https://nodejs.org/)下载并安装它们。  ### VS Code安装Teams Toolkit tn2>在vscode扩展组件中安装Teams Toolkit组件。  创建项目 ------------ tn2>首先点开Teams这个图标点击。  tn2>点击`Create a New App`进行创建一个新的项目。  tn2>然后选择`Outlook Add-in`-->`Taskpane`-->选择项目保存的地址-->输入项目名，就创建好了。    tn2>项目创建完成后，我们需要安装依赖包。 在项目目录打开一个控制窗口，执行`npm install`进行安装相关依赖包。   tn2>然后我们还需要确认，登录Microsoft 365，点开Teams图标点击Microsoft 365，我这里已经登录好了可以看到。  运行项目 ------------ tn2>在VSCode中直接按`F5`就可以了，它会自动执行如下两个命令。 ```bash npm install npm run start ```   tn>注意：中途可能会弹出需要你安装开发者证书，点击Yes就行了。 在运行前请关闭Outlook。 tn2>项目启动后，对外开放的端口为`3000`，并且会自动打开outlook添加好插件。  tn2>随后我们点开有个邮件，再点我们的按钮就会弹出如下内容：  向功能区添加自定义按钮 ------------ tn2>将自定义按钮添加到功能区，用于将文本插入到邮件正文中。 在代码编辑器中，打开文件 `./src/command/command.ts`，并将以下代码添加到文件末尾。 此函数将 `insertHelloWorld` 插入到邮件正文中的光标点。 ```javascript function insertHelloWorld(event: Office.AddinCommands.Event) { Office.context.mailbox.item.body.setSelectedDataAsync("Hello World", {coercionType: Office.CoercionType.Text}); // Be sure to indicate when the add-in command function is complete // 确保在添加器命令函数完成后发出信号 event.completed(); } // Register the function with Office // 将函数注册到 Office Office.actions.associate("insertHelloWorld", insertHelloWorld); ``` tn2>当我们需要写入邮件时，需要提高加载项的权限。 将`authorization.permissions.resourceSpecific[0].name`属性值更改为`MailboxItem.ReadWrite.User`。 ```javascript "authorization": { "permissions": { "resourceSpecific": [ { "name": "MailboxItem.ReadWrite.User", "type": "Delegated" } ] } }, ``` tn2>当外接程序命令运行代码而不是打开任务窗格时，它必须在运行时中运行代码，该运行时独立于任务窗格代码运行的嵌入式 Web 视图。 因此，清单必须指定其他运行时。 我们在 `extension.runtimes` 下添加对象到 `runtimes` 数组。<br/> `actions[0].id` 属性的值必须与添加到 `commands.ts` 文件的函数名称完全相同，在此情况中为 `insertHelloWorld`。 在后面的步骤中，将按此 ID 引用项目。 ```javascript { "id": "ComposeCommandsRuntime", "type": "general", "code": { "page": "https://localhost:3000/commands.html", "script": "https://localhost:3000/commands.js" }, "lifetime": "short", "actions": [ { "id": "insertHelloWorld", "type": "executeFunction", "displayName": "insertHelloWorld" } ] } ``` tn2>由于我们需要修改邮件内容，所以在`ribbons`下的`contexts`中应该设置为`mailCompose`而不是`mailRead`，这样就在输入邮件时显示我们的软件。当然如果你希望二者并存可以这样。 ```javascript "contexts": [ "mailCompose", "mailRead" ], ``` tn2>然后添加上我们的按钮。 ```javascript { "id": "HelloWorldButton", "type": "button", "label": "Insert text", "icons": [ { "size": 16, "file": "https://localhost:3000/assets/my-icon-16.png" }, { "size": 32, "file": "https://localhost:3000/assets/my-icon-32.png" }, { "size": 80, "file": "https://localhost:3000/assets/my-icon-80.png" } ], "supertip": { "title": "Insert text", "description": "Inserts some text." }, "actionId": "insertHelloWorld" } ``` tn2>最后运行一下，打开一个新的邮件，输入内容后选中所选的内容再点击我们新添加的按钮`Insert text`，它将会进行改变为`Hello World`。   调用API ------------ ### 修改分组栏的名字 tn2>在`manifest.json`中找到以下节点，对label标签进行更改。 我将`label`这里改成了`Oerlikon`,分组框就编程了`Oerlikon`,大家随意更改。 然后我们F5查看一下。 ```json "extensions": [ { "ribbons": [ { "tabs": [ { "builtInTabId": "TabDefault", "groups": [ { "id": "msgReadGroup", "label": "Oerlikon", ```  ### 更换图标 tn2>我在阿里云矢量图标库上找到`16x16`、`32x32`、`64x64`、`80x80`、`128x128`的图片进行下载，并放到的`assets`目录下。 并对所有的icons进行修改（这里我举例一部分）。  ```json "label": "Oerlikon", "icons": [ { "size": 16, "file": "https://localhost:3000/assets/my-icon-16.png" }, { "size": 32, "file": "https://localhost:3000/assets/my-icon-32.png" }, { "size": 80, "file": "https://localhost:3000/assets/my-icon-80.png" } ], ```  ### 函数列表 | 函数名 | 描述 | | ------------ | ------------ | | `Office.context.mailbox.item.body.setSelectedDataAsync` | 可以将修改的文本内容进行替换。 | | `Office.context.mailbox.item.notificationMessages.replaceAsync` | 可以弹出对邮件处理的消息。(按照官方示例点击第二个按钮像这样 ) |