Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Windows 市集應用程式開發實戰 (使用 JavaScript)
Search
Ping-Yen Tsai
December 13, 2012
Technology
0
77
Windows 市集應用程式開發實戰 (使用 JavaScript)
MSDN 講座
Ping-Yen Tsai
December 13, 2012
Tweet
Share
More Decks by Ping-Yen Tsai
See All by Ping-Yen Tsai
「台灣報紙新聞」與「台灣即時新聞」
pingyen
0
120
我的工作經驗 (到目前為止)
pingyen
2
430
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
95
JavaScript Closure
pingyen
1
120
HTML5 Sectioning Elements
pingyen
0
51
次世代搜尋引擎戰爭
pingyen
0
110
進階 JavaScript
pingyen
0
240
jQuery 入門
pingyen
0
64
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
110
Other Decks in Technology
See All in Technology
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
0
240
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
150
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
1k
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
270
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
190
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.9k
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
330
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
1
200
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
850
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
810
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
480
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
51k
Docker and Python
trallard
44
3.4k
Building an army of robots
kneath
306
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Bash Introduction
62gerente
614
210k
Side Projects
sachag
455
42k
BBQ
matthewcrist
89
9.7k
A Tale of Four Properties
chriscoyier
159
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
WINDOWS 市集應⽤用程式開 發實戰 (使⽤用 JAVASCRIPT) 蔡秉諺 Vexed 中華電信 Xuite &
Hami+ 個⼈人雲
假設你們⽤用過 WINDOWS 8 了 ▪不是電腦教室
開發環境 ▪Visual Studio 2012 ▪Express 免費 ▪ Visual Studio Express
2012 for Windows 8 ▪Windows 8 ▪Google 搜尋 Windows 8 439 ▪Enterprise 評估版 90 天免費
先當和開發網站⼀一模⼀一樣 ▪當然不是⼀一模⼀一樣 ▪IE10 ▪和 Chrome Firefox 相似 ▪HTML5 、 CSS3
、 ECMAScript 5
空⽩白應⽤用程式 ▪⽅方案總管 ▪default.html 、 default.js 、 default.css ▪本機電腦、模擬器、遠端電腦 ▪偵錯 ->
視窗 ▪DOM 總管 ▪JavaScript 主控台 ▪ console.log ▪ Google 搜尋 JavaScript Console MSDN
不⼀一樣 有好有壞 ▪好的 ▪AJAX Cross Domain ▪Native 多 Windows 、
MSApp 兩物件
AJAX CROSS DOMAIN ▪App 內檔案也可以 AJAX 載⼊入
WINDOWS 物件 ▪不是 window 物件 ▪Windows Runtime API ▪簡稱 WinRT
API ▪C# C++ VB JavaScript 共通 ▪不是 Windows RT
WINDOWS 物件 ▪系統底層
⾃自⼰己寫 WINDOWS RUNTIME COMPONENT ▪C++ C# VB ▪JavaScript 呼叫 ▪Google
搜尋 Windows Runtime Component
不⼀一樣 有好有壞 ▪壞的 ▪innerHTML 、 document.write 、 … 安全性限制 ▪不能嵌⼊入外部
JavaScript ▪不能開新視窗 ▪不能將整個 App 導⾄至外部網⾴頁 ▪沒有 FLASH 、 ActiveX ▪沒有 alert() confirm() prompt()
INNERHTML 、 … 安全性限制 ▪innerHTML ▪outerHTML ▪pasteHTML ▪document.write ▪document.writeln ▪createContextualFragment
▪insertAdjacentHTML ▪DOMParser.parseFromString
INNERHTML 、 … 安全性限制 ▪XSS ▪ <a onclick="Windows.Storage.ApplicationData.current.roamingSettings.values['XSS'] = 'demo';"
> ▪toStaticHTML() ▪Google 搜尋 toStaticHTML msdn store
不能嵌⼊入外部 JAVASCRIPT ▪CDN ▪廣告
不能開新視窗 ▪<a target="_blank" > ▪window.open() ▪moveTo() 、 moveBy() 、 resizeTo()
、 resizeBy() ▪window.close() ▪中⽌止 App ▪ 例外使⽤用 ▪ 不可使⽤用?
不能將整個 APP 導⾄至外部網⾴頁 ▪<a href="http://bing.com" > ▪跳出 App 、預設瀏覽器開啟
沒有 FLASH 、 ACTIVEX
沒有 ALERT() CONFIRM() PROMPT() ▪Windows.UI.Popups.MessageDialog ▪Flyout
我的解決⽅方法 ▪alert() confirm() prompt() 替代⽅方案 ▪MSApp.execUnsafeLocalFunction ▪<iframe> 嵌⼊入外部網⾴頁 ▪Local context
vs. Web context ▪App 內網⾴頁 Web context 載⼊入
ALERT() 替代⽅方案 ▪var md = new Windows.UI.Popups.MessageDialog('Hi'); md.showAsync().done(function() {
// ... });
CONFIRM() 替代⽅方案 ▪ var md = new Windows.UI.Popups.MessageDialog('Are you OK?');
md.commands.append(new Windows.UI.Popups.UICommand('Yes')); md.commands.append(new Windows.UI.Popups.UICommand('No')); md.showAsync().done(function (cmd) { console.log(cmd.label); });
PROMPT() 替代⽅方案 ▪無 100% ▪confirm() 替代⽅方案? ▪Flyout 近似 ▪無 Block
UI
MSAPP.EXECUNSAFELOCALFUNCTION ▪MSApp.execUnsafeLocalFunction ▪繞過 innerHTML 、 document.write 、 … 安全性限制
<IFRAME> 嵌⼊入外部網⾴頁 ▪Web context ▪無特權 幾無限制 近似瀏覽器環境
LOCAL CONTEXT VS. WEB CONTEXT ▪Google 搜尋 Local Web context
APP 內網⾴頁 WEB CONTEXT 載⼊入 ▪ms-appx-web:/// ▪三條斜線 ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/ ▪
package.appmanifest ▪ ms-appx:/// 、 ms-appdata:/// 同理 ▪⽤用 postMessage() 溝通 ▪Google 搜尋 postMessage
實例演練 ▪使⽤用 jQuery ▪jQuery.support ▪使⽤用 Google Maps JavaScript API ▪使⽤用
YUI ▪Google 搜尋 Windows 8 Learnings ▪ 動態載⼊入 類似 AMD
IE10 ▪ECMAScript 5 ▪CSS3
ECMASCRIPT 5 ▪Strict Mode ▪"use strict"; ▪Google 搜尋 mdn strict
▪拿掉 "use strict"; ? ▪Object ▪Google 搜尋 mdn object guide ▪getter setter
CSS3 ▪Grid Layout ▪display : -ms-grid; -ms-grid-columns : auto 100px
1fr 2fr; -ms-grid-rows : 50px 5em auto; -ms-grid-row : 1; -ms-grid-column : 1; -ms-grid-column-align : end; -ms-grid-row-align : center; -ms-grid-columns : 10px (250px 10px)[3]; ▪Google 搜尋 msdn Grid Layout
WINDOWS LIBRARY FOR JAVASCRIPT ▪純 CSS 、 JavaScript ▪可以看、不能改 ▪JavaScript
物件 WinJS ▪base.js WinJS ▪ui.js WinJS.UI ▪Google 搜尋 Windows API
CONTROL 控制項 ▪DOM 物件屬性 ▪winControl ▪HTML 元素屬性 ▪data-win-control ▪data-win-options ▪default.js
▪WinJS.UI.processAll() ▪Google 搜尋 WinJS controls
PROMISE 物件 ▪CommonJS ▪jQuery Deferred Object ▪與 callback 相⽐比 語意清晰
▪⾮非同步
PROMISE 物件 ▪WinJS.xhr({ url: 'a.php' }) .then(function() { return WinJS.xhr({
url: 'b.php' }); }) .then(function() { return WinJS.xhr({ url: 'c.php' }); }) .done(function() { /* ... */ });
PROMISE 物件 ▪WinJS.Promise.join([ WinJS.xhr ({ url: 'a.php' }), WinJS.xhr ({
url: 'b.php' }), WinJS.xhr ({ url: 'c.php' }) ]) .done(function() { /* ... */ });
PROMISE 物件 ▪ var promise; if(type === 'A') promise
= WinJS.xhr({ url : 'a.php' }).then(function(data){ /* ... */ }); else promise = WinJS.xhr({ url : 'b.php' }).then(function(data) { /* ... */ }); promise.done(function(result) { /* ... */ });
PROMISE 物件 ▪ var promise; if(localStorage.x) promise = WinJS.Promise.as(localStorage.x);
else promise = WinJS.xhr({ url : 'a.php' }).then(function(data) { /* ... */ }); promise.done(function(result) { /* ... */ });
SETPROMISE() ▪default.js ▪args.setPromise( WinJS.UI.processAll().done(function() { /* ... */ }) );
⾃自製 PROMISE 物件 ▪var promise = new WinJS.Promise( function(complete, error,
progress) { setTimeout(function() { // … complete('DEMO'); }, 3000); } );
⾃自製 PROMISE 物件 ▪WinJS.xhr 原始碼
SINGLE-PAGE NAVIGATION ▪微軟建議 App 使⽤用 ▪WinJS.Navigation 、 WinJS.UI.Pages ▪瀏覽應⽤用程式、格線應⽤用程式、分割應⽤用程式
瀏覽應⽤用程式 ▪default.html ▪<script src="/js/navigator.js" ></script> ▪<div id="contenthost"> ▪home.html
瀏覽應⽤用程式 ▪新增資料夾 /pages/page2 ▪新增 ⾴頁⾯面控制項 page2.html ▪home.js 、 page2.js 記得加上
▪ready : function (element, options) { WinJS.Utilities.query("a").listen("click", function(e) { e.preventDefault(); WinJS.Navigation.navigate(e.target.href); }, false);}
OBSERVABLE 物件 ▪ECMAScript 5 Object getter setter ▪WinJS.Binding.as ▪WinJS.Binding.Template ▪WinJS.Binding.List
▪WinJS.UI.ListView
WINJS.BINDING.AS ▪ var target = document.getElementById('target'), a = { x
: 1 }, b = WinJS.Binding.as(a); b.bind('x', function(newVal, oldVal) { target.innerHTML = newVal; }); console.log(target.innerHTML); // 1 b.x = 2; console.log(target.innerHTML); // 2 b.x = 3; console.log(target.innerHTML); // 3
WINJS.BINDING.TEMPLATE ▪ <div id="temp" data-win-control="WinJS.Binding.Template" > <div data-win-bind="style.backgroundColor : color"
> <p data-win-bind="innerHTML : x" ></p> <p data-win-bind="textContent : y" ></p> </div> </div>
APPLICATION LIFECYCLE ▪default.js ▪oncheckpoint
APPLICATION LIFECYCLE ▪HTML5 ▪localStorage 、 sessionStorage ▪Windows.Storage.ApplicationData.current ▪localSettings 、 roamingSettings
▪localFolder 、 roamingFolder 、temporaryFolder ▪WinJS.Application ▪local 、 roaming 、 temp ▪Promise
CHARMS BAR 常⽤用⼯工具列 ▪Search Charm 搜尋快速鍵 ▪Share Charm 分享快速鍵 ▪Settings
charm 設定快速鍵 ▪App 內 、 App 外
CONTRACT 協定 ▪Google 搜尋 Contract msdn store ▪Search contract 搜尋協定
▪Share contract 分享協定 ▪Setting contract 設定協定 ▪…
SEARCH CONTRACT 搜尋協定 ▪格線應⽤用程式 ▪Single-page navigation ▪<script src="/js/data.js"></script> ▪ 範例資料
SEARCH CONTRACT 搜尋協定 ▪新增資料夾 pages/search ▪新增 搜尋協定 search.html ▪package.appxmanifest ▪宣告
▪default.html ▪<script src="/pages/search/search.js"></script>
SEARCH CONTRACT 搜尋協定 ▪search.js ▪_searchData() ▪_generateFilters() ▪search.html ▪data-win-bind="innerHTML: title search.markText"
SHARE CONTRACT 分享協定 ▪Google 搜尋 Quickstart Sharing ▪Source App 來源
App ▪Quickstart: Sharing content 左側下 ▪ text 、 link 、 HTML 、 image 、 file 、 … ▪Target App ⺫⽬目標 App ▪共⽤用⺫⽬目標協定 ▪share.js ▪ args.detail.shareOperation.reportCompleted()
SETTINGS CONTRACT 設定協定 ▪Google 搜尋 SettingsFlyout ▪新增資料夾 html ▪新增 html/demo.html
▪<div data-win-control="WinJS.UI.SettingsFlyout" data-win- options="{ settingsCommandId :'demo', width :'wide' }" >
SETTINGS CONTRACT 設定協定 ▪default.js ▪app.onsettings = function (args) { args.detail.applicationcommands
= { "demo" : { title: "Demo", href: "/html/demo.html" } }; WinJS.UI.SettingsFlyout.populateSettings(args); } ▪Google 搜尋 populateSettings ▪ui.js 搜尋 populateSettings
WINDOWS AZURE MOBILE SERVICE ▪https://manage.windowsazure.com/ ▪Mobile Service ▪Push notifications ▪Google
搜尋 azure push ▪Authentication ▪Microsoft 、 Facebook 、 Twitter 、 Google 帳號認證 ▪Google 搜尋 azure auth mobile
BLEND ▪尺⼨寸 ▪翻轉 ▪Snap View
GUIDELINE ▪Google 搜尋 ux guideline store ▪Google 搜尋 font guideline
store ▪Snap View
專案 -> 市集 ▪Windows App Certification Kit ▪簡稱 WACK ▪BOM
▪Bytecode
WINDOWS 8 CAMP IN A BOX ▪Google 搜尋 Windows 8
Camp in a box ▪中⽂文版?