在Xamarin 的App開發時，如何加入AppLink以解決App的孤島問題提升App使用率…Xamarin.Forms篇

1. 前言

• AppLink是當前App解決孤島現象的重要手法，那在Xamarin.Forms所製作的App使用AppLink時，如何處理的跨平台的問題呢?就讓本文章的介紹教你解決吧~

2. 環境準備

• Windows 8/8.1/10

• Visual Studio 2015 / Xamarin Studio

3. 本文

在AppLink在Xamarn.Forms上製作時要處理的面向

• 在Xamarin.Froms的App當中要增加AppLink的時，大致上分成兩個面向要處理。

一、Xamarin.Froms本身的處理問題。

• Xamarin.Forms本身的處理問題比較偏向介面呈現的效果以及會使用到Xamarin.Forms上的MessagingCenter特有技術，以便處理接收各平台傳入的資訊。

二、各個平台處理AppLink的技術結合。

• 在此篇之前昕力大學的文章中已經有介紹過iOS 跟Android 的AppLink該如何處理，有需要的朋友可前往觀賞與了解。

Xamarin.Froms本身的處理問題

• 這篇是Xamarin.Forms篇，所以我們先建立一個Xamarin.Forms全新的範本專案。(在此使用的Xamarin.Forms專案是已經調整成.NET Standard Library架構的Xamarin.Forms專案，若用舊有的PCL架構專案也可順利完成。)

• 在此建立好的專案當中，我們在Xamarin.Forms的專案當中新增兩個獨立的XAML Page，一個叫做MainPage.xaml另一個叫做ProductPage.xaml，並且讓MainPage.xaml成為此App的啟動頁面。(xaml檔的在Visual Studio上出現的錯誤訊息，是因為改成.NET Standard Library的關係。)

• 接著在ProductPage.xaml當中增加兩個Label，調整的XAML如下紅色框中的部分，綠色框的部分則是為了符合iOS的顯示而增加的。而其中的一個Label將它命名為IdLabel:

• 接著打開ProductPage.xaml.cs，調整一下既有的建構函式可傳遞一個字串參數的建構函式，並且在此建構函式中將參數的設定值傳給被命名為IdLabel的Label元件。

• 再打開MainPage.xaml.cs，並增加如下圖紅色框中的程式碼。此些程式的用意是在Xamarin.Forms的MessagingCenter當中註冊”ProductId”這個Message的聆聽，並且在MainPage結束時註銷這個Message的聆聽。透過MessagingCenter有聆聽到ProductId的訊息時，就可以啟動ProductPage這個頁面。

各個平台處理AppLink的技術結合

• 接著我們開始處理各平台的AppLink的技術結合部分，大致上處理的方式跟之前介紹處理Android或iOS的 AppLink的手法差不多，只是我們啟動頁面的方式要轉換一下，不再像之前一樣直接啟動各平台當中的處理頁面，而是要透過MessageCenter去通知Xamarin.Froms當中的MainPage所註冊的ProductId訊息聆聽，讓它去啟動ProductPage。

• 首先來處理Android的平台，打開MainAcitvity.cs加入一些之前AppLink弄過的程式碼。

• 接著在此設立了一個型態為App的私有欄位，並且調整了一下既有的OnCreate方法程式碼。

• 再來複寫了Activity當中的OnStart方法，並且增加下圖當中紅色框內的程式碼。



用複寫OnStart的方法來分析Url並且可能要執行MessagineCenter.Send的動作，其原因是因為無論此App是否有在手機背景執行，按照Android Activity的Lifecycle觀念來說只要此Activity執行，此OnStart方法都會執行，這確實頗符合我們需要的情境。

• 接著來處理iOS平台，打開AppDelegate.cs，一樣增加一個型態為App的私有欄位並且調整以下程式碼。

• 後續要做的事情就是跟之前寫iOS的AppLink方式很類似。複寫OpenUrl方法，並且在此方法中判斷Url需不需要呼叫Product的呈現頁面，如紅色框所示。跟之前不一樣的地方大概只有差在當確定id資訊時換呼叫MessagineCenter.Send去轉換頁面。

• iOS專案別忘記要去設定Info.plist的資訊。

下圖是用Mac上的Xamarin Studio設定畫面:



下圖是用Visual Studio改info.plist的文字編輯畫面:

結果呈現

Android平台(僅用瀏覽器的連結開啟作效果展示):

iOS平台(僅用瀏覽器的連結開啟作效果展示):

4. 參考來源

• Applinks規範文件

http://applinks.org/documentation/