Kc-hybrid NPM | npm.io

基础业务Hybrid组件

本文档的作用在于说明基础业务Hybrid组件（以下简称Hybrid组件）的使用方式及注意事项，任何人都可以维护此文档，但请确保文档内容正确合理性

Hybrid意为混合，本组件的作用是为了方便前端同学在H5上调用客户端action，建议在v2.4.0版本需求之后，所有端上action调用均采用此组件实现，以便于维护。

1.安装

直接`<script>`标签引入

直接下载并引入打点组件的脚本，会自动根据当前采用的模块加载方式引入打点，如没有采用模块化加载工具，则打点组件将被命名为_kcHybrid并注册到全局变量window下，最新发行版是项目dist目录下的kc-hybrid.min.js。

NPM

本组件已维护在npm官方库中，使用者可以通过npm相关命令进行安装，支持被符合UMD（AMD ，CMD 或 CommonJS 的 require）规范的模块化加载工具所调用。

# 最新稳定版
$ npm install kc-hybrid

2.使用

在成功引入组件脚本之后，即可调用本组件提供的四种action方法。

提供四种action方法是因为app端上目前采用两种实现action交互的方案，分别是消息式交互（msg）和请求式交互（req），
对应2.3以下app版本即"postMessage方法"和"kaochong://kaochong/action 协议请求"，对应2.3及2.3以上版本即"kaochong://kaochong/action "和"kaochong://webviewmessage/action "协议请求（虽然都是协议请求，但还需要在path区分具体方式，因此也可以理解为还是两种方式）， FE需要指定某action具体的交互方式，如果是消息式交互，那么就用组件msg方法调用；如果是请求式交互，那么就用组件req方法调用。
另外两种action方法主要是为了满足不同场景下的action调用需求，比如，如果可以拿到原始参数（即{"action":"courseDetail","extra":{"courseId":"00","vipCourseType":0,"title":"hahaha"}}），就用组件abs方法调用（省去参数解析工作）；如果是端外页面想要跳转到端内后执行req类型（不支持msg类型，理论上不会有端外调用msg类型的场景）的action，就用deepLink方法。

（1）req方法

req方法非常简单，使用者只需要传递被调用action需要的参数即可，如

// script标签引入
let kcHybrid = _kcHybrid;

// 模块加载
import * as kcHybrid from 'kc-hybrid';

kcHybrid.req(
  'courseDetail',         // 指定要调用的action名称
  {                       // 指定该action所需的额外参数，具体参数参见action的文档（即文档中‘extra’代表的参数）
    'courseId': 252,
    'vipCourseType': 1
  },
  function (res) {        // 指定action的执行回调函数，具体参数参见action文档（即文档中‘response’代表的参数）
    // response function
  },
  function (res) {
    // callback function  // 指定action的业务回调函数，具体参数参见action文档（即文档中‘extra.callback’代表的对象）
  }
);

举个例子，在文档中，跳转到课程详情页的action文档可能是这样描述的调用参数:

{
    "action": "courseDetail",
    "response": "response",
    "extra": {
        "courseId": "252"
    }
}

那么我们就该这样使用本组件req方法：

hcHybrid.req('courseDetail', {
  'courseId': '252'
  }, function (res) {
    // response function
  }
);

（2）msg方法

msg方法从使用的角度来说，几乎和req方法一样，如

// script标签引入
let kcHybrid = _kcHybrid;

// 模块加载
import * as kcHybrid from 'kc-hybrid';

kcHybrid.msg('share', {        // 相关参数说明见req
  'url': 'www.kaochong.com',
  'title': '来自考虫的分享',
  'content': '牛叉榜',
  'platformList': [0, 1, 2, 4, 5]
  }, function (res) {
    // response function
  }, function(res) {
    // callback function
  }
);

(3) abs方法

我们考虑到有些情况下，action参数可能是直接由server api传递给fe的，这时我们已经拿到了调用action的原始参数，如果还要再反向解析成本组件req/msg方法要求的那种格式，未免有点画蛇添足，因此决定添加abs方法，以供这种情况下直接调用。 (a)直接传递参数，组件会默认添加kaochong://kaochong 协议前缀，如:

// script标签引入
let kcHybrid = _kcHybrid;

// 模块加载
import * as kcHybrid from 'kc-hybrid';

kcHybrid.abs('{"action":"courseDetail","extra":{"courseId":"00","vipCourseType":0,"title":"test"}}');

(b)传递完整链接地址，如:

let kcHybrid = require('kc-hybrid');

kcHybrid.abs(kaochong://kaochong?action={"action":"link", "extra":{"title":"我的准考证","url":"http://kcapp.rdtest.xuanke.com/exam/card/my.html","needShare":false}});

(4) deepLink方法

此类型用于在普通浏览器内打开端上页面（即端外执行req类型action请求），iOS环境下将通过访问universallinks的方式实现，Android则直接访问kaochong://kaochong 协议，两端均不支持msg类型端外调用(且应该也不会有这种需求场景)。

// script标签引入
let kcHybrid = _kcHybrid;

// 模块加载
import * as kcHybrid from 'kc-hybrid';

kcHybrid.deepLink('courseDetail', {
  'courseId': 252,                 // 指定该action所需的额外参数，具体参数参见具体action的文档
  'vipCourseType': 1
}, function (...res) {             // response 回调（用于得知端上action是否成功调起，部分action支持此参数）
  // this is response function
}, function (...res) {             // callback 回调（用于得知端上action的功能是否成功执行，部分action支持此参数）
  // this is callback fuction
});