app h5 接口

规范

1、向端发送的格式如下:

data: {
    title: 'new title'
}

所有的数据都在一个对象里,如果有多个参数,会并列传递,或者在一个属性中:

data: {
    sku_info: {
        sku_id: '120001',
        qty: '1000'
        ...
    }
}

2、端返回通用格式如下:

{
    errorcode: 0,
    errorinfo: ''
}

如果请求成功,errorcode为0,如果有返回数据,则数据与errorcode并列:

{
    errorcode: 0,
    errorinfo: '',
    itemList: {
        ...
    }
}

如果请求失败,则errorcode不为0,错误信息在errorinfo中返回:

{
    errorcode: -1,
    errorinfo: '内部错误'
}

一、基础接口

前端调用方法:

  • jsBridge.getUserToken({})
  • jsBridge.getUserInfo({})
  • jsBridge.setUserInfo({})
  • jsBridge.closeWebview({})
  • jsBridge.changeTitle({})

1、回退

要求:

  • 从H5点击进入app能够正常返回
  • 在H5中进行了多次跳转,点击返回时可以逐级返回

2、关闭webview

提供关闭当前webvie的方法,接口信息如下:

// 接口名:webviewClose_bridge
// 返回结果示例:
{
    errorcode: 0,   // 成功时为0,失败时为其他参数
    errorinfo: ''   // 失败时,次数时失败信息
}

2、修改title


// 接口名:webviewChangeTitle_bridge
// 传递参数:
{
    title: 'new title'
}
// 返回结果示例:
{
    errorcode: 0,   // 成功时为0,失败时为其他参数
    errorinfo: ''   // 失败时,次数时失败信息
}

3、获取token

因1.9.1token接口为getUserToken,所以1.9.2以后不变


// 接口名:getUserToken
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: '',
    token: ''   // 用户token
}

4、获取用户信息


// 接口名:getUserInfo_bridge
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: '',
    userInfo: {}
}

5、设置用户信息


// 接口名:setUserInfo_bridge
// 传递数据:
{
    userInfo: {}
}
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: '',
    userInfo: {}
}

二、业务接口

前端调用方法:

  • jsBridge.jumpTo({})
  • jsBridge.setSkuInfo({})
  • jsBrid ge.getSkuInfo({})
  • jsBridge.setAllItemList({})
  • jsBridge.getAllItemList({})

跳转统一接口名:

webviewJumpToNative_bridge

统一返回参数:

{
    errorcode: 0,
    errorinfo: ''
}

1、跳转到指定页面

需要注意的有:

  • ios、android需要的页面参数不同,在传递的时候要带上idactivityId,端个取所需。
  • android端分类页通过tabIndex区分,ios则不需要,接口也都会带上。

1.首页:

{
    "cls": "LSHomeVC",      // for ios 
    "cls": "com.xxx.xxx.ui.activity.MainActivity",
    "extras":{
        "tabIndex": 0       // 0:首页  1:分类  2:购物车 3:我的 
    }
}

2.分类:

{
    "cls": "LSCategoryVC",  // for ios 
    "cls": "com.xxx.xxx.ui.activity.MainActivity",
    "extras":{
        "tabIndex": 1,      // 页面id -- for android 
        "id": "1"           // 分类页分类id -- for ios 
        "catId": "1",       // 分类页分类id -- for android
    }
}

3.购物车:

{
    "cls": "LSCarVC",   // for ios 
    "cls": "com.xxx.xxx.ui.activity.MainActivity",
    "extras":{
        "tabIndex": 2   // 页面id -- for android
    }
}

4.我的:

{
    "cls": "LSMeVC",    // for ios 
    "cls": "com.xxx.xxx.ui.activity.MainActivity",
    "extras":{
        "tabIndex": 3   // 页面id -- for android
    }
}

5.详情页

{
    "cls": "LSGoodsDetailVC", // for  ios
    "cls": "com.xxx.xxx.ui.activity.ProductDetailActivity",
    "extras":{
        "id":"1234" //商品id
    }
}

6.活动页

{
    "cls": "LSActivityVC",  // for ios
    "cls": "com.xxx.xxx.ui.activity.PromotionDetailActivity",
    "extras":{
        "id": "1234",       // for ios 
        "activityId":"1234" // for android
    }
}

7.优惠券:

{
    "cls": "LSCouponVC",    // for ios
    "cls": "com.xxx.xxx.ui.activity.CouponListActivity",
    "extras":{
        "id": "1"           // 现金券 or 优惠券 -- for ios
        "type": "1"         // 现金券 or 优惠券 -- for android
    }
}

8.秒杀:

{
    "cls": "LSSecKillVC", // for ios 
    "cls": "com.xxx.xxx.ui.activity.SeckillActivity",
    "extras":{}
}

详细页面配置如下:

    var androidMainActivity = 'com.xxx.xxx.ui.activity.MainActivity';
    module.exports = {
      // 首页
      home: {
        android: androidMainActivity,
        ios: 'LSHomeVC'
      },
      // 分类页
      category: {
        android: androidMainActivity,
        ios: 'LSCategoryVC'
      },
      // 购物车
      cart: {
        android: androidMainActivity,
        ios: 'LSCarVC'
      },
      // 我的
      my: {
        android: androidMainActivity,
        ios: 'LSMeVC'
      },
      // 详情页
      item: {
        android: 'com.xxx.xxx.ui.activity.ProductDetailActivity',
        ios: 'LSGoodsDetailVC'
      },
      // 秒杀
      seckill: {
        android: 'com.xxx.xxx.ui.activity.SeckillActivity',
        ios: 'LSSecKillVC'
      },
      // 活动
      activity: {
        android: 'com.xxx.xxx.ui.activity.PromotionDetailActivity',
        ios: 'LSActivityVC'
      },
      // 优惠券: id=1、现金券id=2
      coupon: {
        android: 'com.xxx.xxx.ui.activity.CouponListActivity',
        ios: 'LSCouponVC'
      }
}

2、购物车交互

1、获取APP端购物车内所有商品

// 接口名:getAllBuyItemList_bridge
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: '',
    itemList: [
        {
            "sku_id": 117191,
            "qty": 1,
            "tab": "1",
            "selected": "1"
        }
    ]
}

2、设置APP端购物车内所有商品

// 接口名:setAllBuyItemList_bridge
// 传递参数示例:
itemList: [
    {
        "sku_id": "111056",
        "qty": "100",
        "tab": "1",
        "selected": "1",
        "tabName": "常温"
    }
]
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: ''
}

3、读取购物车单个商品

// 接口名:getSkuInfo_bridge
// 传递参数示例:
{
    sku_id: '111056',
    tab: '1'
}
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: '',
    sku_info: {
        "sku_id": "111056",
        "qty": "100",
        "tab": "1",
        "selected": "1"
    }
}

4、写入购物车单个商品

// 接口名:setSkuInfo_bridge
// 传递参数示例:
{
    "sku_id": "111056",
    "tab": "1",
    "qty": '100',
    "selected": '1',
    "tabName": "常温"
}
// 返回结果示例:
{
    errorcode: 0,
    errorinfo: ''
}

3、需要解决的问题

切换账号时,webview没有清楚账户信息,需要app在退出当前账号的时候,清空webview的信息。

已经解决,android与ios,在退出登录是,会清除所有webview数据

4、目前遇到的问题

1、H5加车时需要进行进行判断H5与ios,H5同样也有相应的接口存在,目前是直接操作本地存储。

2、加车时是否要进行验证?如果有验证,是使用线上的统一的验证规则吗?要组织不安全的数据流进APP。

5、android端,在页面刚开始加载就获取数据时,需通过如下方式:

if (window.WebViewJavascriptBridge) {
    //do your work here
} else {
    document.addEventListener(
        'WebViewJavascriptBridgeReady'
        , function() {
          //do your work here
        },
        false
    );
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注