Facebook连接PhoneGap Build - ReferenceError:找不到变量:facebookConnectPlugin

Question

这是一个自我回答的问答,希望能够解决一些混乱. 在https://github.com/phonegap-build/FacebookConnect/blob/962eb0a1c07935ff813e28aa9eaa5581f2e10416/README.md上找到Facebook Connect插件v0.4.0的官方自述文件后,它立即无效,因此我们在本地安装了该插件.

由于以上是专门针对PhoneGap Build的分支,我们使用官方插件仓库中的说明安装了该插件,地址为https://github.com/phonegap/phonegap-facebook-plugin

有很多错误信息和建议没有说明PhoneGap的版本,插件,如果使用PhoneGap构建等等,很难理解如何让它真正起作用.

我们遵循的一些指南/提示: PhoneGap添加Facebook Connect插件 http://pjsdev.blogspot.com/2013/03/phonegap-build-facebook-connect-part-2.html http://informatico.hol.es/blog/instalar-phonegap-facebook-plugin/ http://excellencemagentoblog.com/cordova-3-5-0-facebook-login-0-5-1-using-command-line-android

尽管让它变得有点工作(控制台登录XCode Organizer中所说的设备Cordova Facebook Connect plugin initialized successfully.),我们遇到了ReferenceError: Can't find variable: facebookConnectPlugin试图运行PhoneGap构建版本的问题.

Answer 1

问题是facebookConnectPlugin仅在插件的v0.5.1中可用,并且我们在使用PhoneGap构建进行构建时运行v0.4.0,同时在本地意外安装了v0.5.1.

大混乱直截了当:

• 该插件的最新版本是0.5.1,这是我们在本地安装的
• PhoneGap版本最高只有0.4.0
• 该文档链接到代码/树在962eb0a1c07935ff813e28aa9eaa5581f2e10416而不是0.4.0标签 - 不清楚这些是相同的
• 在0.4.0和0.5.1之间嵌入和使用插件的方式发生了巨大变化

版本0.4.0:

您应该在html中包含以下内容,以使其在您的设备上运行:

<script src="cdv-plugin-fb-connect.js"></script>
<script src="facebook-js-sdk.js"></script>

如果您的代码库既适用于PhoneGap又适用于浏览器中的Web应用程序,请确保在构建PhoneGap时仅包含上述内容.要使网页作为普通网页运行时,请遵循Facebook的普通Facebook JS SDK说明.在其中运行该代码if (!window.cordova) {}.

用法示例:

if (typeof CDV === 'undefined') {
    alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
}
if (typeof FB === 'undefined') {
    alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
}

// Initialize the Facebook SDK
FB.init({
    appId: 'yourappid',
    nativeInterface: CDV.FB,
    useCachedDialogs: false
});

FB.getLoginStatus(handleStatusChange);

哪个handleStatusChange回调接收有关用户是否登录的信息.

要提示登录,请根据官方文档使用FB.login().0.4.0树中的示例非常有用:https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416/example

版本0.5.1:

插件在设备上运行时会公开window.facebookConnectPlugin而无需手动包含任何js.您应该将https://github.com/phonegap/phonegap-facebook-plugin/blob/master/www/js/facebookConnectPlugin.js复制到您的项目中并将其包含在您的html中,以便获得类似的API将网页作为普通网页运行.

用法示例:

var fbLoginSuccess = function (userData) {
    alert("UserInfo: " + JSON.stringify(userData));
}

facebookConnectPlugin.login(["basic_info"],
    fbLoginSuccess,
    function (error) { alert("" + error) }
);

PS PhoneGap构建的一些调试技巧:

• 使用XCode Organizer中的控制台日志为设备查看PhoneGap代码中的console.log()输出(仅在deviceready之后输出消息)
• 在JavaScript中使用try/catch-blocks以捕获并查看代码中的js错误.

要在本地安装v0.4.0:

cd ~/tmp/
wget https://github.com/phonegap/phonegap-facebook-plugin/archive/0.4.0.tar.gz --no-check-certificate
tar -xvf 0.4.0.tar.gz
cordova plugin add ~/tmp/phonegap-facebook-plugin-0.4.0/ --variable APP_ID="yourfbappid" --variable APP_NAME="fb app name"