本文档介绍了如何利用 HTML 和 JavaScript 开发通用 Windows 应用，主要面向具有基本 HTML、CSS 和 JavaScript 知识的开发者。内容包括开发环境、通用应用的概念、以及 WinJS 的概述与示例。文档还提供了相关的参考资源链接。

1. Learn from the Expert
Universal Windows Apps 開發
運用 HTML 及 JavaScript
陳葵懋 Ian Chen

2. About me
• Microsoft MVP (ASP.NET)
• TechDays 2014 講師
• MVP 2015 微軟實戰課程日 講師
• html5 & javascript程式開發實戰書籍共同作者
• K.NET 社群 www.facebook.com/knet.io
• Study4.TW 社群 www.facebook.com/Study4.tw
• www.dotblogs.com.tw/ian
• Ian.msmvp@outlook.com

3. Target Audience
• 具HTML、CSS、JavaScript 基本認識
• 想知道HTML 、CSS、JavaScript如何開發Windows Platform APP

4. Agenda
• 開發環境
• Universal Apps 簡介
• WinJS 介紹
• Demo 實際動手開發

5. 開發環境
• Windows 8 or 8.1 (windows 10)
• Visual Studio 2013 (visual studio 2013 community)
• Hyper-V
https://www.visualstudio.com/en-
us/products/visual-studio-community-
vs.aspx

6. Universal Apps
• 建立 Windows 和 Windows Phone 通用的Windows Platform App
• 共用程式碼 (JavaScript)
• 開發階段專案共用，發行時Package獨立上架
• APP 內購買通用(使用者只須付費一次)

7. Universal Apps

8. Universal Apps
• JavaScript 盡可能共用
• 商業邏輯是盡可能共用，讓Phone/Windows專案共享一份
• HTML + CSS 多數情況下是分開
• Phone / Windows 尺吋不同，使用情境不同

9. App Lifecycle
• 啟動執行、暫停、恢復執行，形行一個循環
• 當系統資源不足時，主動終止背景暫停的App
• Activated ：http://goo.gl/ckjLg8
• Checkpoint ：http://goo.gl/ImsxZp
• Resuming：http://goo.gl/uy2hrn

10. WinJS
• Microsoft 針對JavaScript開發人員所提供的一組JavaScript
Library
• Windows Runtime的支援得以存取Windows底層
• App UI 控制項 http://try.buildwinjs.com/
• 搭配 HTML5 + CSS + WinJS 可以開發
Windows Store App、Windows Phone App
• 開源 https://github.com/winjs/winjs

11. WinJS

12. Demo
• RSS Reader App
• 專案結構
• 取得遠端資料
• 資料繫結綁定

13. Code Sample
• https://code.msdn.microsoft.com/

14. 參考資源
http://goo.gl/n2q8pU
http://try.buildwinjs.com/#play
http://goo.gl/KWrAqv
http://goo.gl/qMnsgU