Sdk-h5-client

来自陌陌游戏WIKI
Guo.xiaoyue（讨论 | 贡献）2020年7月15日 (三) 03:34的版本 （→‎一键加群）

跳转至： 导航、 搜索

h5 sdk初始化（必须）

1.功能说明:

  1. 使用SDK所有功能前必要步骤，初始化sdk后，可以获取到陌陌客户端相关bridge权限
  2. 回调方法成功后，返回userid 用户唯一标识 游戏方需要以这个ID作为和momo用户的关联，才可以进入游戏
  3. 提供了四种样式的导航栏供选择，竖屏三种，横屏两种

2.参考样式: 

  竖屏默认样式  
  Hp1.png
  竖屏样式2
  Sp1.png
  竖屏样式3
  Hp3.png
  横屏样式1
  Hp3.png
  横屏样式2
  Sp1.png

3.调用方法: 

   /**
    * appid 由运营人员提供
    * token  url中获取
    * LANDSCAPE   横屏参数  false（默认竖屏） true（横屏）
    * theme  1 （默认 横｜竖屏样式1） 2 （横｜竖屏样式2 ） 3 （竖屏样式3 ）
    * backEvent  回调函数 默认竖屏样式1返回按钮自定义事件
    */
   MMSDK.init({
      appid : 'h5_testh5_pfBhAtb',
      LANDSCAPE:true, 横屏游戏在竖屏模式下强制横屏显示控制按钮,竖屏游戏不需要传此参数,2.91以上版本生效
      token:'xxxx',
      theme: 1,    //  主题说明
      backEvent:backFunction
   }, function(userid){
         //callback 回调方法成功后，以下的方法才能进行调用， 返回userid 用户唯一标识 游戏方需要以这个ID作为和momo用户的关联，才可以进入游戏
   });

4.demo: 

  demo源码 view-source:https://s.immomo.com/fep/momo/test-activity/h5_sdk_demo/init.html

陌陌loading（必须）

1、功能说明：

  1. 陌陌提供的统一的加载中的效果，支持更新加载进度
  2. 陌陌loading会在用户点击游戏入口后出现，在游戏loading进度加载到10%时关闭陌陌loading；
  3. 陌陌loading提供加载进度条显示，需要第三方添加，控制加载百分数进度；
  4. 陌陌客户端8.22.2以上版本可以接入。


Loading.png

2、开启loading方式 ：联系运营同学打开loading页面

3、修改加载百分比 

 /*
  * progress number 加载百分数  1-100
  */
 MMSDK.loadingProgressUpdate(progress)

4、关闭进度条 

   MMSDK.loadingProgressDismiss()

5、关闭loading页 

   MMSDK.closeLoading()

获取用户资料（必须）

1.功能说明: 获取陌陌用户个人资料，可以获取到该用户的头像、昵称、个人签名、性别、星座、年龄、所在城市等信息。

2.调用方法: 

  /**
    * appid 由运营人员提供
  MMSDK.getUserInfo({appid : 'h5_testh5_pfBhAtb'}, function(res){
      console.log(res);//res为用户资料数据
  });

3.返回结构: 

   {
       ec: 0,
       em: "success",
       timesec: 1581329129,
       data: {
           userid: "RlNKMzhac0ZnV3gwSWVwWXpNTWpZZz09",
           name: "德忠",
           sign: "",
           vip: 0,
           reg_time: 1501724538,
           constellation: "狮子座",
           birthday: "1999-07-28",
           age: 20,
           sex: "M",  //性别 M 男 F 女
           avatar: "https://img.momocdn.com/album/ED/75/ED75590E-E190-83FE-82B1-2B1441B0741520180601_S.jpg",
           photo: [
               "ED75590E-E190-83FE-82B1-2B1441B0741520180601"
           ],
           city: "隐身",
           cityid: 110100,cityid对应城市名称 http://www.mca.gov.cn/article/sj/xzqh/2019/2019/201911250933.html
           big_r: "2",
           vtoken: "1ac60d6ceaffbd5aaccb94b236cf8f785e412ae9"
       }
   }

4.demo: 

  sdk demo  view-source:https://s.immomo.com/fep/momo/test-activity/h5_sdk_demo/getuserinfo.html

分享

1.功能说明：

  1. 陌陌分享是一种IM代发消息，目前针对H5游戏分享仅开放分享到好友/群组/讨论组。
  2. 用户通过游戏内分享入口触发分享功能，收到分享消息的用户可在IM消息对应消息列表中查看。
  3. 用户通过分享链接点击可进入游戏。
  4. 分享id由陌陌运营同学提供，需要特别注意的是测试环境和正式环境的分享id不同。

2.参考样式： 

分享页面.jpeg

3.调用方法： 

 调用陌陌客户端，可以分享到群组和好友
   /**
    *  copy_id  string  运营人员提供
    *  apps  array  ['momo_contacts']  'momo_contacts' 联系人
    *  extra  object  cp自定义参数 可以通过getExtra获取自定义参数
    */
   window._callback = function(res) { console.log(res); }
   MMSDK.callShare({
         copy_id:,
         apps: ['momo_contacts'], // momo_contacts:陌陌好友/群组
         callback: '_callback',
         extra: {"a": 1}
   })

4.分享回调参数如下： 

   {
          "app" : "momo_contacts",      //  momo_contacts  momo群组
          "mesage" : "分享成功",
          "status" : "0"     //0  代表成功, 其他失败
    }
  cp 获取extra参数,为object
   MMSDK.getExtra()

5.demo: 

sdk demo view-source:https://test-s.immomo.com/fep/momo/test-activity/h5_sdk_demo/share.html

广告激励视频

1.功能说明：

  1. 陌陌激励视频用户可通过完整观看视频来获取游戏内额外奖励，陌陌&cp可以通过广告主提供的费用获得收入。
  2. 激励视频页面何时关闭，可通过sdk提供的监听前后台事件进行判断。
  3. 经陌陌运营确认后，若激励视频暂定仅申请一个广告场景，则广告id cp方不需要接入，该参数可不传。

2.接入流程说明： 

Use ad.png

3.调用方法： 

跳转激励视频页
   /**
    *  callback 回调函数
    *  ad_id    广告id   运营提供
   */
   MMSDK.gotoAd(function(res){
      console.log(res);
   }, 'ad_id');
    // res描述
    {
        status: 1, 1 有激励视频并跳转， 0 无激励视频
    }

获取激励视频是否播放完毕
   /**
    *  callback 回调函数
    *  ad_id    广告id   运营提供
   */
   MMSDK.getAdStatus(function(res){
         
    }, 'ad_id');
   //res 描述
   {
       "data": {
           "isPlayCompleted": 1 播放完成， 0 没有播放完；
         }
   }

4.demo: 

demo sdk  view-source:https://s.immomo.com/fep/momo/test-activity/h5_sdk_demo/ad.html

支付

Cash1.png


  1. 用户在游戏内点击购买道具
  2. CP生成自己的订单号，并调用前端API MMSDK.gotoCashDesk
  3. H5 SDK会呼出支付页面。在iOS呼出陌陌币支付页面，Android呼出陌陌钱包页面
  4. 用户支付成功。MMSDK.gotoCashDesk返回，并提示『支付成功，等待道具发放』
  5. 陌陌服务器端调用CP配置的支付接口，包含CP自己生成的订单号，通知CP支付成功
  6. CP发放道具
  7. 用户在前端看到道具到账

CP接入流程

  1. 在陌陌后台创建道具，包括道具名称、道具价格、道具ID
  2. CP接入H5前端API、服务器端支付通知、支付反查接口
  3. CP和陌陌联调

支付API

1. 前端API 

   /**
    * productid  运营同学后台配好提供cp方
    * app_trade_no  cp自己生成订单号
    */
   MMSDK.gotoCashDesk({'productid':'com.wemomo.game.testh5.1','app_trade_no':'testxxxx'},function(res){ 
       console.log(res);//返回说明
   });//productid为其中一个道具的道具id，app_trade_no为游戏方此次订单的唯一标识，支付成功后用来通知回调游戏方发货
   res结构:
   {
       'ec' :200,
       'em' : '下单成功',
       'status' : 0,// Int: 0:支付成功， 1:支付取消， 2:支付失败
       'message' : '下单成功',
       'data' : data
   }
  
   sd demo  view-source:https://s.immomo.com/fep/momo/test-activity/h5_sdk_demo/cash.html

2.服务端api 

  服务端api

转盘

1.抽奖流程 

抽奖.png

2.道具使用流程 

Shiyongdaoju.png

接入说明 

 # 道具id（award）需要运营人员提供
 # 道具下发是异步的，道具购买和道具使用需要分开

接口说明 

 # 抽奖流程 流程图1对应接口 服务端接口wiki
 # 抽奖流程 流程图2对应h5文档
  /*
   * orderid string 订单号
   * callback function callback函数
  */
  MMSDK.gotoDrawDesk(orderid, callback)
 # 抽奖流程 流程图3对应接口 服务端接口wiki

前后台切换事件（必须）

1.功能说明： 需要在下面事件处理切前后台逻辑：切后台后关闭声音、停止webgl渲染、停止请求、激励视频是否关闭页面

2.调用方法： 

   document.addEventListener('be:resume', function(resp) {
     console.log('切换到前台')
   })

   document.addEventListener('be:pause', function(resp) {
     console.log('切换到后台台')
   })

消息盒子

1.功能说明：

  1. 消息通知盒子，用来向用户发送游戏内消息，收到消息提示展示在IM消息列表里。
  2. 需要陌陌运营同学申请相关权限后，才可以接入。
  3. 用户接收状态默认是关闭的，游戏内需要设计相关奖励引导用户开启。
  4. 每天允许收到消息上限3条。
  5. 陌陌客户端8.20.4以上版本可以接入。

2.参考样式： 

消息盒子.png

3.接入流程说明： 

消息盒子接入流程图.jpeg

4.调用方法：

前端api 

获取消息盒子状态  
MMSDK.getNoticeStatus()
无参数 返回 number 0/1:不接收消息/接收消息
      
开关消息盒子
MMSDK.toggleNotice()
.then(result=>{
//开启或者关闭成功
}).catch(err=>{
//失败
})

服务端api 

 服务端api

模版消息【废弃】

1.功能说明：

  1. 陌陌内一对一发送的一种IM代发消息类型。
  2. 用户游戏内触发，发送该消息类型时需要游戏内增加二次确认功能，确认是经过用户同意才代发的消息。
  3. 每天限制3条。
  4. 模板id需要由陌陌运营同学提供，特别注意的是测试环境和正式环境模板id不同。


2.参考样式： 

模板消息页面.jpeg

3.调用方法： 

    /*
     * msgid 模版id
     * remoteid 要发送的userid
     */
    MMSDK.sendUserMsg({
       msgid: '598c1bc3dd12b',//消息模板ID
       remoteid: "eWlRcHFpZ1FoK1JxQVlENWFBbFhrQT09",//需要发送的游戏ID
     }, res => {
       console.log('消息模板ID', res)
     })

4.回调方法参数res： 

成功：
{
    "ec": 200,
    "em": "success",
    "data": []
}
失败：
ec:500, //发送失败，可能原因是：参数错误，无效发送对象，无效消息对象，消息有误等原因。
ec:503 //今日发送消息数量超过上限

好友列表

1.功能说明：获取陌陌好友列表，可以获取到好友列表的信息包含昵称、头像、性别、年龄。

2.调用方式: 

   MMSDK.getFriendList(function(res) {
      console.log(`好友`, res);
   })

3.返回结果: 

   {
       ec: 0,
       em: "success",
       timesec: 1581386118,
       data: [
           {
               userid: "WWQ5R2RmUEluTWZEUWdObC8rNUdSUT09",
               name: "老手先生",
               avatar: "https://img.momocdn.com/album/42/C6/42C69A08-A0C0-D666-9D39-32A0F11C62AF20180505_S.jpg",
               sex: "M",
               age: 29,
           }
       ]
   }

关注列表

1.功能说明：获取陌陌好友列表，可以获取到好友列表的信息包含昵称、头像、性别、年龄。


2.调用方式 

   MMSDK.getFollowList(function(res) {
      console.log(`关注列表`, res);
   })

3.返回结果 

   {
       ec: 0,
       em: "success",
       timesec: 1581386118,
       data: [
           {
               userid: "WWQ5R2RmUEluTWZEUWdObC8rNUdSUT09",
               name: "老手先生",
               avatar: "https://img.momocdn.com/album/42/C6/42C69A08-A0C0-D666-9D39-32A0F11C62AF20180505_S.jpg",
               sex: "M",
               age: 29,
           }
       ]
   }

附近玩家

1.功能说明：

  1. 可以获取到陌陌附近的游戏玩家，获取到玩家的头像、昵称、性别、年龄、距当前用户的距离。
  2. 游戏玩家数据需要通过MMSDK.enterGameStat()方法上报给陌陌。

2.调用方式 

   MMSDK.getNearbyList{
       gender: 'Male',	//性别  全部：Unknown，男：Male，女：Female
       paged: 1,	//页码，1，2，3...
       size: 100	//每页条数
    }, (function(res) {
      console.log(`关注列表`, res);
   })

3.返回结果 

   {
       "ec":0,
       "em":"success",
       "timesec":1581386933,
       "data":{
           "remain":0,   //剩余人数
           "list":[
               {
                   "userid":"dzFudGVNSDZIeEtUaHFwOHlVVXVHdz09",
                   "name":"suspenseman",
                   "avatar":"https://img.momocdn.com/album/4B/A1/4BA1BC9F-5969-5E7C-AA9D-1FCD072D8AC7_S.jpg",
                   "sex":"M",
                   "age":25,
                   "distance":"隐身"
               }
           ]
       }
   }

附近人

1.功能说明：可以获取到陌陌附近的人，获取到用户的头像、昵称、性别、年龄、距当前用户的距离。

2.调用方法： 

  /*
   * count 数量
   */
  MMSDK.getNearbyMList({
       count: 20
  }, function(res) {
       console.log(`附近人`, res);
  })

3.返回值： 

  {
   "ec": 0,
   "em": "success",
   "timesec": 1578290611,
   "data": {
       "list":[
           {
                userid: "d1d0czlJWjdpcEdESlFXelE3YTVmdz09"
                name: "你好哇塞啊@！"
                avatar: "https://img.momocdn.com/album/97/83/97834AF5-9B93-1BCC-BD99-24AD98E03E8820181113_S.jpg"
                sex: "M"
                age: 29
                distance: "24.91km"
           }
       ],
   }
 }

跳转用户资料页

1.功能说明：

  1. 可以在游戏内跳转到陌陌用户资料页。
  2. 陌陌客户端8.21.4以上版本可以接入。

2.样式： 

跳转个人资料页.png

3.调用方法： 

   /*
    *  userid
    */ 
   MMSDK.gotoUserProfile('THRWUGxVbklITitOYnNvV0tCWkhKdz09')

添加陌陌关注

1.功能说明：

  1. 陌陌关系体现中，有好友（相互关注）、关注（单方面主动关注）、粉丝（被关注）三种关系，添加陌陌关注功能为单方面主动关注的行为，即用户A添加关注了用户B，则用户A的关注列表里新增了用户B；用户B的粉丝列表里新增了用户A。

2.调用方法： 

   /*
    *  userid
    */ 
   MMSDK.applyToAddFriend('THRWUGxVbklITitOYnNvV0tCWkhKdz09', function(res) {
        console.log(res) 
   } )
   // result true 成功
   {
       "ec": 0,
       "em": "success",
       "timesec": 1578290611,
       "data": {
           "result": true
       }
   }

关闭页面

1.功能说明： 初始化sdk时需要自定义竖屏默认导航样式的返回键时需要将游戏某些页面进行关闭时调用此方法。

2.调用方法： 

  MMSDK.closeWebView()

联系客服

1.功能说明： 游戏内调用此方法可以在游戏内置陌陌客服反馈入口。


2.样式： 

客服页面.png

3.调用方法： 

  MMSDK.gotoService()

一键加群

1.功能说明： 

  1.游戏内置添加陌陌群组功能，如游戏需要引导玩家加入游戏官方群，或对玩家个人建的游戏群进行推荐可接入该功能。
  2.群组展示内容请联系@陌陌运营负责人进行配置。

2.判断是否加入群组 

  /*
   * gid string  群组id由陌陌运营提供
   * callback function  回调函数
   */
  MMSDK.applyToAddGroupStatus(gid, callback)
  // data result true 已经加入群组、 加群申请审核中
  // data result true 未加入
  {
      "ec": 0,
      "em": "success",
      "timesec": 1578290611,
      "data": {
          "result": true
      }
  }

3.申请加入群组 

  /*
   * gid string  群组id由陌陌运营提供
   * callback function  回调函数
   */
  MMSDK.applyToAddGroup(gid, callback)
  // data result true 申请加入群组成功
  // data result true 请求失败 em为失败原因呢
  {
      "ec": 0,
      "em": "success",
      "timesec": 1578290611,
      "data": {
          "result": true
      }
  }

游戏群组

1.功能说明：

  1. 游戏内置添加陌陌群组功能，如游戏需要引导玩家加入游戏官方群，或对玩家个人建的游戏群进行推荐可接入该功能。
  2. 群组展示内容请联系@陌陌运营负责人进行配置。
  3. sdk提供群组列表页面。
  4. 陌陌客户端8.22.2以上版本可以接入。


2.调用方法： 

MMSDK.gotoGroup()

用户数据上报（必须）

1.功能说明：

  1. 进入游戏，用户在真正进入到游戏首页时进行数据上报，陌陌方用于数据统计，同时用于附近玩家功能中玩家身份判断。
  2. 游戏行为，由陌陌运营定义游戏关键行为进行数据上报，陌陌方用于统计游戏关键行为留存。

2.调用方法： 

MMSDK.enterGameStat()  进入游戏
MMSDK.gameActionStat()  游戏行为

自定义上报游戏行为

1.功能说明

  1. 由陌陌运营定义游戏内更为详细的行为进行数据上报，陌陌方用于相关留存统计

2.调用说明 

/*
 * behaviorId string  behaviorId由陌陌运营定义
 */
MMSDK.sendClickStatData(behaviorId)
取自“http://sdkwiki.immomogame.com/index.php?title=Sdk-h5-client&oldid=3338”