今天這篇要來寫關於「從外部瀏覽器跳轉APP」的功能實作
這個需求呢..其實也是在工作上遇到的
大致上來說就是客戶那邊有寫一個網頁，然後對方希望在手機端點擊後如果有安裝APP的情況下會跳轉APP
沒有APP的話就會跳轉到該APP的Google Play下載頁面...的這樣一個功能
恩...這功能乍聽之下還算簡單，就是從網頁跳轉APP麻。相關功能我看過
而就實際面來說，論及「從網頁跳到APP」這個功能含找資料我也花不到半小時就實裝完成了
但問題是接下來這句
「沒有APP的話就會跳轉到該APP的Google Play下載頁面」
身為一個在工作上不積極不努力不做死的原則，我跟主管說
「蛤？這個判斷要交給他們網頁的人去想辦法ㄅ」
然後主管就回我
「淦，他們的也不會啊」
...好啦這個行為不要學，我跟主管是有一定交情基礎的，他也知道我在講幹話但其實我很認真想推責任ww
於是這🐦差事就還是打到我頭上來了QQ
好吧廢話到此為止，接下來來先看一下功能吧
實作影片中因為時間長度的緣故我沒有將「沒裝APP」時的狀況給錄進去，不過在我的Code中沒裝APP時的跳轉是有實裝的喔！
最後是Github
->https://github.com/thumbb13555/AndroidBlogExamples/tree/main/OpenAppFromWebExample
Web的內容雖然也有包含在內，不過怕你找不到XD
->https://github.com/thumbb13555/AndroidBlogExamples/tree/main/OpenAppFromWebExample/Web
那開始吧！
1. 確認功能
首先看一下這個組圖
大致上跟據多方調查，目前在業界上大部分的相關功能都會是這樣遷移的
由於在JavaScript是無法去偵測Android內所有的APP的安裝情況，因此為了不對原先的頁面造成影響，所以通常都會再開一個頁面去做遷移判斷
OK，確認好遷移邏輯後我們就進入到實作
2. Android端實作
首先我們先從簡單的部分先實作
然而還挺意外的是....這次的難點居然不是在Android(笑
所以我就直接寫重點出來吧
在Android這邊的設置中，Android要決定的事情就是「連結」
什麼意思？其實是這樣的
在這個外部呼叫APP的實作中，其實本質上他開啟APP的邏輯就是使用URL去開啟的
而Android這邊就是要決定這串URL的寫法
而決定這個URL的檔案沒什麼特別的，就是AndroidManifest.xml啦哈哈
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <application android:allowBackup="true" android:dataExtractionRules="@xml/data_extraction_rules" android:fullBackupContent="@xml/backup_rules" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.OpenAppFromWebExample" tools:targetApi="31"> <activity android:name=".MainActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <!--格式： myapp://noah.liu/example?info=來自火星的Hello --> <data android:scheme="myapp" android:host="noah.liu" android:pathPrefix="/example" /> </intent-filter> <meta-data android:name="android.app.lib_name" android:value="" /> </activity> </application> </manifest>
重點主要是在<intent-filter>的部分，由於我這個範例只有MainActivity一個頁面，因此被我標註粉底的部分寫在了<activity>底下
如果你是有多個畫面，那這段程式碼就要寫在該頁面之下囉！
再來我們仔細看一下決定URL的部分，如下
myapp://noah.liu/example?info=來自火星的Hello
對照這部分的Code的話，我想就一目了然了吧！
<data android:scheme="myapp" android:host="noah.liu" android:pathPrefix="/example"/>
至於最後面的
?info=來自火星的Hello
這部分是傳值的部分，我拉到後面再講
再來，來到Activity的部分，程式很少我們直接看
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //一定要檢查是否空值，否則會閃退 if (getIntent().getData()!= null){ String fromWeb = getIntent().getData().getQueryParameter("info"); TextView tvFromWeb = findViewById(R.id.textview_Main); tvFromWeb.setText(fromWeb); } } }
這一段程式碼就是拉取URL傳過來的資訊，而這個資訊內容就跟RESTful GET格式是完全一致的
我這裡姑且是有範例，但後續的應用就看個人囉 :)
3. Web端實作
好的，最後就是Web端的實作了
Web端程式碼是比較囉唆的，我在這裡只寫重點，程式碼僅以連結呈現
首先是按鈕畫面，重點只有這邊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>MainPage</title> </head> <body> <div class="container"> <div class="center"> <a onclick="javascript:open_app();" class="styled">開啟APP</a> </div> </div> </body> <script language="javascript"> function open_app(){ window.open("SubPage.html"); } </script> </html>
謎之聲：哈哈，不就是跳頁而已嗎（笑
再來才是重點了，來看看第二頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>None</title> </head> <body onload="open()"> <h1>請稍候...</h1> </body> </html> <script language="javascript"> let app = 'myapp://noah.liu/example?info=來自火星的Hello'; let appstore = 'https://play.google.com/store/apps/details?id=com.noahliu.noisemeter'; function open() { setTimeout(function () { window.location.href = app; setTimeout(function(){ window.location.href = appstore; setTimeout(function(){ window.close(); },1000); },2000); }, 500); } </script>
首先粉底白字的部分，這裡的意思就是在頁面開啟後直接執行Javascript程式碼的
再來紫底跟橘底的部分就是分別跳轉APP跟GooglePlay
而很有趣的是這部分的跳轉其實並非URL的網址跳轉，而是它會自動跳轉到GooglePlay
而這樣的設計使這個功能的使用者體驗更好，我還挺喜歡的XD
4. 實測
我這套程式當時在測試的時候也遇到了點小問題，就是我不知道該如何在Android的模擬器上執行我寫好的網頁
雖然啦，始之能夠執行的方法有很多種。像是開Node啊或者寫個簡單的Server執行程式都可以
但...我就不想那麼複雜麻XD
後來我想到了在VScode中有一個LiveServer的套件，該套件能夠開啟一個簡單的localhost本地網頁做執行
但很可惜的是我起先載了該套件後沒辦法在模擬器上執行
後來在朋友幫助下我有找到方法可以使這個網頁在模擬器執行，方法如下
1. 使用ifconfig(Windows: ipconfig)找出該電腦的IP
2. 進入到LiveServer的設定，找到Setting
3. 最後找到Host選項，打上剛剛查詢到的IP就可以囉！
好的，程式寫到這邊應該是可以順利執行囉～希望大家都有把功能做出來!
最後..
留言列表
Python攻略大小事 (1)
