我已经工作了3天(白天和黑夜)直接尝试将phonegap构建应用程序连接到Facebook。我使用过各种各样的插件,比如
我也尝试过pgb-fbconnect-master示例,我在config.xml文件中添加了(后来删除了)一些相关的插件,比如Inappbrowser和Childbrowser,但是根本没有用:(。
我的代码的最后一个版本甚至适用于Chrome Ripple Emulator(如果用户未登录,则会弹出Facebook登录信息,一旦用户登录,它就会提取个人资料信息并将其显示在DIV中但不幸的是这个梦想来到了当我上传并构建phonegap应用程序并在真正的Ipad和Android设备上进行测试时结束。 这是javascript(myscript.js):
window.onload=function() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
};
function onDeviceReady() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
alert("Loaded FB successfully!");
FB.init({
'appId': 'xxxxxxxxxxxxxxx',
'xfbml' : true,
'cookie' : true,
'oauth': true,
'status':true
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert(response.status);
getUserInfo();
} else {
$("#fb-root").show();
FB.login(function(){},{scope: 'public_profile' //publish_actions});
}
});
function getUserInfo() {
FB.api("/me", function(data) {
if (data.error) {
alert('Unexpected Facebook Login Error: ' + JSON.stringify(data.error));
} else {
$('#account-info').html(// '<img src="' + data.url + '">'
'<img src="' +
'http://graph.facebook.com/' + data.id + '/picture?type=small' + '">'
+ "<p>Name: "+data.name + "</p>"
+ "<p>Gender: "+data.gender+ "</p>"
+ "<p>FB page last modified on:"
+data.updated_time+ "</p>"
);
}
});
}
这是config.xml文件:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
version = "1.0.0">
<name>TestApp</name>
<icon src="images/on.png" width="57" height="57" density="mdpi" />
<description>
A simple PhoneGap Build application.
</description>
<author href="https://my.com" email=",my@example.com">
Hansi
</author>
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="com.phonegap.plugins.facebookconnect">
<param name="APP_ID" value="xxxxxxxxxxx" />
<param name="APP_NAME" value="TestApp" />
</gap:plugin>
</widget>
最后他是HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" class="ui-corner-all">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#page" data-icon="home" class="ui-btn-active">Home</a></li>
<li><a href="#favs" data-icon="star">Recently Requested</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
</ul>
</div><!-- /navbar -->
<div data-role="header" data-position="fixed">
<h1>Facebookish</h1>
</div>
<div data-role="content">
<div id="fb-root"></div>
<!-- script src="http://connect.facebook.net/en_US/all.js"></script -->
<h2>Profile</h2>
<div id="account-info"></div>
</div>
<div data-role="footer">
<h4>Test App ©</h4>
</div>
</div>
<!-- script src="scripts/openfb.js" type="text/javascript"></script -->
<script src="cordova.js"></script>
<!--script src="phonegap.js"></script-->
<script src="cdv-plugin-fb-connect.js"></script>
<script src="facebook-js-sdk.js"></script>
<script src="scripts/myscript.js"></script>
</body>
</html>
我没有在web目录中包含文件cordova.js,cdv-plugin-fb-connect.js和facebook-js-sdk.js,因为我已经读过它们将在构建过程中生成(尽管在在Netbeans中测试我得到了那些丢失文件的错误)。我还评论过phonegap.js,因为网上没有一个例子使用它。
我做错了什么?如前所述,从理论上讲,它都适用于Ripple模拟器,但在Phonegap构建中构建之后,该应用程序将失去Facebook连接行为。 72小时无所事事:)。
我们将不胜感激。