Hybrid交互文档

在当前业务环境中,部分页面采取了和原生APP交互,调用原生方法的方式提高页面体验或实现某些业务功能;本篇文档规范方法命名方法,并整理当前业务环境中H5页面和原生交互的方法;在后期开发中,如有采用jsBridge的方式进行调用的,需要在开发完成后在本文档中进行整理记录,方便团队维护。

Hybrid交互方法命名规范

命名格式:[appName +] c/r + _action [+ _noun + ios/android] 其中 c/r_action为必选项 示例:c_sharesjc_redirect_talentUser

格式说明

  1. 【选填】appName为app名称的简写,尚妆app为sj,购给利app为ggl;若为两个APP通用的方法(例:返回上级页面c_back和调用原生分享c_share)则省略该字段
  2. c/r分别代表了callHandlerregisterHandler方法,其中callHandler为H5页面调用APP方法,registerHandler为APP调用H5方法
  3. _action为调用方法的动作名称(一个单词),action的命名必须能体现方法的功能(常用action将在后面说明)
  4. 【选填】_noun在调用某些方法仅采用动作说明不能很好描述方法时,可以添加名词进行辅助描述(小驼峰命名法):sj_redireact_talentTalkIndex
  5. 【选填】ios/android如果该方法为ios或android专用方法,请在方法后面添加ios/android以视区别

针对action的命名说明

常用的action方法命名如下:

  1. share : 调用H5/APP分享接口
  2. redirect : 重定向原生页面(说明:如果是H5页面之间的跳转,不采用这种交互的方式进行,直接进行a标签跳转即可)
  3. component : 调用APP组件库组件
  4. send : 向APP传递内容
  5. receive : 获取APP传递的内容
  6. openH5: 打开新的H5页面

TODO:

  1. 开发H5在APP中的公共头
  2. wxShareInfo(r_share)方法将返回的userId去除
  3. 搭建组件库
  4. 下拉加载技术尝试

当前交互方法整理

尚妆APP与购给利APP公用交互方法

c_share(callShare)

  • 功能描述:H5页面调用尚妆APP原生分享按钮
  • 无返回内容
  • 传递内容:
    1. 分享图片:shareImg
    2. 分享标题:shareTitle
    3. 分享链接:shareUrl
    4. 分享内容:shareContent
  • 使用示例
$.JSBridge.callHandler('callShare', {
'shareUrl': $('.j_share-url').val(),  
'shareImgs': 'http://cdn1.showjoy.com/images/6d/6de0aaa43bb041ec86707d9fe91c561a.jpg',  
'shareTitle': '达人说,能赚钱的巨型种草机',  
'shareContent': '我已在达人说赚取了' + $('.j_total').text() + '元!达人说,不止可以种草还能赚钱'  
}, function(){});

r_share(wxShareInfo)

  • 功能描述:APP获取H5页面分享文案
  • 返回内容:userId
  • 传递内容:
    1. 分享图片:imgUrl
    2. 分享标题:desc
    3. 分享链接:link
  • 使用示例
$.JSBridge.registerHandler('wxShareInfo', {
'desc': '达人说,能赚钱的巨型种草机',  
'link': $('.j_share-url').val(),  
'imgUrl': 'http://cdn1.showjoy.com/images/6d/6de0aaa43bb041ec86707d9fe91c561a.jpg'  
}, function(){});

c_redirect(推荐使用单独命名的方法来操作,此方法在IOS上存在问题)

  • 功能描述:H5页面调用APP原生页面
  • 无返回内容
  • 传递内容:
    1. 原生页面名称:pageName
  • 使用示例
$.JSBridge.callHandler('c_redirect', {
    pageName: "talentUser"
}, function(){});
  • 当前原生页面跳转PageName列表:
    1. 达人个人原生主页:pageName: 'talentUser'
    2. 达人团开团列表页面:pageName: 'openGroupList'
    3. 达人团开团编辑页面:pageName: 'openGroup'
    4. 达人说首页:pageName: 'talentTalkIndex'
    5. 登陆页面:pageName: 'login'

c_back

  • 功能描述:H5页面调用APP原生返回
  • 无返回内容
  • 无传递内容
  • 使用示例
$.JSBridge.callHandler('c_back', {}, function(){});

c_clean

  • 功能描述:H5页面调用APP缓存清除
  • 无返回内容
  • 传递内容:
    1. 原生页面名称:pageName
  • 使用示例
$.JSBridge.callHandler('c_clean', {}, function(){});

c_openH5

  • 功能描述:打开新的H5页面
  • 无返回内容
  • 传递内容:
    1. url 需要在app中新tab形式打开的H5页面
  • 使用示例
$.JSBridge.callHandler('c_openH5', {
        url: $(this).url,
      }, function () { });

尚妆APP交互方法

sjc_comment_talentTalk

  • 功能描述:达人团评论他人评论,调用原生评论输入框
  • 无返回内容
  • 传递内容:
    1. 原评论id:commentId
    2. 原评论人userid:userId
    3. 原评论人名称:userName
  • 使用示例
$.JSBridge.callHandler('sjc_comment_talentTalk', {
    commentId: $commentBox.data('commentid'),
    userId: $commentBox.data('userid'),
    userName: $commentBox.data('username')
}, function () { });

c_redirect_talentTalkComment

  • 功能描述:跳转原生大人说帖子更多评论页面
  • 无返回内容
  • 传递内容:
    1. 总评论数量:commentNum
    2. 帖子id:postId
  • 使用示例
$.JSBridge.callHandler('c_redirect_talentTalkComment', {
  commentNum: $(_this).data('commentnum'),
  postId: GetQueryString('id')
}, function () { });

sjc_redirect_talentGroupDetail

  • 功能描述:跳转达人团详情页面(H5页面)
  • 无返回内容
  • 传递内容:
    1. 跳转的页面链接:url
    2. 达人团帖子关联的商品id:skuId
    3. 达人团帖子的id:postId
  • 使用示例
$.JSBridge.callHandler('sjc_redirect_talentGroupDetail', {
  url: 'http://expert.m.showjoy' + suffix + '/expert/groupon/detail?id=' + $(_this).data('postid'),
  skuId: $(_this).data('skuid'),
  postId: $(_this).data('postid')
}, function () { });

sjc_send_tanlentGroupStatus

  • 功能描述:传递达人团帖子详情页面状态
  • 无返回内容
  • 传递内容:
    1. 当前达人团帖子状态:status
  • 使用示例
$.JSBridge.callHandler('sjc_send_tanlentGroupStatus', {
    status: postStatus
}, function () {});

sjc_addCart

  • 功能描述:添加达人团商品到购物车
  • 无返回内容
  • 传递内容:
    1. 达人团商品Id:skuId
    2. 达人团帖子Id:postId
  • 使用示例
$.JSBridge.callHandler('sjc_addCart', {
    skuId: $(self).data('skuid'),
    postId: $(self).data('postid')
}, function () {});

sjc_redirect_talentCashRule

  • 功能描述:跳转达人说提现说明页面
  • 无返回内容
  • 传递内容:
    1. 说明页面链接:url
  • 使用示例
$.JSBridge.callHandler('sjc_redirect_talentCashRule', {
    url: 'http://market.m.showjoy.com/activity/ctopic/40730.html'
}, function () { });

sjc_cash

  • 功能描述:达人说提现
  • 无返回内容
  • 传递内容:
    1. 用户Id:userId
  • 使用示例
$.JSBridge.callHandler('sjc_cash', {
    userId: GetQueryString('userId'),
}, function () { });

callComponentToast(sjc_component_toast)

  • 功能描述:调用黑底半透明提示框
  • 无返回内容
  • 传递内容:
    1. 类型:toast
    2. 内容:desc
    3. 淡出时间:timeout
  • 使用示例
$.JSBridge.callHandler('callComponentToast', {
  "type": "toast",
  "desc": "we're loading...",
  "timeout": "2000"
}, function(){});

sjr_receive_comment

  • 功能描述:达人团帖子详情获取评论
  • 返回内容:comment对象(包含评论内容、评论人信息等)
  • 无传递内容
  • 使用示例
$.JSBridge.registerHandler('sjr_receive_comment', function (comment) {
    if (globalConfig.Browser.versions.showjoyiOS) {
      var commentObj = JSON.parse(comment);
    } else {
      var commentObj = JSON.parse(JSON.stringify(comment));
    }

    if (commentObj.isReply === '1') {
      var commentStr = '<div class="user">' +
        '<img class="avatar j_Avatar" src="' + commentObj.userPic + '" data-userid="' + commentObj.userId + '" data-username="' + commentObj.userName + '">' +
        '<span class="user-name">' + commentObj.userName + '</span>' +
        '<span class="reply">回复</span>' +
        '<span class="user-name">' + self.commentUserName + '</span>' + '</div>' +
        '<div class="content-box j_ContentBox" data-commentid="' + commentObj.toCommentId + '" data-userid="' + commentObj.userId + '">' +
        '<p class="content">' + commentObj.content + '</p>' +
        '<p class="line"></p>' +
        '</div>';
      $('.j_CommentList').prepend(commentStr);
      self.commentsNum++;
      $('.j_Num').text('(' + self.commentsNum + ')');
      $('.j_MoreLink').attr('data-commentnum', self.commentsNum);
    } else {
      var commentStr = '<div class="user">' +
        '<img class="avatar j_Avatar" src="' + commentObj.userPic + '" data-userid="' + commentObj.userId + '" data-username="' + commentObj.userName + '">' +
        '<span class="user-name">' + commentObj.userName + '</span>' +
        '</div>' +
        '<div class="content-box">' +
        '<p class="content">' + commentObj.content + '</p>' +
        '<p class="line"></p>' +
        '</div>';
      $('.j_CommentList').prepend(commentStr);
      self.commentsNum++;
      $('.j_Num').text('(' + self.commentsNum + ')');
      $('.j_MoreLink').attr('data-commentnum', self.commentsNum);
    }
  });

sjc_component_textarea

  • 功能描述:达人团调用原生评论输入框
  • 无返回内容
  • 无传递内容
  • 使用示例
$.JSBridge.callHandler('sjc_component_textarea', {}, function () { });

sjc_send_singleGrouponPrice

  • 功能描述:达人团页面获得底部的达人团价格单独购价格
  • 无返回内容
  • 传递内容:
    1. grouponPrice 达人团价格
    2. singlePrice 单独购价格
  • 使用示例
$.JSBridge.callHandler('sjc_send_singleGrouponPrice', {
        grouponPrice: $('.j_GrouponPriceHidden').val(),
        singlePrice: $('.j_SinglePriceHidden').val()
      }, function () { });

购给利APP交互方法

悟空

前端开发码农一枚,爱摄影,爱旅游