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

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

MSDN 講座

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

December 13, 2012
Tweet

Transcript

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

    Hami+ 個⼈人雲
  2. 假設你們⽤用過 WINDOWS 8 了 ▪不是電腦教室

  3. 開發環境 ▪Visual Studio 2012 ▪Express 免費 ▪ Visual Studio Express

    2012 for Windows 8 ▪Windows 8 ▪Google 搜尋 Windows 8 439 ▪Enterprise 評估版 90 天免費
  4. 先當和開發網站⼀一模⼀一樣 ▪當然不是⼀一模⼀一樣 ▪IE10 ▪和 Chrome Firefox 相似 ▪HTML5 、 CSS3

    、 ECMAScript 5
  5. 空⽩白應⽤用程式 ▪⽅方案總管 ▪default.html 、 default.js 、 default.css ▪本機電腦、模擬器、遠端電腦 ▪偵錯 ->

    視窗 ▪DOM 總管 ▪JavaScript 主控台 ▪ console.log ▪ Google 搜尋 JavaScript Console MSDN
  6. 不⼀一樣 有好有壞 ▪好的 ▪AJAX Cross Domain ▪Native 多 Windows 、

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

  8. WINDOWS 物件 ▪不是 window 物件 ▪Windows Runtime API ▪簡稱 WinRT

    API ▪C# C++ VB JavaScript 共通 ▪不是 Windows RT
  9. WINDOWS 物件 ▪系統底層

  10. ⾃自⼰己寫 WINDOWS RUNTIME COMPONENT ▪C++ C# VB ▪JavaScript 呼叫 ▪Google

    搜尋 Windows Runtime Component
  11. 不⼀一樣 有好有壞 ▪壞的 ▪innerHTML 、 document.write 、 … 安全性限制 ▪不能嵌⼊入外部

    JavaScript ▪不能開新視窗 ▪不能將整個 App 導⾄至外部網⾴頁 ▪沒有 FLASH 、 ActiveX ▪沒有 alert() confirm() prompt()
  12. INNERHTML 、 … 安全性限制 ▪innerHTML ▪outerHTML ▪pasteHTML ▪document.write ▪document.writeln ▪createContextualFragment

    ▪insertAdjacentHTML ▪DOMParser.parseFromString
  13. INNERHTML 、 … 安全性限制 ▪XSS ▪ <a onclick="Windows.Storage.ApplicationData.current.roamingSettings.values['XSS'] = 'demo';"

    > ▪toStaticHTML() ▪Google 搜尋 toStaticHTML msdn store
  14. 不能嵌⼊入外部 JAVASCRIPT ▪CDN ▪廣告

  15. 不能開新視窗 ▪<a target="_blank" > ▪window.open() ▪moveTo() 、 moveBy() 、 resizeTo()

    、 resizeBy() ▪window.close() ▪中⽌止 App ▪ 例外使⽤用 ▪ 不可使⽤用?
  16. 不能將整個 APP 導⾄至外部網⾴頁 ▪<a href="http://bing.com" > ▪跳出 App 、預設瀏覽器開啟

  17. 沒有 FLASH 、 ACTIVEX

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

  19. 我的解決⽅方法 ▪alert() confirm() prompt() 替代⽅方案 ▪MSApp.execUnsafeLocalFunction ▪<iframe> 嵌⼊入外部網⾴頁 ▪Local context

    vs. Web context ▪App 內網⾴頁 Web context 載⼊入
  20. ALERT() 替代⽅方案 ▪var md = new Windows.UI.Popups.MessageDialog('Hi');
 
 md.showAsync().done(function() {


    // ...
 });
  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);
 });
  22. PROMPT() 替代⽅方案 ▪無 100% ▪confirm() 替代⽅方案? ▪Flyout 近似 ▪無 Block

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

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

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

  26. APP 內網⾴頁 WEB CONTEXT 載⼊入 ▪ms-appx-web:/// ▪三條斜線 ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/ ▪

    package.appmanifest ▪ ms-appx:/// 、 ms-appdata:/// 同理 ▪⽤用 postMessage() 溝通 ▪Google 搜尋 postMessage
  27. 實例演練 ▪使⽤用 jQuery ▪jQuery.support ▪使⽤用 Google Maps JavaScript API ▪使⽤用

    YUI ▪Google 搜尋 Windows 8 Learnings ▪ 動態載⼊入 類似 AMD
  28. IE10 ▪ECMAScript 5 ▪CSS3

  29. ECMASCRIPT 5 ▪Strict Mode ▪"use strict"; ▪Google 搜尋 mdn strict

    ▪拿掉 "use strict"; ? ▪Object ▪Google 搜尋 mdn object guide ▪getter setter
  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
  31. WINDOWS LIBRARY FOR JAVASCRIPT ▪純 CSS 、 JavaScript ▪可以看、不能改 ▪JavaScript

    物件 WinJS ▪base.js WinJS ▪ui.js WinJS.UI ▪Google 搜尋 Windows API
  32. CONTROL 控制項 ▪DOM 物件屬性 ▪winControl ▪HTML 元素屬性 ▪data-win-control ▪data-win-options ▪default.js

    ▪WinJS.UI.processAll() ▪Google 搜尋 WinJS controls
  33. PROMISE 物件 ▪CommonJS ▪jQuery Deferred Object ▪與 callback 相⽐比 語意清晰

    ▪⾮非同步
  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() { 
 /* ... */
 });
  35. PROMISE 物件 ▪WinJS.Promise.join([
 WinJS.xhr ({ url: 'a.php' }),
 WinJS.xhr ({

    url: 'b.php' }),
 WinJS.xhr ({ url: 'c.php' })
 ])
 .done(function() {
 /* ... */
 });
  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) { /* ... */ });
  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) { /* ... */ });
  38. SETPROMISE() ▪default.js ▪args.setPromise(
 WinJS.UI.processAll().done(function() { /* ... */ })
 );

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

    progress) {
 setTimeout(function() {
 // …
 complete('DEMO');
 }, 3000);
 }
 );
  40. ⾃自製 PROMISE 物件 ▪WinJS.xhr 原始碼

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

  42. 瀏覽應⽤用程式 ▪default.html ▪<script src="/js/navigator.js" ></script> ▪<div id="contenthost"> ▪home.html

  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);}
  44. OBSERVABLE 物件 ▪ECMAScript 5 Object getter setter ▪WinJS.Binding.as ▪WinJS.Binding.Template ▪WinJS.Binding.List

    ▪WinJS.UI.ListView
  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
  46. 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>
  47. APPLICATION LIFECYCLE ▪default.js ▪oncheckpoint

  48. APPLICATION LIFECYCLE ▪HTML5 ▪localStorage 、 sessionStorage ▪Windows.Storage.ApplicationData.current ▪localSettings 、 roamingSettings

    ▪localFolder 、 roamingFolder 、temporaryFolder ▪WinJS.Application ▪local 、 roaming 、 temp ▪Promise
  49. CHARMS BAR 常⽤用⼯工具列 ▪Search Charm 搜尋快速鍵 ▪Share Charm 分享快速鍵 ▪Settings

    charm 設定快速鍵 ▪App 內 、 App 外
  50. CONTRACT 協定 ▪Google 搜尋 Contract msdn store ▪Search contract 搜尋協定

    ▪Share contract 分享協定 ▪Setting contract 設定協定 ▪…
  51. SEARCH CONTRACT 搜尋協定 ▪格線應⽤用程式 ▪Single-page navigation ▪<script src="/js/data.js"></script> ▪ 範例資料

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

    ▪default.html ▪<script src="/pages/search/search.js"></script>
  53. SEARCH CONTRACT 搜尋協定 ▪search.js ▪_searchData() ▪_generateFilters() ▪search.html ▪data-win-bind="innerHTML: title search.markText"

  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()
  55. SETTINGS CONTRACT 設定協定 ▪Google 搜尋 SettingsFlyout ▪新增資料夾 html ▪新增 html/demo.html

    ▪<div data-win-control="WinJS.UI.SettingsFlyout" data-win- options="{ settingsCommandId :'demo', width :'wide' }" >
  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
  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
  58. BLEND ▪尺⼨寸 ▪翻轉 ▪Snap View

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

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

    ▪Bytecode
  61. WINDOWS 8 CAMP IN A BOX ▪Google 搜尋 Windows 8

    Camp in a box ▪中⽂文版?