如何在 ionic 3 中使用 URL Scheme

John_Mai發表於2018-02-02
Scheme

蝦扯蛋?

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

我為啥寫這個，是因為我最近用 ionic 開發一個 app ，需要用 URL Scheme 。搞這個 URL Scheme 折騰了一下，所以寫下此文，並分享給需要的朋友。?

什麼是 URL Scheme❓

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

如何在 ionic 3 中使用 URL Scheme 如何在 ionic 3 中使用 URL Scheme

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

開始擼程式碼 ?

構建demo ?

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

 ionic start myApp tabs
複製程式碼

如何在 ionic 3 中使用 URL Scheme

安裝 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。開啟就能看到之前定義的協議名稱了

如何在 ionic 3 中使用 URL Scheme

編譯安裝app到手機上?

ionic cordova run ios
複製程式碼

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

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

  • 獲取url
    如何在 ionic 3 中使用 URL Scheme
    //獲取url並顯示在頁面上
    (window as any).handleOpenURL = (url: string) => {
      console.log(url);
      this.url = url;
    };
複製程式碼

這句程式碼是獲取是哪個URL開啟的app了。

注意：handleOpenURL函式必須是全域性唯一，否則無法正常接收

  • 修改config.xml

如何在 ionic 3 中使用 URL Scheme

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

這裡必須寫上這句話，這句是允許我們定義的協議可以傳遞。否則handleOpenURL也無法接收到URL

測試 ⚙

  1. 重新編譯安裝
ionic cordova run ios
複製程式碼
  1. 在瀏覽器開啟myapp-mak://test
如何在 ionic 3 中使用 URL Scheme 如何在 ionic 3 中使用 URL Scheme

獲取URL有啥作用呢？獲取URL之後，我們可以判斷URL的不同進行不同的操作，例如：開啟指定頁面、分享、支付……

結束 ?

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

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

分享一個 Universal Links && Deep Linking Cordova 外掛給大家github.com/nordnet/cor…

相關文章