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

本篇接上一講，我們一起來看一下如何部署和測試本地開發的web部件。

在SharePoint中預覽web部件

SharePoint工作臺在SharePoint中被承載，用來在開發環境預覽和測試本地web部件。它的主要優勢是運行在SharePoint上下文的，你可以跟SharePoint數據進行交互。

還記得之前配置的Office 365開發者租戶嗎？忘了的話點這里。

首先把workbench.aspx這個文件上傳到你的SharePoint開發者網站的文檔庫，得到一個完整的URL，如https://your-sharepoint-site/Shared%20Documents/workbench.aspx。

注意，這里要確保你的本地調試是可用的，什么意思呢？在第一部分介紹的gulp serve命令要處于執行中，即開啟狀態，否則本地的那個是不可訪問的。并且，要確保https://localhost:4321/temp/manifests.js是可訪問的，否則會一直彈出下面加載腳本失敗的提示信息。

默認情況下你的瀏覽器可能是禁止加載本地腳本的，這時工作臺會提示你這種情況，示例圖如下：

為了執行本地腳本，你需要將瀏覽器配置為可從未經身份驗證的源加載腳本。這是由于以HTTPS方式連接網頁但是卻以HTTP方式加載腳本。不同的瀏覽器啟用此設置的方式不同，比如在Chrome瀏覽器中，你可以直接通過點擊地址欄右面的圖標，選擇Load unsafe scripts。IE的話就在工具選項的安全選項卡里面找那個設置。

當你能夠加載腳本之后，你就會看到工作臺加載了出來。將hello world這個web部件添加到畫布，如下圖：

你應該會注意到現在SharePoint工作臺有了Office 365的套件導航欄，即SharePoint Online網站頁面右上角的菜單部分，本地打開的那個工作臺文件是沒有這個的。

選擇畫布上的加號圖標顯示工具箱，工具箱會顯示SharePoint工作臺被承載的網站上可用的web部件，當然還有我們的HelloWorld的web部件。

從工具箱添加HelloWorldWebPart。這樣一來，你的web部件就運行在SharePoint的頁面上了！如下圖，可以看到自定義的屬性已經被添加并顯示在了web部件上。

由于你現在仍然在開發和測試你的web部件，目前沒有必要打包和部署你的web部件到SharePoint上。

下一步

恭喜你現在運行起來了第一個Hello World的web部件。下一講咱們將在這個web部件的基礎上繼續擴展，跟SharePoint進行數據交互。



轉載于:https://www.cnblogs.com/justinliu/p/7703774.html

總結

以上是生活随笔為你收集整理的SharePoint Framework 构建你的第一个web部件（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。