「分享」(Share Contract) 「搜尋」(Search Contract) 右側工具列 (Charms Bar) 如何儲存使用者個人設定? (Roaming 應用) 取得目前位置 (Geolocation) 使用 WebView 的眉角 取得及處理 JSON 資料 播放音樂或音效 (MediaElement) 選取本地或需端檔案 (FilePicker) 背景執行或下載 (Background Task/Transfer)

1. Windows市集應用程式最佳實踐
蔡孟儒 (Raymond)
技術推廣協理
台灣微軟
http://blogs.msdn.com/mengtsai

2. 主題
• 「分享」(Share Contract)
• 「搜尋」(Search Contract) 妥善利用 Windows 8
• 右側工具列 (Charms Bar) 系統功能
• 如何儲存使用者個人設定? (Roaming 應用)
• 取得目前位置 (Geolocation)
• 使用 WebView 的眉角
• 取得及處理 JSON 資料
• 其他:
– 播放音樂或音效 (MediaElement) 活用 WinRT 元件
– 選取本地或需端檔案 (FilePicker)
– 背景執行或下載 (Background Task/Transfer)
– 動態磚 (Live Tile)
– 銷定畫面資訊 (RTC Apps)

4. Windows Store App 可以「分享」出
去的內容格式包括以下七種:
• 純文字 (Plain Text)
• 格式化文字
• 統一資源識別元 (URI)
• HTML
• 點陣圖 (Bitmap)
• 檔案
• 開發人員定義的資料
你可以任意組合以上的幾種內容來作分享，比如你想分享一段
純文字加上一個URI連結、或是想分享一張圖片；那麼可以接
受這個組合的 Targeted Apps 就會出現在右方，讓使用者作選
擇。

5. 只需要處理一個事件 + 設定一個物件…
• DataTransferManager.DataR
equested 事件
• DataPackage 物件
– 許多的 Set 方法!

6. 實作 Share Contract
• 在你想要提供分享功能的某個頁面(.xaml)，其中的LoadState()方法，
加入OnDataRequested 事件 event handler:
• 再實作這個 OnDataRequested() 方法- 把資料塞進DataPackaget 物件

11. Search Contract 實作 (一)
• 在專案中新增一個「搜尋合約」的新項目，預設會產生一個新頁面
(SearchResultsPage1.xaml)，拉入你想呈現的UI控制項:

12. Search Contract 實作 (一)
• 實作新頁面Filter_SelectionChanged() 方法:

14. Search Contract 實作 (二)
• 更常見的搜尋，是讓使用者能直接搜尋此 App 的內容
(context)
1. 在欲提供搜尋功能的頁面中加入QuerySubmitted() event hander
2. 再實作此 QuerySubmitted() 方法即可

15. Search Contract 實作 (二)
• 以 Blog Reader App 為例，我想在二個不同的頁面實作搜尋:

19. 最常見的退件原因- 隱私權宣告
• 4.1.1 如果您的應用程式具備網路通訊功能，則必須包含隱私權聲明
– 簡單來說，只要您的App內有宣告使用網際網路(Internet)、網路攝影機
(WebCam)或個人文件庫(Documents Library)，就必預提供隱私權聲明
– 而您若是以Visual Studio 2012的範本來開發的話，請注意使用網際網路的
宣告預設是打開的喔!

20. 實作: 在Charms Bar 「設定」中加入
隱私權條款的連結
• 在App.xaml.cs 中加入SettingsPane.OnCommandsRequested() event
handler，並實作此方法即可

25. var localSettings =
Windows.Storage.ApplicationData.Current.LocalSettings;
localSettings.Values["currentPage"] = MyBook.CurrentPage;
var roamingSettings =
Windows.Storage.ApplicationData.Current.RoamingSettings;
roamingSettings.Values["currentPage"] = MyBook.CurrentPage;

28. 如何取得所在位置經緯度?
• 只需要 GetGeopositionAsync() 取得位置，再以Coordinate.Latitude/Longtitude
取得緯度及經度。
• 由於這個方法是一個 Async call，所以你需要在呼叫這個方法的函式之前加
上 async 的宣告，否則會發生編譯錯誤

29. 咦? Compile error?
WinRT 資訊: The required device capability has not been declared in the manifest.
其他資訊: 存取被拒。 (發生例外狀況於 HRESULT: 0x80070005 (E_ACCESSDENIED))

30. Manifest 宣告
• 請記得於.manifest中勾選位置(Location)的設定

31. 請記得處理無GPS服務或未開啟的情
形
• 否則會被退件…

34. Ten Things You Need to Know About WebView
By Matt Small
1. WebView is not a general-purpose browser
– WebView 這個控制項的目的，是讓你能在 App 裡，連結到
某特定的網頁，以達到此 App 所欲提供的功能；而非讓使用
者能任意瀏覽任何網頁。
– 舉例來說，如果有些特定資訊可能會時常變動 (如即時路況
等)，與其重新上架你的 App，將這資訊放在 WebView 當然
比較適當；
– 但如果你的 App 只是純粹作為一個入口，僅是讓使用者透過
WebView 瀏覽到某個網站首頁，再讓使用者在網站中任意點
選連結的話，是非常有可能在上架審查中被退件的。
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx

35. Ten Things You Need to Know About WebView
By Matt Small
3. WebView doesn’t do Flash. Or Silverlight. Or PDF. Or any
other ActiveX control or plugin.
– 如第1點，WebView 並非被設計成為一個完整的瀏覽器，也為了穩
定性及效能的原因並不支援 Flash, Silverlight, PDF or ActiveX，「目
前」亦不支援某些 HTML5 的功能，如 AppCache, IndexedDB,
programmatic access to the Clipboard, or geolocation.
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx

36. Ten Things You Need to Know About WebView
By Matt Small
4. How to invoke Javascript inside the displayed webpage of a
Webview
– 簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你
的 App 專案中的 HTML 檔案，甚至執行其中的 JavaScript 副程式。
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx

38. 以台北市政府公開資料平台為例

39. 取得JSON資料
• 同時發現此JSON為一含多個物件 (objects) 之陣列 (arrays)
"[{"name":"?陽百貨事業股份有限公司松山運動中心分公司","certification_category":"游泳場所業
","tel":"66176789","traffic_info":null,"display_addr":"敦化北路1號","poi_addr":"台北市敦化北路1號
","X":"121.55009632378471","Y":"25.04896725734926"},{"name":"臺北市大同運動中心 游泳館
","certification_category":"游泳場所業","tel":"25920055","traffic_info":null,"display_addr":"大龍街51號","poi_addr":"
台北市大龍街51號","X":"121.5160557692793","Y":"25.064827690815896"},{"name":"博嘉運動公園
","certification_category":"游泳場所業","tel":"22395494","traffic_info":null,"display_addr":"木柵路4段159巷16號
","poi_addr":"台北市木柵路四段159巷16號","X":"121.5755454950648","Y":"25.001056913828617"},{"name":"洲美運
動公園游泳館","certification_category":"游泳場所業","tel":"28340998","traffic_info":null,"display_addr":"洲美街271號

40. Parsing JSON
– 使用Windows.Data.Json
http://msdn.microsoft.com/zh-
tw/library/windows/apps/xaml/hh770289.aspx

42. http://json2csharp.com
- 將JSON obejcts 轉為C# objects 的小工具

50. 小結 宣告合適的event handler, 再實作
其事件處理方法
存取 user-specific 資料;
• 「分享」(Share Contract) 可結合Microsoft ID 跨裝置同步
• 「搜尋」(Search Contract) 妥善利用 Windows 8
• 右側工具列 (Charms Bar) 系統功能
• 如何儲存使用者個人設定? (Roaming 應用)
• 取得目前位置 (Geolocation) 注意 Manifest 宣告, async/await 及例外處理
• 使用 WebView 的眉角
非完整瀏覽器
• 取得及處理 JSON 資料
• 其他: Json.Net or
– 播放音樂或音效 (MediaElement) Windows.Data.Json 活用 WinRT 元件
– 選取本地或需端檔案 (FilePicker)
– 背景執行或下載 (Background Task/Transfer)
– 動態磚 (Live Tile)
– 銷定畫面資訊 (RTC Apps)

51. 而是創意
再加上永遠可以更好的使用者經驗 (UX)

52. Reference
• MSDN Windows 8 開發總站 (sample code, 文
件, Apps 上架, etc.):
– http://dev.windows.com
• 部落格 (中文, sample code, 上架眉角, etc.)
– http://blogs.msdn.com/mengtsai

53. APPENDIX

54. Windows Store Apps 現況
• Windows 8 到底賣的好不好?
• Windows Store 上有多少 Apps?
• 有排名嗎? Distimo.com, MetroScan, MSN, etc.
• Windows Store 上架秘訣?