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库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...
随机推荐
- Windows Phone 8 开发必备资源
一.MVVM框架推荐 1. MVVM-Light 这个框架是我最常用的MVVM框架之一,它比Prism更轻量级,但对于一般的小应用,功能足够. 官方网站:http://mvvmlight.codepl ...
- 基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
- uva11552
将字符串分为len/k块.用dp[i][j]表示第i个块必须以j结尾的最小划分.当第i块没有字符j时,dp[i][j]多计一个.如果当前块只有1种字符,那么就等于dp[i-1][j].否则对于第i块的 ...
- vue 基础(二)
Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...
- Django的form组件
forms组件 forms组件,是一个类.在视图函数中创建一个类,类需要继承forms.Form from django import forms 1.校验数据 步骤和语法: 1. 创建一个form ...
- appium自动化测试(四)
一. 获取webview的html页面 方法一: 1. 获取webview中对应的html页面 谷歌浏览器中输入地址:chrome://inspect(第一次使用要FQ) 前提:手机开启USB调试模式 ...
- bzoj1801: [Ahoi2009]chess 中国象棋 dp
题意:在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方法,中国像棋中炮的行走方式大家应该很清楚吧. 题解:dp[i][j][k]表示到了第i行,有j列 ...
- input上传限定文件类型
input上传限定文件类型 accept="image/*" 限定为只能上传图片 accept=”audio/* 限定为只能上传音频 accept=”video/*” 限定 ...
- bootstrap居中
1.页面 <div class="container"> <div class="row clearfix"> <div clas ...
- 小程序证书申请FAQ
1. 帮别人开发小程序, 先把你的微信号加到成员里, 并给予开发者权限,体验者权限,登录,数据分析,开发管理,开发设置 2. 需要https, 不能用windows2003,必须2008以上,用IIS ...