JavaScript如何呼叫Native iOS/Android 方法

yingye發表於2019-02-16
JavaScriptiOSAndroid

寫在前面的話：本文面向web前端工程師，iOS 或 Android 請移步這裡stackoverflow。關於app開發模式，這裡不再贅述。

一、判斷機型

js 呼叫 Native iOS/Android function 需要使用不同的方法，所以首先要做的是判斷使用者機型，程式碼如下：

var u = navigator.userAgent.toLowerCase();
var isApple = /iphone|ipad|ipod|ios/i.test(u);
var isAndroid = /android/i.test(u);

二、呼叫 Native iOS 方法

通過 js 改變 window.location 值, 來實現呼叫 iOS function ，這個操作並不是跳轉，而是觸發了一個 即發即棄 (a fire and forget) 事件。程式碼如下：

//一個引數
window.location = `color://` + color;

//兩個引數
window.location = `myscheme://param1/` + value1 + `/param2/` + value2;

iOS 端接收引數需要進行 url 編碼處理，可以使用 encodeURIComponent 函式處理。

ps:關於URI和URL
URI(Uniform Resource Identifier) 統一資源識別符號
URL(Uniform Resource Locator) 統一資源定位符
URI包含URL和URN，如果URI標識一個人，URL好比這個人的住址，URN則是名字。

三、呼叫 Native Andriod 方法

與 iOS 不同之處在於，Andriod 接收中文英文引數，無需 encode 操作。實現程式碼如下：

if(window.AndroidBridge) {
    window.AndroidBridge.changeNavbarBackground(color);
}

四、關於函式名稱約定

三方會根據業務需求定義一個通用的函式名稱，這個函式名稱通常是由web前端工程師定義的。例如，我想要獲取使用者id，本著駝峰命名規範，我們將函式名稱統一定義為 getId() 。在 iOS 除錯時，發現iOS接收到的函式方法為 getid() ，導致bug。

ok，問題解決了，若還有其他問題，歡迎給我留言。如果對你有幫助，記得在下方點個推薦吧~~

相關文章