如何使用Phonegap打開Twitter和Facebook應用程序？

Question

我正在嘗試使用我的PhoneGap應用程序鏈接在Twitter應用程序中打開特定的用戶個人資料頁面。 我知道不是每個人都在他們的設備上安裝了Twitter應用程序，所以我想將它們發送到Play商店下載它，如果他們沒有。

問題是我每次點擊Android設備上的鏈接時都會收到錯誤消息：

Application Error:

net::ERR_UNKNOWN_URL_SCHEME(twitter://user?screen_name=xerxesnoble)

我的JavaScript如下：

//If Android

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

if (isAndroid) {

    alert('Android!');

    twitterCheck = function() {
        alert('Android!');
        var now = new Date().valueOf();

        setTimeout(function () {
            if (new Date().valueOf() - now > 100) return;
            window.open('https://play.google.com/store/apps/details?id=com.twitter.android', '_system', 'location=no');
        }, 50);

    window.open('twitter://user?screen_name=XerxesNoble', '_system', 'location=no');
    };
};

$('.twiterNav').click(function() {
     window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');
});

我試過的事情：

• 使用twitter:///而不是twitter://
• 將<access origin="twitter://user?screen_name=xerxesnoble" />到我的config.xml

我不知道還有什么可以嘗試，Facebook也沒有任何工作，但是現在我一次只關注一個問題。

Answer 1

問題是沒有安裝InAppBrowser插件。 新版本的PhoneGap / Cordova沒有安裝所有插件 - 而是選擇您希望應用程序訪問的內容。

在終端cd yourApp和$ cordova plugin add org.apache.cordova.inappbrowser

完成后，它完美地工作。

編輯

只是為了分析我如何得到我的.js來檢查是否安裝了twitter。

我安裝了另一個插件： 適用於iOS和Android的AppAvailability

然后我改變了我的.js看起來像這樣：

//Twitter checker

// If Mac//

var twitterCheck = function(){

appAvailability.check('twitter://', function(availability) {
    // availability is either true or false
    if(availability) { window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');}
    else{window.open('https://itunes.apple.com/ca/app/twitter/id333903271?mt=8', '_system', 'location=no'); };
});
};

//If Android

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

if(isAndroid) {

twitterCheck = function(){    

appAvailability.check('com.twitter.android', function(availability) {
    // availability is either true or false
    if(availability) {window.open('twitter://user?screen_name=xerxesnoble', '_system', 'location=no');}
    else{window.open('https://play.google.com/store/apps/details?id=com.twitter.android', '_system', 'location=no');};
});
};
};

AppAvailability插件中提供的文檔也非常有用>

希望這有助於某人！

Answer 2

對於可能來到這里並想要更多的其他人的參考：

我已經能夠在iOS和Android上運行良好（到目前為止），並使用下面的代碼動態地回退到瀏覽器。

所需的插件是cordova-plugin-inappbrowser和cordova-plugin-appavailability

function openBrowser (url) {
    if (!url) {
        return;
    }

    // turn my url into a scheme/intent url
    getAvailabilityScheme(url, function (url) {
        window.open(url, '_system');
    });
}

function getAvailabilityScheme (url, callback) {
    var schemeOrPackage;
    var schemeUrl;

    // check for appavaialbility plugin
    if (!window.appAvailability) {
        callback(url);
    }

    // facebook
    if (url.indexOf('facebook.com/') !== -1) {
        schemeOrPackage = isAndroid ? 'com.facebook.katana' : 'fb://'
        schemeUrl = 'fb://profile/' + url.split('facebook.com/')[1];
    }

    // twitter
    if (url.indexOf('twitter.com/') !== -1) {
        schemeOrPackage = isAndroid ? null : 'twitter://'
        schemeUrl = 'twitter://user?screen_name=' + url.split('twitter.com/')[1];
    }

    if (schemeOrPackage && schemeUrl) {
        window.appAvailability.check(schemeOrPackage, function () {
            callback(schemeUrl);
        }, function () {
            callback(url);
        });
    } else {
        callback(url);
    }
}

使用它很簡單，只需使用普通網站URL調用openBrowser(url)方法即可。 我發現的唯一問題是，對於Facebook頁面，它需要一個ID而不是slug名稱