如何在 ionic 3 中使用 URL Scheme

蝦扯蛋🥚

第一次在掘金寫東西，有點緊張。

我爲啥寫這個，是由於我最近用 ionic 開發一個 app ，須要用 URL Scheme 。搞這個 URL Scheme 折騰了一下，因此寫下此文，並分享給須要的朋友。😝

什麼是 URL Scheme❓

簡單的說，URL Scheme就是一個可讓app相互之間能夠跳轉的協議。列如：微信的 URL Scheme 就是 weixin://，在瀏覽器中打開 weixin://scanqrcode 能夠跳轉到微信的掃一掃功能。

更多 URL Scheme ：www.zhihu.com/question/19…

開始擼代碼 💻

構建demo 🐒

咱們就用ionic的tabs模板構建一個demo吧

ionic start myApp tabs
複製代碼

安裝 URL Scheme Cordova 插件 🔧

咱們須要的安裝的 URL Scheme Cordova 插件是cordova-plugin-customurlscheme

插件地址：github.com/EddyVerbrug…

ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp-mak
複製代碼

在根目錄使用此命令進行安裝,URL_SCHEME=myapp-mak我定義的協議名稱是myapp-mak。名稱隨便起，只要不跟其餘app衝突就好。😝

若是安裝後想修改協議名稱的，能夠去改config.xml和package.json。打開就能看到以前定義的協議名稱了

編譯安裝app到手機上📱

ionic cordova run ios
複製代碼

編譯安裝完成後，能夠經過這個協議myapp-mak://隨便寫打開此app。如：在瀏覽器打開myapp-mak://test

如何知道是哪一個URL打開的App❓

• 獲取url

  

//獲取url並顯示在頁面上
    (window as any).handleOpenURL = (url: string) => {
      console.log(url);
      this.url = url;
    };
複製代碼

這句代碼是獲取是哪一個URL打開的app了。

注意：handleOpenURL函數必須是全局惟一，不然沒法正常接收

• 修改config.xml

<allow-intent href="myapp-mak:*" />
複製代碼

這裏必須寫上這句話，這句是容許咱們定義的協議能夠傳遞。不然handleOpenURL也沒法接收到URL

測試 ⚙

1. 從新編譯安裝

ionic cordova run ios
複製代碼

2. 在瀏覽器打開myapp-mak://test

獲取URL有啥做用呢？獲取URL以後，咱們能夠判斷URL的不一樣進行不一樣的操做，例如：打開指定頁面、分享、支付……

結束 😁

第一次寫文，寫得不是很好。😜

除了經過URL Scheme方式來打開app。其實可使用Universal Links && Deep Linking 來打開app。

分享一個 Universal Links && Deep Linking Cordova 插件給你們github.com/nordnet/cor…