Xamarin+Prism小試牛刀：定制跨平台Outlook郵箱應用

通過本文你將學會如下內容：

1，如何使用Xamarin開發跨平台（Windows，Android，iOS）應用。

2，如何使用微軟的登錄界面登入Microsoft賬號。

3，如何使用Outlook郵箱API。

4，了解MVVM思想。

5，了解Prism框架。

原代碼地址：https://github.com/NewBLife/MyOutlook

Xamarin概述

Xamarin由開源項目Mono發展而來，是一套跨平台的移動開發工具，開發人員可以使用 C# 為iOS，Android， Mac以及Windows開發原生應用，比Hybrid App性能更好。基本思想就是將與平台無關的邏輯代碼使用C# Portable Class Libraries類庫實現，與平台相關部分單獨實現。2015年被微軟收購，現在Visual Studio全面支持Xamarin開發並且免費。

Xamarin.Forms 是由Xamarin提供的一個創建跨平台用戶界面的開源庫，通過Xamarin.Forms 可以一次編碼生成基於各個移動平台（iOS, Android, Windows Phone）的應用界面。

Prism概述

Prism是8年前由微軟創建的一套快速開發WPF的開源MVVM框架，目前已經移植到Github全面支持Xamarin跨平台開發。包含畫面跳轉，對話框，依賴注入等等很多功能，大幅度簡化開發。MVVM思想也是微軟發布WPF時提出來的一套全新思想：通過將UI設計與UI交互分離，使得界面的自動化測試成為可能。

 

Microsoft賬號登錄

Xamarin跨平台Microsoft賬號認證可以使用微軟開源類庫Microsoft Authentication Library (MSAL)實現如下登錄界面：

在使用前需要前往Microsoft個人應用中心（https://apps.dev.microsoft.com）進行注冊獲取ApplicationID。

 

OutLook API

使用微軟公布的 Microsoft Graph API可以訪問多個 Microsoft 雲服務中的數據，包括 Azure Active Directory、作為 Office 365 一部分的 Exchange Online、SharePoint、OneDrive、OneNote 和 Planner。

本次主要使用：https://graph.microsoft.com/v1.0/me/messages 列出個人郵件。

 

最終效果圖

跟隨本文最后將做出如下APP應用：

Hands-ON

1，下載添加Prism Template Pack模板

2，從Prism模板創建Xamarin.Froms項目

選擇iOS，Android，UWP平台

 

3，為每個工程添加Microsoft.Identity.Client包

提醒：

【無法安裝程序包“Microsoft.Identity.Client 1.0.304142221-alpha”。你正在嘗試將此程序包安裝到目標為“.NETPortable,Version=v4.5,Profile=Profile111”的項目中，但該程序包不包含任何與該框架兼容的程序集引用或內容文件。有關詳細信息，請聯系程序包作者。】

以上錯誤解決辦法：MyOutlook.csproj文件中的Profile111改成Profile7。

4，添加Microsoft登錄認證

Microsoft.Identity.Client默認將RefreshToken保存在本地文件中，下次認證時自動從文件讀取判斷。

public class AuthUtility
    {
        /// <summary>
        /// 用戶認證
        /// </summary>
        /// <returns></returns>
        public static async Task<bool> AuthAsync()
        {
            try
            {
                // 已經認證的時候直接獲取認證信息
                App.Authentication = await App.PCA.AcquireTokenSilentAsync(Constants.Scopes);
                return true;
            }
            catch
            {
                try
                {
                    // 沒有認證的時候重新認證
                    App.Authentication = await App.PCA.AcquireTokenAsync(Constants.Scopes);
                    return true;
                }
                catch
                {
                    // 認證失敗
                    return false;
                }
            }
        }
    }

調用這個方法時將自動出現如下登錄界面：

如果輸入個人郵箱地址將自動跳轉到如下登錄界面：

認證成功后將獲得Token信息

5，添加退出邏輯

只需要執行如下代碼即可清除認證信息

App.Authentication.User.SignOut();

6，添加讀取郵件信息邏輯

有了Token直接調用接口就能獲得我們需要的全部信息，本次只讀取郵件信息（https://graph.microsoft.com/v1.0/me/messages）。

public class EmailUtility
    {
        private static JsonSerializer serializer = new JsonSerializer()
        {
            MissingMemberHandling = MissingMemberHandling.Ignore,
            NullValueHandling = NullValueHandling.Ignore,
            ReferenceLoopHandling = ReferenceLoopHandling.Serialize
        };
        /// <summary>
        /// 執行API
        /// </summary>
        /// <param name="url">API地址</param>
        /// <param name="method">請求方式</param>
        /// <returns>請求結果</returns>
        private static async Task<byte[]> ExcuteApi(string url, HttpMethod method)
        {
            var httpclient = new HttpClient();

            using (var request = new HttpRequestMessage(method, url))
            {
                request.Headers.Authorization = new AuthenticationHeaderValue(App.Authentication.TokenType, App.Authentication.Token);

                using (var response = await httpclient.SendAsync(request).ConfigureAwait(false))
                {
                    if (response.IsSuccessStatusCode)
                    {
                        return await response.Content.ReadAsByteArrayAsync().ConfigureAwait(false);
                    }
                }
            }
            return null;
        }

        /// <summary>
        /// 郵件一覽取得
        /// </summary>
        /// <returns>郵件一覽</returns>
        public static async Task<List<Message>> GetListAsync()
        {
            var listData = await ExcuteApi(Constants.MESSAGES_LIST, HttpMethod.Get);
            if (listData?.Length > 0)
            {
                var listObject = JObject.Parse(System.Text.Encoding.UTF8.GetString(listData, 0, listData.Length));
                var list = new List<Message>();

                foreach (var item in listObject["value"])
                {
                    list.Add(item.ToObject<Message>(serializer));
                }
                return list;
            }
            else
            {
                return null;
            }
        }
    }

Http請求取得的數據經Json轉換成自己需要的形式（Message）顯示如下：

一覽畫面

詳細畫面（郵件詳細為Html文件內容，只需要用WebView顯示就可以）

本次就簡單實現郵件取得和顯示，后續有時間在慢慢添加。個人電腦性能有限ios模擬器沒辦法跑起來，本次就先演示UWP了。

總結

Xamarin開發跨平台應用門檻越來越低，唯獨UI設計比較麻煩，每個平台顯示多少還是有區別。看完本文希望大家對Xamarin開發充滿信心，本人在日本微軟合作公司，目前日本這邊推廣的很火，很多開發交流會。