Xamarin.Forms AppLink

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

James Tsai 2016/08/25 07:50:25
444

主題

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

文章簡介

開發者辛苦製作的App發布後,當然都希望可以自己的App在使用者的手機上,能夠更快更方便的來使用,甚至可以彼此互相串聯,以解決App的孤島現象。那AppLink就是當前解決App孤島現象不可或缺的手法,就讓本文章的介紹教你如何在Xamarin所做的App當中使用AppLink~

作者

James Tsai

版本/產出日期

V1.0/2016.8.24



1. 前言


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


2. 環境準備


Windows 8/8.1/10

Visual Studio 2015 / Xamarin Studio


3. 本文


AppLinkXamarn.Forms上製作時要處理的面向


Xamarin.FromsApp當中要增加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調整一下既有的建構函式可傳遞一個字串參數的建構函式,並且在此建構函式中將參數的設定值傳給被命名為IdLabelLabel元件



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




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


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

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



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



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



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

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



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



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

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



下圖是用Visual Studioinfo.plist的文字編輯畫面:




結果呈現


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



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




4. 參考來源


Applinks規範文件

http://applinks.org/documentation/



James Tsai