SharePoint Framework 把你的客户端web部件部署到经典的SharePoint页面
本节介绍如何把客户端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页面的更多相关文章
- SharePoint Framework 把你的客户端web部件连接到SharePoint
博客地址:http://blog.csdn.net/FoxDave 把你的web部件连接到SharePoint来访问SharePoint中的功能和数据,为终端用户提供更完整的体验.本篇会基于之前构 ...
- SharePoint Framework 配置你的SharePoint客户端web部件开发环境
博客地址:http://blog.csdn.net/FoxDave 你可以使用Visual Studio或者是你自己的开发环境来构建SharePoint客户端web部件.你可以使用Mac.PC或是 ...
- SharePoint创建一个简单的Visio Web部件图
SharePoint创建一个简单的Visio Web部件图 Visio有很多强大的Mash-up混聚功能,使它能够轻松集成到SharePoint 2010中. 1. 打开Visio 2010,创建新的 ...
- SharePoint Framework 配置Office 365开发者租户
博客地址:http://blog.csdn.net/FoxDave 你需要一个Office 365开发者租户来使用预览版SharePoint Framework构建和发布客户端web部件.你的租户 ...
- SharePoint Framework 企业向导(一)
博客地址:http://blog.csdn.net/FoxDave 简介 SharePoint Framework(SPFx)是一个新的SharePoint用户接口扩展的开发模型,它用来补充现有的 ...
- SharePoint Framework 在web部件中使用第三方样式 - 将第三方样式打到包中
博客地址:http://blog.csdn.net/FoxDave 有许多第三方库可以帮助我们构建丰富的SharePoint Framework客户端web部件.并且这些JavaScript脚本常常包 ...
- SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式
博客地址:http://blog.csdn.net/FoxDave JavaScript库格式 不同的JavaScript库的编译和打包方式各不相同.一些是以模块的方式打包的,而另一些是以纯脚本运行在 ...
- SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用
博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...
- SharePoint Framework 向web部件中添加外部库
博客地址:http://blog.csdn.net/FoxDave 在进行开发的时候,你很可能会想要引用一些公开的JavaScript库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...
随机推荐
- H264编码 封装成MP4格式 视频流 RTP封包
H264编码 封装成MP4格式 视频流 RTP封包 分类: 多媒体编程 2013-02-20 21:31 3067人阅读 ...
- Python自学:第二章 修改字符串的大小写 titile.()、upper()、lower()
title.():首字母大写 upper():全大写 lower():全小写 ada lovelace:人名,传控计算机创始人 name = "ada lovelace" prin ...
- android -------- ConstraintLayout Guideline和Barrier(四)
前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) ConstraintLayout 宽高比和偏移量比(三) 此博文主要讲解:Guidelin ...
- Confluence 6 应该如何在我的空间中组织内容
页面和博客 你在 Confluence 中创建的任何内容,从会议记录到回顾和任何中间的内容,不管来源是博客和页面. 你的主页将是任何访问你网站中的用户首先看到的内容.为了让用户更加容易的找到他们需要查 ...
- Parking Lot CodeForces - 480E
大意: 给定01矩阵, 单点赋值为1, 求最大全0正方形. 将询问倒序处理, 那么答案一定是递增的, 最多增长$O(n)$次, 对于每次操作暴力判断答案是否增长即可, 也就是说转化为判断是否存在一个边 ...
- bzoj4176. Lucas的数论 杜教筛
题意:求\(\sum_{i=1}^n\sum_{j=1}^nd(ij),d是约数个数函数\) 题解:首先有一个结论\(d(ij)=\sum_{x|i}\sum_{y|j}[(i,j)==1]\) 那么 ...
- Python编码处理和文件路径处理
#变量编码格式化 a='我是中文' print(u'%s'%a)------------------ 结果:我是中文 引用网址 #变量编码格式化 a='我是中文' print(a.encode('ut ...
- nginx-exporter安装使用
一.没有vts的启动方式 #nginx_exporter -telemetry.address=:9113 -nginx.scrape_uri="http://127.0.0.1:100 ...
- Windows下dump文件生成与分析
一. 生成Dump文件方式 1.1任务管理器 在程序崩溃后,先不关闭程序,在任务管理器中找到该程序对应的进程.右键—>创建转储文件. 此时会在默认的目录下创建出一个dump文件. 可以看出 ...
- 搭建RESTful API 之 实现WSGI服务的URL映射
javarestfull 搭建参考 http://blog.csdn.net/hejias/article/details/47424511 问题引出:对于一个稍具规模的网站来说,实现的功能不可能通过 ...