SharePoint Framework 构建你的第一个web部件(三)
本篇接上一講,我們一起來看一下如何部署和測試本地開發的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部件(三)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: php生成文件index.html,Ty
- 下一篇: 如何防止SQL注入