Windows 市集應用程式開發實戰 (使用 JavaScript)

MSDN 講座

Transcript

1. WINDOWS 市集應⽤用程式開
   發實戰 (使⽤用 JAVASCRIPT)
   蔡秉諺 Vexed
   中華電信 Xuite & Hami+ 個⼈人雲
   

   View Slide

2. 假設你們⽤用過 WINDOWS 8 了
   ▪不是電腦教室
   

   View Slide

3. 開發環境
   ▪Visual Studio 2012
   ▪Express 免費
   ▪ Visual Studio Express 2012 for Windows 8
   ▪Windows 8
   ▪Google 搜尋 Windows 8 439
   ▪Enterprise 評估版 90 天免費
   

   View Slide

4. 先當和開發網站⼀一模⼀一樣
   ▪當然不是⼀一模⼀一樣
   ▪IE10
   ▪和 Chrome Firefox 相似
   ▪HTML5 、 CSS3 、 ECMAScript 5
   

   View Slide

5. 空⽩白應⽤用程式
   ▪⽅方案總管
   ▪default.html 、 default.js 、 default.css
   ▪本機電腦、模擬器、遠端電腦
   ▪偵錯 -> 視窗
   ▪DOM 總管
   ▪JavaScript 主控台
   ▪ console.log
   ▪ Google 搜尋 JavaScript Console MSDN
   

   View Slide

6. 不⼀一樣 有好有壞
   ▪好的
   ▪AJAX Cross Domain
   ▪Native 多 Windows 、 MSApp 兩物件
   

   View Slide

7. AJAX CROSS DOMAIN
   ▪App 內檔案也可以 AJAX 載⼊入
   

   View Slide

8. WINDOWS 物件
   ▪不是 window 物件
   ▪Windows Runtime API
   ▪簡稱 WinRT API
   ▪C# C++ VB JavaScript 共通
   ▪不是 Windows RT
   

   View Slide

9. WINDOWS 物件
   ▪系統底層
   

   View Slide

10. ⾃自⼰己寫 WINDOWS RUNTIME COMPONENT
    ▪C++ C# VB
    ▪JavaScript 呼叫
    ▪Google 搜尋 Windows Runtime Component
    

    View Slide

11. 不⼀一樣 有好有壞
    ▪壞的
    ▪innerHTML 、 document.write 、 … 安全性限制
    ▪不能嵌⼊入外部 JavaScript
    ▪不能開新視窗
    ▪不能將整個 App 導⾄至外部網⾴頁
    ▪沒有 FLASH 、 ActiveX
    ▪沒有 alert() confirm() prompt()
    

    View Slide

12. INNERHTML 、 … 安全性限制
    ▪innerHTML
    ▪outerHTML
    ▪pasteHTML
    ▪document.write
    ▪document.writeln
    ▪createContextualFragment
    ▪insertAdjacentHTML
    ▪DOMParser.parseFromString
    

    View Slide

13. INNERHTML 、 … 安全性限制
    ▪XSS
    ▪
    ▪toStaticHTML()
    ▪Google 搜尋 toStaticHTML msdn store
    

    View Slide

14. 不能嵌⼊入外部 JAVASCRIPT
    ▪CDN
    ▪廣告
    

    View Slide

15. 不能開新視窗
    ▪
    ▪window.open()
    ▪moveTo() 、 moveBy() 、 resizeTo() 、 resizeBy()
    ▪window.close()
    ▪中⽌止 App
    ▪ 例外使⽤用
    ▪ 不可使⽤用？
    

    View Slide

16. 不能將整個 APP 導⾄至外部網⾴頁
    ▪
    ▪跳出 App 、預設瀏覽器開啟
    

    View Slide

17. 沒有 FLASH 、 ACTIVEX
    

    View Slide

18. 沒有 ALERT() CONFIRM() PROMPT()
    ▪Windows.UI.Popups.MessageDialog
    ▪Flyout
    

    View Slide

19. 我的解決⽅方法
    ▪alert() confirm() prompt() 替代⽅方案
    ▪MSApp.execUnsafeLocalFunction
    ▪ 嵌⼊入外部網⾴頁
    ▪Local context vs. Web context
    ▪App 內網⾴頁 Web context 載⼊入
    

    View Slide

20. ALERT() 替代⽅方案
    ▪var md = new Windows.UI.Popups.MessageDialog('Hi');

    

    md.showAsync().done(function() {

    // ...

    });
    

    View Slide

21. 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);

    });
    

    View Slide

22. PROMPT() 替代⽅方案
    ▪無 100%
    ▪confirm() 替代⽅方案？
    ▪Flyout 近似
    ▪無 Block UI
    

    View Slide

23. MSAPP.EXECUNSAFELOCALFUNCTION
    ▪MSApp.execUnsafeLocalFunction
    ▪繞過 innerHTML 、 document.write 、 … 安全性限制
    

    View Slide

24. 嵌⼊入外部網⾴頁
    ▪Web context
    ▪無特權 幾無限制 近似瀏覽器環境
    

    View Slide

25. LOCAL CONTEXT VS. WEB CONTEXT
    ▪Google 搜尋 Local Web context
    

    View Slide

26. APP 內網⾴頁 WEB CONTEXT 載⼊入
    ▪ms-appx-web:///
    ▪三條斜線
    ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/
    ▪ package.appmanifest
    ▪ ms-appx:/// 、 ms-appdata:/// 同理
    ▪⽤用 postMessage() 溝通
    ▪Google 搜尋 postMessage
    

    View Slide

27. 實例演練
    ▪使⽤用 jQuery
    ▪jQuery.support
    ▪使⽤用 Google Maps JavaScript API
    ▪使⽤用 YUI
    ▪Google 搜尋 Windows 8 Learnings
    ▪ 動態載⼊入 類似 AMD
    

    View Slide

28. IE10
    ▪ECMAScript 5
    ▪CSS3
    

    View Slide

29. ECMASCRIPT 5
    ▪Strict Mode
    ▪"use strict";
    ▪Google 搜尋 mdn strict
    ▪拿掉 "use strict"; ？
    ▪Object
    ▪Google 搜尋 mdn object guide
    ▪getter setter
    

    View Slide

30. 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
    

    View Slide

31. WINDOWS LIBRARY FOR JAVASCRIPT
    ▪純 CSS 、 JavaScript
    ▪可以看、不能改
    ▪JavaScript 物件 WinJS
    ▪base.js WinJS
    ▪ui.js WinJS.UI
    ▪Google 搜尋 Windows API
    

    View Slide

32. CONTROL 控制項
    ▪DOM 物件屬性
    ▪winControl
    ▪HTML 元素屬性
    ▪data-win-control
    ▪data-win-options
    ▪default.js
    ▪WinJS.UI.processAll()
    ▪Google 搜尋 WinJS controls
    

    View Slide

33. PROMISE 物件
    ▪CommonJS
    ▪jQuery Deferred Object
    ▪與 callback 相⽐比 語意清晰
    ▪⾮非同步
    

    View Slide

34. PROMISE 物件
    ▪WinJS.xhr({ url: 'a.php' })

    .then(function() {

    return WinJS.xhr({ url: 'b.php' });

    })

    .then(function() { 

    return WinJS.xhr({ url: 'c.php' });

    })

    .done(function() { 

    /* ... */

    });
    

    View Slide

35. PROMISE 物件
    ▪WinJS.Promise.join([

    WinJS.xhr ({ url: 'a.php' }),

    WinJS.xhr ({ url: 'b.php' }),

    WinJS.xhr ({ url: 'c.php' })

    ])

    .done(function() {

    /* ... */

    });
    

    View Slide

36. 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) { /* ... */ });
    

    View Slide

37. 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) { /* ... */ });
    

    View Slide

38. SETPROMISE()
    ▪default.js
    ▪args.setPromise(

    WinJS.UI.processAll().done(function() { /* ... */ })

    );
    

    View Slide

39. ⾃自製 PROMISE 物件
    ▪var promise = new WinJS.Promise(

    function(complete, error, progress) {

    setTimeout(function() {

    // …

    complete('DEMO');

    }, 3000);

    }

    );
    

    View Slide

40. ⾃自製 PROMISE 物件
    ▪WinJS.xhr 原始碼
    

    View Slide

41. SINGLE-PAGE NAVIGATION
    ▪微軟建議 App 使⽤用
    ▪WinJS.Navigation 、 WinJS.UI.Pages
    ▪瀏覽應⽤用程式、格線應⽤用程式、分割應⽤用程式
    

    View Slide

42. 瀏覽應⽤用程式
    ▪default.html
    ▪
    ▪
    ▪home.html
    

    View Slide

43. 瀏覽應⽤用程式
    ▪新增資料夾 /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);}
    

    View Slide

44. OBSERVABLE 物件
    ▪ECMAScript 5 Object getter setter
    ▪WinJS.Binding.as
    ▪WinJS.Binding.Template
    ▪WinJS.Binding.List
    ▪WinJS.UI.ListView
    

    View Slide

45. 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
    

    View Slide

46. WINJS.BINDING.TEMPLATE
    ▪ 

    

    

    

    

    
    

    View Slide

47. APPLICATION LIFECYCLE
    ▪default.js
    ▪oncheckpoint
    

    View Slide

48. APPLICATION LIFECYCLE
    ▪HTML5
    ▪localStorage 、 sessionStorage
    ▪Windows.Storage.ApplicationData.current
    ▪localSettings 、 roamingSettings
    ▪localFolder 、 roamingFolder 、temporaryFolder
    ▪WinJS.Application
    ▪local 、 roaming 、 temp
    ▪Promise
    

    View Slide

49. CHARMS BAR 常⽤用⼯工具列
    ▪Search Charm 搜尋快速鍵
    ▪Share Charm 分享快速鍵
    ▪Settings charm 設定快速鍵
    ▪App 內 、 App 外
    

    View Slide

50. CONTRACT 協定
    ▪Google 搜尋 Contract msdn store
    ▪Search contract 搜尋協定
    ▪Share contract 分享協定
    ▪Setting contract 設定協定
    ▪…
    

    View Slide

51. SEARCH CONTRACT 搜尋協定
    ▪格線應⽤用程式
    ▪Single-page navigation
    ▪
    ▪ 範例資料
    

    View Slide

52. SEARCH CONTRACT 搜尋協定
    ▪新增資料夾 pages/search
    ▪新增 搜尋協定 search.html
    ▪package.appxmanifest
    ▪宣告
    ▪default.html
    ▪
    

    View Slide

53. SEARCH CONTRACT 搜尋協定
    ▪search.js
    ▪_searchData()
    ▪_generateFilters()
    ▪search.html
    ▪data-win-bind="innerHTML: title search.markText"
    

    View Slide

54. 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()
    

    View Slide

55. SETTINGS CONTRACT 設定協定
    ▪Google 搜尋 SettingsFlyout
    ▪新增資料夾 html
    ▪新增 html/demo.html
    ▪options="{ settingsCommandId :'demo', width :'wide' }" >
    

    View Slide

56. 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
    

    View Slide

57. WINDOWS AZURE MOBILE SERVICE
    ▪https://manage.windowsazure.com/
    ▪Mobile Service
    ▪Push notifications
    ▪Google 搜尋 azure push
    ▪Authentication
    ▪Microsoft 、 Facebook 、 Twitter 、 Google 帳號認證
    ▪Google 搜尋 azure auth mobile
    

    View Slide

58. BLEND
    ▪尺⼨寸
    ▪翻轉
    ▪Snap View
    

    View Slide

59. GUIDELINE
    ▪Google 搜尋 ux guideline store
    ▪Google 搜尋 font guideline store
    ▪Snap View
    

    View Slide

60. 專案 -> 市集
    ▪Windows App Certification Kit
    ▪簡稱 WACK
    ▪BOM
    ▪Bytecode
    

    View Slide

61. WINDOWS 8 CAMP IN A BOX
    ▪Google 搜尋 Windows 8 Camp in a box
    ▪中⽂文版？
    

    View Slide