如何使用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也不起作用，但现在我一次只专注于一个问题。

- xno

---

将访问来源更改为简单通用的方式：<access origin="*" /> - Regent

我也做过那个。 - xno

Answer 1

问题在于 InAppBrowser 插件未安装。新版本的 PhoneGap/Cordova 并不会预先安装所有插件，而是由您选择您的应用程序要访问什么。

在终端中，使用命令 cd yourApp，然后运行 $ cordova plugin add org.apache.cordova.inappbrowser。

完成后，它就可以完美运行了。 编辑 为了更详细地说明如何检查 Twitter 是否已安装，我安装了另一个插件：AppAvailability for iOS and Android。

然后，我修改了我的 .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插件提供的文档也非常有帮助。

希望这能帮助到某些人！

- xno

---

你能在Facebook应用程序中打开Facebook页面吗？ - Priyanka

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名称。

- Deminetix

---

谢谢这个。非常有用！Twitter在Android中的包名是com.twitter.android。 - Yogster

感谢您分享这个很棒的函数。这里有一个小错误。"if (!window.appAvailability)" 部分需要添加一个"return"语句。如果没有"return"语句，代码将继续执行下一部分。 - Almas Dusal