我正在尝试使用requireJS加载google API文件,但出现错误,
有人认为我可以低估Google呼叫之前正在加载GP文件
“ gp.js:23 Uncaught ReferenceError:未定义gapi”
这是代码
gp.js文件
function logout()
{
gapi.auth.signOut();
location.reload();
}
function login()
{
var myParams = {
'clientid' : '900278902057-ppqm358qrhki089danipqguj3i4ir70i.apps.googleusercontent.com',
'cookiepolicy' : 'single_host_origin',
'callback' : 'loginCallback',
'approvalprompt':'force',
'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
};
gapi.auth.signIn(myParams);
}
function loginCallback(result)
{
if(result['status']['signed_in'])
{
var request = gapi.client.plus.people.get(
{
'userId': 'me'
});
request.execute(function (resp)
{
var email = '';
if(resp['emails'])
{
for(i = 0; i < resp['emails'].length; i++)
{
if(resp['emails'][i]['type'] == 'account')
{
email = resp['emails'][i]['value'];
}
}
}
var str = "Name:" + resp['displayName'] + "<br>";
// str += "Image:" + resp['image']['url'] + "<br>";
// str += "<img src='" + resp['image']['url'] + "' /><br>";
// str += "URL:" + resp['url'] + "<br>";
str += "Email:" + email + "<br>";
str += "DOB:" + resp['birthday'] + "<br>";
str += "Gender:" + resp['gender'] + "<br>";
document.getElementById("profile").innerHTML = str;
});
}
}
function onLoadCallback()
{
gapi.client.setApiKey('AIzaSyBy08qpAjR9U1nKaZ5H1MmwTuthspQPNqY');
gapi.client.load('plus', 'v1',function(){});
}
还有requirejs文件-main.js
require.config({
shim: {
'jquery': {
exports: '$'
},
/* 'backbone': {
deps: ['jquery', 'underscore'],
},*/
'googleplus' : {
deps: ['jquery'],
exports: 'gapi'
},
},
paths: {
'jquery': '//code.jquery.com/jquery-1.11.0.min',
'googleplus': 'https://apis.google.com/js/plus.js?onload=init',
}
})
require(['gp']);
和html按钮
<input type="button" value="Login" onclick="login()" />
<input type="button" value="Logout" onclick="logout()" />
当我尝试不使用requireJS时,相同的代码可以完美地工作,但问题是我必须使用requireJS
最佳答案
gp.js必须是一个模块。
define(['jquery', 'googleplus'], function($, gapi) {
# your code
window.loginCallback = function (result) {
if (result['status']['signed_in']) {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get(
{
'userId': 'me'
});
request.execute(function (resp) {
var email = '';
if (resp['emails']) {
for (i = 0; i < resp['emails'].length; i++) {
if (resp['emails'][i]['type'] == 'account') {
email = resp['emails'][i]['value'];
}
}
}
var str = "Name:" + resp['displayName'] + "<br>";
str += "Email:" + email + "<br>";
str += "DOB:" + resp['birthday'] + "<br>";
str += "Gender:" + resp['gender'] + "<br>";
document.getElementById("profile").innerHTML = str;
});
});
}
};
$('#login').click(login);
$('#logout').click(logout);
});
并修改模板:
<input type="button" value="Login" id="login" />
<input type="button" value="Logout" id="logout" />
因为
gapi.signIn
方法需要全局名称空间中的回调函数,所以loginCallback
函数必须是全局的。关于javascript - 与requirejs一起使用时未定义gapi错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38693439/