Web_Add_In的发布和部署

源理

学习Web Add In 已经一个星期了，终于在昨天部署出了自己的第一个Add In。效果如下图：

00

上面是什么东东，是不是和VSTO做的Add In很像？当然不是。他是基于Web的一个插件，他的代码都在网站，不在本地电脑上，所以开发者对插件有改动，在后台改改代码就行了，用户不需要重新安装和升级。最后我会录一个动图演示一下这个很爽的功能。

相关学习资料有：

陈希章写的入门教程《Office 365 开发概览系列文章和教程》https://chenxizhang.gitbooks.io/office365devguide/content/

微软在线帮助https://docs.microsoft.com/en-us/office/dev/add-ins/

我这里不讲什么理论上的东东，因为我也是刚入门。只是想通过图文的形式分享一下，如何开始做一个简单的Web Add In，发布到IIS服务器、在客户的Excel中使用开发的插件。最后再演示一下开发者通过更改服务器上的文件，实现客户端插件功能的更新。

第一步

打开Visual Studio 2017，文件―――〉新建―――〉项目

01

打开后会出现如下的界面。然后打开Visual C#―――〉Office/SharePoint―――〉外接程序―――〉Exce Web外接程序。我用的是C#，VB.net同理。名称可以自己定义

02

    上图点确定后，会弹出下面的界面。这里我是选的第一项，至于第二项有什么区别，不明白。然后点完成。

      

03

    如果没有其它的意外，你应该弹出下面的界面。

      

04

       从上面的界面可以看到，其实已经由Visual Studio给你建好了一个示例Web Add in。现在你可以调试运行一下,点一下运行等一会就会弹出Excel界面如下:

     

05

看一下效果

Web Add In的实现效果

<下面这段，如果只是了解Web Add in 发布和部署可以跳过>

一、如果你要自己具备开发的能力，你必须具备以下的一些知识：

         1、Html

         2、js

         3、Office JS API(可参照: https://dev.office.com/reference/add-ins/javascript-api-for-office)

二、在项目解决方案中可以看到示例中的文件如下图.从图中可以看到两个东西:一个是Manifest(即文件清单)这里，这个很重要他是发给用户用的文件清单个。用户的Excel也就是通过他来找到服务器的。同时也是一个菜单和Task Panle定制的地方。

一个是Web文件里面放了一些html文件、js文件、css文件、还有图片资源，当然你也可以添加其它资源。这里说白了就是一个网站的应用程序。

06

源理

第二步、发布到IIS服务器

这里之前必须讲明白一点知识

Web Add In是怎么工作的？

表达能力不强，画一张图希望能看明白

07

这一步要讲的东西就是说明上图中IIS中的文件是怎么搞出来的，然后又怎么加到服务器上去。

首先我们需要在IIS服务器上建立一个网站。然后绑定一个Https安全域名，我这里是买的一个腾讯的域名，一年25元。如何建一个IIS网站和绑定域名，我就不废话了。

这里我的建好的网站，最后IIS服务器如下图：

08

回到我们的开发工具Visual Studio2017, 生成―――〉发布ExcelWebAddInWeb

09

会弹出如下界面，然后点选发布：

10

这里点选文件夹，（当然也有其它的发布方法，这里我是发布到本地文件夹，这样操作难度低）.在选择文件夹后，最后点发布

12

打开发布的文件夹，可以看到发布后的文件

14

把以上文件，复制到IIS服务器的网站默认文件下，效果如图。这里我是远程连接到我的服务器，我直接拷贝进去。当然也有其它发布的简单方法如FTP发布和通过WebDeploy发布到网站（可自行百度方法）。

15

你启动网站后，你可以在浏览器网址中输入网站地址+/home.html，可见到如下效果

16

如果能看到上面的界面，那么恭喜你，你已经把web发布完毕了。

源理

第三步、客户端安装你发布的插件

    打开开发工具Visual Studio，点击生成―――〉部署解决方案

17

等待生成完成后，右键解决方案打开项目所在的路径

18

通过解决方案下面的以下路径

ExcelWebAddIn2\ExcelWebAddIn2\bin\Release\app.publish\OfficeAppManifests

找到Manifest文件

19

打开文件ExcelWebAddIn2Manifest.xml

21

把里面的

~remoteAppUrl替换成上一步建立的网站地址，然后保存

这个就是你的文件清单了，现在你可以把这个文件发给别的人，他们能通过这个文件清单找到你开发的web add in 插件了。

如何让他们安装呢（我感觉还是安装这个词能表达这个意思！！）。其实提供了很多方案：共享文夹、office 365集中部署、share Point、微软件的插件商店。不过不好意思，我也只会共享文件夹，因为我没有365的生态，也不会Share Point。下面是共享文件夹的方法：

首先需要在用户的电脑中建立一个共享文件夹（这一步太简单了，自己百度吧），然后把ExcelWebAddIn2Manifest.xml复制到此共享文件夹中。我的如下图

22

第二步打开用户电脑的Excel，打开文件―――〉选项

23

然后在打开的界面中找到信任中―――〉信任中心设置―――〉受信息的加载项目录

然后输入刚才建立的共享文件夹位置，

24

然后。把所有Excel文件关掉。再打开一个Excel，加载项―――〉共享文件夹―――〉ExcelWebAddIn2―――〉右下角添加（这个没截出图来）

25

等一会，他会从服务器下载插件，安装后的效果如图：

到这里已经完成了一个插件的开发，Web发布和Manifest的安装

最后演示一下开头我提到的在后台改改代码，前台自动增加功能的演示的动画。我这里web发布用的是WebDeploy和上面有所区别。

源理

最后演示一下开头我提到的在后台改改代码，前台自动增加功能的演示的动画。我这里web发布用的是WebDeploy和上面有所区别。

abc1

abc2

abc3

演示中时少了一句return ctx.sync();所以报错下面加上了。

下面是演示中所用到的代码

Js中的两段代码

1. function helloWorld() {
   
2.         Excel.run(function (ctx) {
   
3.             const rng = ctx.workbook.getSelectedRange();
   
4.             rng.values = [["Hello World"]];
   
5. return ctx.sync();   
   
6.         })
   
7.         .catch(errorHandler);
   
8. }
   
9. 
   
10. Office.initialize给按钮加的事件
    
11. $('#helloWorld').click(helloWorld);
    
12. Html中的代码
    
13. <button  id="helloWorld" >HelloWorld</button>

复制代码

minren118

好精彩的教程，是不是说web addins不需要使用微软的账号也是可以自建网站来存放，在OfficeAppManifests里改一下网址的指向地址就可以了？如果发布到应用商店里，会不会更加简单？不用自己搭建网站也不用弄共享文件夹信任之类的步骤来让用户机器顺利运行？

源理

1、是不是说web addins不需要使用微软的账号也是可以自建网站来存放？
是的，没有也可以。不过这样只能在客户端用共享文件夹，或是 share Point方法来布署你的插件
2、在OfficeAppManifests里改一下网址的指向地址就可以了？
是的，改一下就行了。
3、如果发布到应用商店里，会不会更加简单？
是的，更简单，客户仅需要在应用商店中找到你发布的插件 然后双击。前提是你有365开发者账号，然后你的插件能通过365的插件审核（具体如何发布需要看一下陈希章的教程或官网教程 ，这个需要RMB所以我没有实践过）

duanmuyu

Hi 楼主，我根据操作 但是到office相关加载项那步，点击共享文件夹看不到我的add in何解？

源理

duanmuyu 发表于 2018-5-22 21:03
Hi 楼主，我根据操作 但是到office相关加载项那步，点击共享文件夹看不到我的add in何解？

第一，检查一下你放Manifest的文件是不是已经是局网共享的文件夹了
第二、检查你的excel是不是添加了这个文件夹地址到受信任的加载项目录中

风雪夜归人L

楼主，有这方面的互相学习交流的群吗？

我现在在做这块，打开这个页面的默认大小能修改吗？如何修改

林江斌

你好，我这边有个addin的开发需求，林江斌13883232823 VX 方便电话或微信联系我