集成实践 | 手把手教你通过Cocos接入华为推送服务

目前Cocos Creator已经支持HMS Core和HUAWEI AppGallery Connect(以下简称 AGC)。开发者可以通过HMS Core和AGC实现一键快速发布游戏,减少了一系列复杂操作,比如SDK接入、开发阶段应用上传,帮助您打造高质量和创新的应用,提升游戏体验。

本篇文章,将一步步带你实现在Cocos中通过华为推送服务发送消息。

主要步骤描述

  1. 下载和安装Cocos Creator,并在Cocos网页和Cocos Creator创建一个项目。

  2. 在AGC上创建并配置应用信息,然后配置Cocos SDKHub和构建流,添加HUAWEI_HMS (Push) 插件和HUAWEI AppGallery Connect。

  3. 编写代码获取token,然后打包编译生成Apk。

  4. 测试通知栏消息和透传消息的发送。

步骤详解

第 1 步:下载和安装Cocos Creator,并在Cocos网页和Cocos Creator创建一个项目

  1. 访问链接 http://www.cocos2d-x.org/products#creator,下载安装Cocos Creator。![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151732471.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  2. 登录Cocos 开发者账号,并创建项目(https://passport.cocos.com/auth/signup)。![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151746877.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  3. 打开Cocos Creator ,创建一个项目。
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151753946.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

创建过程中,如果遇到下面的错误提示,那么你需要先下载编辑器。
在这里插入图片描述

点击Editor进行下载。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151833200.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

第 2 步:在AGC上创建并配置应用信息,然后配置Cocos SDKHub和开发流,添加HUAWEI_HMS (Push) 插件和HUAWEI AppGallery Connect。

  1. 参考如下链接,在AGC上创建应用并配置应用信息: https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/android-config-agc-0000001050170137
  • 主要步骤包括:

  • 生成签名指纹证书;

  • 配置签名指纹证书;

  • 设置数据存储地;

  • 打开相应的服务;

下载配置文件(agconnect-services.json);
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151850702.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  1. 按照下图路径,打开服务面板,找到Cocos SDKHub。
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151857365.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  2. 登录Cocos Creator并选择你创建的项目。
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151903444.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151910395.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
    ,size_16,color_FFFFFF,t_70#pic_center)

  3. 点击进入Cocos SDKHub并点击 "Plugin Manage".
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151939579.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  4. 选择 Push 并点击 OK.
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151946450.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012151951803.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
    ,size_16,color_FFFFFF,t_70#pic_center)

  5. 点击面板中的编辑图标(见下图)。
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152028861.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  6. 添加从AGC下载的json 文件
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152034996.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

  7. 点击菜单Project,选择Build进行创建
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152116373.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152121268.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
    ,size_16,color_FFFFFF,t_70#pic_center)

  8. 在Build面板上,选择 HUAWEI AppGallery Connect,点击“build”及“compile”进行编译
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020101215212951.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

如果在创建过程中出现下图的错误,你需要先安装NDK。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152135969.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152140980.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152147335.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

第3步:编写代码以获取token,然后打包编译生成Apk

下图展示了整个项目的结构:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152221608.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152227135.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
,size_16,color_FFFFFF,t_70#pic_center)

  1. 将下面的代码添加到 js-sdkhub.js 文件中:
var onPushResult = function (code, msg) {
  console.log("on push result action.");
  console.log("code: " + code);
  console.log("msg: " + msg);
}
var init = function () {
  let _global = global || window;
  _global.sdkhub = _global.sdkhub || {};
   
  sdkhub.getPushPlugin = () => null;
  if (typeof SDKHub === 'undefined') 
    return;
  sdkhub.getPushPlugin = () => SDKHub.AgentManager.getInstance().getPushPlugin();
   
  sdkhub.getPushPlugin().startPush();
  sdkhub.getPushPlugin().setListener(onPushResult, this);
}
init();

  1. 点击 "Build" 后,进行 "Compile" 以打包应用,这个时候,你就可以将APK安装到测试设备上进行测试了。
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/202010121524439.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

如果你没有正确配置指纹证书,那么你将会在App运行过程中遇到下图的错误:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152449935.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

在log里,通过tag "jswrapper|HUB_LOG"你可以找到设备的token。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152455166.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

第 4 步: 测试通知栏消息和透传消息的发送

  1. 参考链接指导,登录AGC并选择Push Kit https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/msg-sending-0000001050042119

a.通知栏消息测试结果
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152515510.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152523187.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
,size_16,color_FFFFFF,t_70#pic_center)

b. 透传消息测试结果
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152528904.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201012152533806.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA
,size_16,color_FFFFFF,t_70#pic_center)

到这里,您已经完成了在Cocos中使用华为推送服务的全部配置和开发流程,现在您可以您的应用中正式使用华为推送服务来推送消息了。

欲了解更多详情,请参阅:

华为开发者联盟官网:https://developer.huawei.com/consumer/cn/hms

获取开发指导文档:https://developer.huawei.com/consumer/cn/doc/development

参与开发者讨论请到Reddit社区:https://www.reddit.com/r/HuaweiDevelopers/

下载demo和示例代码请到Github:https://github.com/HMS-Core

解决集成问题请到Stack Overflow:https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest


原文链接:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203376511132610301&fid=18
作者:梦阳

posted @ 2020-10-12 16:46  华为开发者论坛  阅读(1628)  评论(0)    收藏  举报