博客地址:http://blog.csdn.net/FoxDave

本节介绍如何把客户端web部件部署到SharePoint服务端页面。我们将继续使用之前的工程。

将HelloWorld的web部件打包

在命令行窗口中,跳转到web部件工程目录。跟在工作台不同,为了在SharePoint传统的服务端页面使用客户端web部件,你需要将web部件同SharePoint注册,首先要做的就是打包。

在命令行中输入命令“code .”,用Visual Studio Code打开web部件工程,打开config文件夹中的package-solution.json文件,该文件定义了包的元数据,如下所示:

{
  "solution": {
    "name": "myfirstwebpart-client-side-solution",
    "id": "a479dbd3-b750-424a-82aa-7b45dad74125",
    "version": "1.0.0.0"
  },
  "paths": {
    "zippedPackage": "solution/myfirstwebpart.spapp"
  }
}

在命令行窗口,输入下面的命令来打包包含web部件的客户端解决方案:

gulp package-solution

这个命令会在工程的sharepoint文件夹中创建一个spapp文件,在我的示例中名称为:myfirstwebpart.spapp。

打包的内容

打包功能会使用SharePoint功能(Feature)来打包你的web部件。默认情况下,gulp任务创建:

>1个关于你的web部件的功能。

>1个.webpart文件,即用来描述你的web部件的XML文件。

你能在sharepoint文件夹中看到原始包的内容。

这些内容会被打包到.spapp文件中,这个过程跟打包.wsp文件类似。这个包跟SharePoint add-ins包非常类似,使用Microsoft Open Packaging Conventions来打包你的解决方案。

JavaScript文件、CSS和其他资产文件不会被打包,所以你需要将他们部署到一个外部的路径(比如CDN)。如果只是出于开发过程中测试的目的的话,你可以从本地电脑加载这些资产文件。

将HelloWorld的包部署到应用程序目录

接下来你需要将包部署到应用程序目录。访问你的网站应用程序目录。上传或是拖拽myfirstwebpart.spapp文件到应用程序目录。

上传完毕之后会弹出部署确认对话框,点击Deploy即可。

注意:你一定要在之前申请的开发者订阅中部署,现在还不支持普通的订阅。

在你的站点中安装客户端解决方案

访问你之前创建的开发者网站集。点击右上角的齿轮图标选择Add an app操作来添加我们之前部署的解决方案。具体过程就不详细说了,怎么向SharePoint站点中添加内容大家都知道。

在传统SharePoint页面中预览web部件

现在你已经成功部署并安装了客户端解决方案到你的站点,将这个web部件添加到一个传统的SharePoint页面。记住一些资源文件只在本地电脑可用。

在\dist文件夹中打开<your-webpart-guid>.manifest.json文件。可以看到loaderConfig中的internalModuleBaseUrls属性,在我的示例是如下:

"loaderConfig": {
    "entryModuleId": "hello-world.bundle",
    "internalModuleBaseUrls": [
      "https://CNSY20160AAAL:4321/"

在向SharePoint服务端页面添加web部件之前,运行本地服务器。在命令行中输入gulp serve --nobrowser命令,该命令不会自动运行SharePoint工作台。

将HelloWorld的web部件添加到传统页面。

访问你的网站集,创建一个页面。点击右上角的齿轮图标,选择网站内容。点击网站页面库进入,创建一个web部件页。

创建完成后访问这个页面,将自动进入页面的编辑模式,点击添加Web部件操作,选择Custom中的我们部署的web部件。

Web部件的资产会从本地环境加载。为了能够正确加载,你需要设置浏览器为允许加载不安全的脚本。

启用之后就可以看到跟之前本地调试一样效果的web部件了,体验是一样的。

资产文件在本地是个问题,假设我们做的是一款产品,从本地加载是不现实的。下一讲将介绍如何把web部件相关的资产文件放到CDN上。



SharePoint Framework 把你的客户端web部件部署到经典的SharePoint页面的更多相关文章

  1. SharePoint Framework 把你的客户端web部件连接到SharePoint

    博客地址:http://blog.csdn.net/FoxDave 把你的web部件连接到SharePoint来访问SharePoint中的功能和数据,为终端用户提供更完整的体验.本篇会基于之前构 ...

  2. SharePoint Framework 配置你的SharePoint客户端web部件开发环境

    博客地址:http://blog.csdn.net/FoxDave 你可以使用Visual Studio或者是你自己的开发环境来构建SharePoint客户端web部件.你可以使用Mac.PC或是 ...

  3. SharePoint创建一个简单的Visio Web部件图

    SharePoint创建一个简单的Visio Web部件图 Visio有很多强大的Mash-up混聚功能,使它能够轻松集成到SharePoint 2010中. 1. 打开Visio 2010,创建新的 ...

  4. SharePoint Framework 配置Office 365开发者租户

    博客地址:http://blog.csdn.net/FoxDave 你需要一个Office 365开发者租户来使用预览版SharePoint Framework构建和发布客户端web部件.你的租户 ...

  5. SharePoint Framework 企业向导(一)

    博客地址:http://blog.csdn.net/FoxDave 简介 SharePoint Framework(SPFx)是一个新的SharePoint用户接口扩展的开发模型,它用来补充现有的 ...

  6. SharePoint Framework 在web部件中使用第三方样式 - 将第三方样式打到包中

    博客地址:http://blog.csdn.net/FoxDave 有许多第三方库可以帮助我们构建丰富的SharePoint Framework客户端web部件.并且这些JavaScript脚本常常包 ...

  7. SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式

    博客地址:http://blog.csdn.net/FoxDave JavaScript库格式 不同的JavaScript库的编译和打包方式各不相同.一些是以模块的方式打包的,而另一些是以纯脚本运行在 ...

  8. SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用

    博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...

  9. SharePoint Framework 向web部件中添加外部库

    博客地址:http://blog.csdn.net/FoxDave 在进行开发的时候,你很可能会想要引用一些公开的JavaScript库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...

随机推荐

  1. H264编码 封装成MP4格式 视频流 RTP封包

    H264编码 封装成MP4格式 视频流 RTP封包         分类:             多媒体编程              2013-02-20 21:31     3067人阅读    ...

  2. Python自学:第二章 修改字符串的大小写 titile.()、upper()、lower()

    title.():首字母大写 upper():全大写 lower():全小写 ada lovelace:人名,传控计算机创始人 name = "ada lovelace" prin ...

  3. android -------- ConstraintLayout Guideline和Barrier(四)

    前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) ConstraintLayout 宽高比和偏移量比(三) 此博文主要讲解:Guidelin ...

  4. Confluence 6 应该如何在我的空间中组织内容

    页面和博客 你在 Confluence 中创建的任何内容,从会议记录到回顾和任何中间的内容,不管来源是博客和页面. 你的主页将是任何访问你网站中的用户首先看到的内容.为了让用户更加容易的找到他们需要查 ...

  5. Parking Lot CodeForces - 480E

    大意: 给定01矩阵, 单点赋值为1, 求最大全0正方形. 将询问倒序处理, 那么答案一定是递增的, 最多增长$O(n)$次, 对于每次操作暴力判断答案是否增长即可, 也就是说转化为判断是否存在一个边 ...

  6. bzoj4176. Lucas的数论 杜教筛

    题意:求\(\sum_{i=1}^n\sum_{j=1}^nd(ij),d是约数个数函数\) 题解:首先有一个结论\(d(ij)=\sum_{x|i}\sum_{y|j}[(i,j)==1]\) 那么 ...

  7. Python编码处理和文件路径处理

    #变量编码格式化 a='我是中文' print(u'%s'%a)------------------ 结果:我是中文 引用网址 #变量编码格式化 a='我是中文' print(a.encode('ut ...

  8. nginx-exporter安装使用

    一.没有vts的启动方式   #nginx_exporter -telemetry.address=:9113 -nginx.scrape_uri="http://127.0.0.1:100 ...

  9. Windows下dump文件生成与分析

    一.    生成Dump文件方式 1.1任务管理器 在程序崩溃后,先不关闭程序,在任务管理器中找到该程序对应的进程.右键—>创建转储文件. 此时会在默认的目录下创建出一个dump文件. 可以看出 ...

  10. 搭建RESTful API 之 实现WSGI服务的URL映射

    javarestfull 搭建参考 http://blog.csdn.net/hejias/article/details/47424511 问题引出:对于一个稍具规模的网站来说,实现的功能不可能通过 ...