Learn from the Expert

Universal Windows Apps 開發運用 HTML 及 JavaScript

陳葵懋 Ian Chen

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

Target Audience

• 具 HTML 、 CSS 、 JavaScript 基本認識• 想知道 HTML 、 CSS 、 JavaScript 如何開發 Windows Platform

APP

Agenda

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

開發環境• 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

Universal Apps

• 建立 Windows 和 Windows Phone 通用的 Windows Platform

App

• 共用程式碼 (JavaScript)

• 開發階段專案共用，發行時 Package 獨立上架

• APP 內購買通用 ( 使用者只須付費一次 )

Universal Apps

Universal Apps

• JavaScript 盡可能共用• 商業邏輯是盡可能共用，讓 Phone/Windows 專案共享一份

• HTML + CSS 多數情況下是分開• Phone / Windows 尺吋不同，使用情境不同

App Lifecycle

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

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

WinJS

Demo

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

Code Sample

• https://code.msdn.microsoft.com/

參考資源• http://goo.gl/n2q8pU

• http://try.buildwinjs.com/#play

• http://goo.gl/KWrAqv

• http://goo.gl/qMnsgU

• CodeShow App