博客地址: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. 20180226xlVbaGetStockData

    Sub LoopGetStockData() Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA.Timer Cells. ...

  2. InputSream转为String

    public static String convertStreamToString(InputStream is) { /* * To convert the InputStream to Stri ...

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

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

  4. 4.1.6 Grundy数-硬币游戏2

    Problem Description: Alice 和 Bob 在玩一个游戏.给定 k 个数字 a1,a2,……,ak.一开始,有n堆硬币,每堆各有 Xi 枚硬币.Alice 和 Bob 轮流选出一 ...

  5. Laravel中APP_KEY起什么作用

    框架中是这样描述的: This key is used by the Illuminate encrypter service and should be set to a random, 32 ch ...

  6. 『Yaml』配置文件读写包

    YAML 在Python中的配置应用 YAML 是专门用来写配置文件的语言,和JSON相近,都是对字典做规范化文件输出的 一.简介 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读 ...

  7. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  8. HTML 5 <span> 标签

    标签定义及使用说明 <span> 用于对文档中的行内元素进行组合. <span> 标签没有固定的格式表现.当对它应用样式时,它才会产生视觉上的变化.如果不对 <span& ...

  9. IDEA 错误:找不到或无法加载主类

    下的java核心编程的源码,只有java文件,没有idea或者eclipse的项目结构信息. 分别用eclipse和idea打开了一遍,方便学习调试. 项目文件夹:E:\学习资料\Java\语法\ja ...

  10. Echarts 简单报表系列二:折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...