博客地址: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. OnSen UI结合AngularJs打造”美团"APP"我的”页面 --Hybrid App

    1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...

  2. p2725 Stamps

    背包. #include <iostream> #include <cstdio> #include <cmath> #include <algorithm& ...

  3. linux 下如何安装memcached 和启动服务

    一.安装gcc # yum -y install gcc 二.安装libevent # wget http://www.monkey.org/~provos/libevent-2.0.12-stabl ...

  4. python记录_day33 线程

    ##进程就像加工厂,线程是里边的流水线##进程是资源单位,线程是运行单位,每个进程至少有一个线程 即进程是资源分配的最小单位,线程是CPU调度的最小单位 一.线程的创建两种方式,和进程类似1.t = ...

  5. ubuntu Sublime Text 2编辑器安装

    官网下载http://www.sublimetext.com/2 选择合适的包下载回来的格式是.tar.bz2格式,需要进行解压. 1,解压:tar -xvf Sublime\ Text\ 2.0.2 ...

  6. input上传限定文件类型

    input上传限定文件类型 accept="image/*"   限定为只能上传图片 accept=”audio/*   限定为只能上传音频 accept=”video/*” 限定 ...

  7. MySQL-1236问题处理

      2018年9月26日 9:25 现象:192.168.7.206.192.168.7.207互为双主,同步报错  1236   7.206现象如下 root@mysqldb 09:15  [mys ...

  8. UI基础一:值节点赋值

    METHOD EH_ONSEARCH. *CALL METHOD SUPER->EH_ONSEARCH ** EXPORTING ** HTMLB_EVENT = ** HTMLB_EVENT_ ...

  9. 不安装Oracle数据库使用plsqldevloper

    1.Oracle官网下载instantclient 解压到D:\zl\instantclient_11_2 2.配置环境变量 ORACLE_HOME = D:\zl\instantclient_11_ ...

  10. 一、J2EE

    一.HTTP协议中的响应代码 响应代码从1xx--5xx一共有41中.常见的 404:表示访问的页面不存在.这表示一个浏览器的错误,就是服务端没有提供这个服务,你却去访问.这个锅要算在浏览器头上,而不 ...