问题：我们需要做一个基于mui的Facebook第三方登录及分享，所以我们尝试了使用Facebook 网页JavaScript API来制作登录及分享，代码测试在浏览器端没有问题，在真机运行的时候出现了不显示的情况。
测试1：因为我们使用的是JavaScriptAPI，所以Facebook在申请应用key的时候是需要填写网站地址的，那时我填写了localhost:8020，所以猜想是否是站点不一致的问题，我用浏览器测试了另外一个浏览器端口，没有问题，然后又猜想是否真机运行是没有地址的，是否是因为站点不一致的问题呢？又或者是其他的问题导致的呢？
这个是是浏览器运行效果
这个是真机运行效果
这个是我特意为了展示不是VPN的问题所传的图片
这个是我更换端口后所做得测试，这时候浏览器按钮是显示的
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部-->
<header class="mui-bar mui-bar-nav publicHeader" style="z-index: 999;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">测试页</h1>
</header>
<div style="height: 45px;"></div>
这是个测试页面
<!--页面内嵌入Facebook页面-->
<div id="list"></div>
<!--Facebook官方所给的按钮-->
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState()">
</fb:login-button>
<script src="js/mui.min.js"></script>
<script>
// 初始化
mui.init();
// 页面内嵌入Facebook页面
mui('#list').load('http://m.facebook.com',function(response){});
// Facebook官方登录操作
mui.ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : '274789189670506', // 757810061093741
cookie : true,
xfbml : true,
version : 'v2.8',
oauth : true
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
})
}
function statusChangeCallback(response) {
if (response.status === 'connected') { //登陆状态已连接
fbToken = response.authResponse.accessToken;
getUserInfo();
} else if (response.status === 'not_authorized') { //未经授权
mui.toast('facebook未经授权');
} else {
mui.toast('不是登陆到Facebook;不知道是否授权');
}
}
//获取用户信息
function getUserInfo() {
FB.api('/me', function(response) {
//response.id / response.name
mui.toast('Successful login for: ' + response.name);
//把用户token信息交给后台
self.location= '/home/login.fbLogin.do?accessToken='+fbToken;
});
}
})
</script>
</body>
</html>
