Cocos2d-JS项目集成Facebook插件要注意的问题

在Cocos2d-JS项目中集成Facebook登录/交互功能是许多移动App开发中常见的需求，官方也提供了相关教程。然而，在按照官方教程进行项目开发时，我们可能会遇到一些问题，耗费不少时间。本文将记录这些问题，希望能为开发者提供补充，减少大家走弯路。

官方参考资料

• Android平台Facebook平台集成配置教程：Android平台上如何配置Facebook平台集成
• Cocos2d-x的Facebook集成相关资料：Cocos2d-x的Facebook集成
• Facebook API参考：Facebook SDK for Cocos2d-JS API Reference

集成步骤及注意事项

第一步：严格遵循官方教程配置

首先，要严格按照官方教程（Android平台上如何配置Facebook平台集成）进行操作。通常，只要有足够的耐心，这一步不会出现问题。但我在认真添加完教程所述的配置代码后，打包时却出现了报错：

jni/../../Classes/AppDelegate.cpp:29:41: fatal error: jsb_cocos2dx_pluginx_auto.hpp: No such file or directory
#include "jsb_cocos2dx_pluginx_auto.hpp"

这意味着按教程Step5中添加的两个文件 jsb_cocos2dx_pluginx_auto.hpp 和 jsb_pluginx_extension_registration.h 找不到。在网上搜索相同问题的帖子，均未找到解决方案。后来在官方论坛发帖咨询，才发现问题出在官方教程Step3中的两句脚本：

LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static
$(call import-module,cocos2d-x/plugin/jsbindings)

官方教程未明确说明这两句脚本的放置位置。在 Android.mk 文件中，有一句 include $(BUILD_SHARED_LIBRARY)，第一句 LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static 应放在该句之前，而第二句 $(call import-module,cocos2d-x/plugin/jsbindings) 应放在该句之后，例如放在文件末尾。虽然对于熟悉C++的程序员来说，这种错误不太容易犯，但大多数Cocos2d-JS程序员可能对C++不太熟悉。

第二步：使用命令行编译项目

官方教程在这一步只是简单提及，容易被忽视。我一开始习惯在Cocos Code IDE里直接打包，因为打包时会编译runtime。但实际上，C++代码修改后，必须使用命令行编译项目。因为使用Cocos Code IDE编译runtime时，除非是项目第一次编译，否则很多步骤会被跳过（例如生成 frameworks/runtime-src/proj.android/obj 文件夹中的内容，除非在编译前删除该文件夹，否则不会重新编译）。这样一来，打包时前面配置的代码根本没有被编译进去，运行时就会报错找不到Facebook插件。 使用以下命令编译项目：

cocos compile -p android

第三步：在project.json文件中添加配置代码

需要在项目的 project.json 文件中添加如下代码：

{
"modules": ["cocos2d", "extensions", "external"],
"plugin": {
"facebook": {
"appId": "829255073798315",    // appId的值改成你自己的appId
"xfbml": true,
"version": "v2.0"
}
}
}

第四步：在js中调用Facebook SDK接口

在JavaScript代码中添加调用Facebook SDK接口的代码，以下是初始化和登录的示例：

初始化代码

if (!cc.sys.isNative) {
window.facebook = window.facebook || (window["plugin"] ? window["plugin"]["FacebookAgent"]["getInstance"]() : null);
} else {
cc.loader.loadJs('', [
"../../frameworks/cocos2d-html5/external/pluginx/platform/facebook_sdk.js",
"../../frameworks/cocos2d-html5/external/pluginx/platform/facebook.js"
], function () {
cc.log("Facebook js loaded!");
});
}

登录代码

function onLogin() {
if (facebook.isLoggedIn()) {
cc.log("Facebook Logged in!");
} else {
facebook.login(function (type, msg) {
fbData.userID = facebook.getUserID();
fbData.accessToken = facebook.getAccessToken();
});
}
}

在编写这些代码之前，建议先去官方 js-tests 项目中仔细查看Facebook SDK Test模块里的代码，其中有各种调用Facebook SDK API的代码实例。

第五步：打包并测试

完成上述步骤后，将项目打包并安装到手机中进行测试。