1 概述

轻电商

快速集成实现电商场景，以更低成本、有效率探索电商合作模式

产品简介

通过轻电商实现商业变现

• 轻电商无须接入SDK, 即可实现电商选品与交易闭环, 快速搭建电商业务
• 轻电商接入不受限于APP, 同时支持微信公众号, 开发者皆能轻松创建电商场景
• 百川优惠券支持轻电商模式, 开发者可轻松对接创造多元化的营销活动

客户价值

• 低成本高效率, 节省集成时间
• 多样式开发, 带来流量和销量
• 丰富营销工具，提升用户粘性

demo演示

demo参考地址：点击查看

2 在页面引入JS-SDK

开发者需要在页面最底部引入以下js-sdk，目前版本号0.1.1。

<script type="text/javascript" src="//g.alicdn.com/mtb/lib-ada/0.1.1/ada.js">
</script>

3 初始化JS-SDK

使用JS-SDK需要先初始化，传入appkey和相关参数作为全局默认参数。

window.BC_SDK = TBSDK_ADA.init ({
  "appkey" : '12234567'， //输入百川应用的appkey
  "openAPP": true,   //SDK中默认为true，可以不设置，设置false，只会拉起H5。
  "backURL": "", //applink的tips的回跳url， 设置能在手机淘宝里面调回你自己应用的url。
  "params":{ } 
})

扩展参数params

pid	淘客参数	百川pid获取方式：点击查看
isv_code	isv业务参数，数字或者英文，16字符之内。	如果传入的这个字段，会在订单成交产生的消息通知里面反馈这个字段。具体使用说明：点击查看文档

特别的，如果你使用的是 webview 的方式来载入含有了百川 JSSDK 的页面，请修改 webview 的 UA 如下格式：

 

WEBVIEW默认UA[空格]AliBaichuan(2014_您的渠道号_您的appKey@baichuan_h5_0.1.1/您的 App 的版本号)

 

其中：

• 渠道号如果不确认，可以传递0
• 请在 webview 默认 UA 或者您已经根据自身需求修改过了的 UA 的尾部增加如上格式

4 使用方法一：JS-API方法

4.1 打开详情页

itemId detail详情

window.BC_SDK.openPage({
    itemId : '521376186545'
})

调用示例

 

function goDetail(e){
    window.BC_SDK.openPage({
        itemId : '532836244145',
        backURL:'tbopen://23261993',//会覆盖初始化init方法中的backURL参数
        params : { } //业务方与百川约定的透传参数，会覆盖初始化init中传入的params
    });
}

效果图：

4.2 打开店铺页

shopId shop店铺

window.BC_SDK.openPage({
    shopId : '33810873'
})
 

调用示例：

function goShop(e){
    window.BC_SDK.openPage({
        shopId : '113782337',
        backURL:'tbopen://23261993', //会覆盖初始化中的backURL参数
        params : { }
    })
}

 

4.3 打开淘客链接

tkUrl 淘客链接sclick

window.BC_SDK.openPage({
    tkUrl : ''
})     

调用示例：

function goTaoke(e){
    window.BC_SDK.openPage({
        tkUrl : '//s.click.taobao.com/tgdYQXx',
        params : { }          
    })
}

 

4.4 打开URL

url 其他

window.BC_SDK.openPage({
    url : ''
})

调用示例：

function goOther(e){
    window.BC_SDK.openPage({
        url : '//pages.tmall.com/wow/act/15933/zhuangban',
        params : { }
    })
}

 

4.5 在天猫中打开

window.BC_SDK.openPage({
    linkKey: 'TM',
    url: ''
})

 

调用示例：

function goOther(e){
    window.BC_SDK.openPage({
        url : '//pages.tmall.com/wow/act/15933/zhuangban',
        linkKey: 'TM',
        params : { },
        callback: function(){
            //如果是通过jsbridge唤起的，则可以在此回调里判断是否成功唤起。
        }
    })
}

5 使用方法二：通过监听a标签点击的方法

data-KEY	是否必传	说明	示例值
data-itemid	可传其中之一	商品ID	532108773369
data-shopid		店铺ID	33810873
data-taoke		淘客链接	//s.click.taobao.com/tgdYQXx
href		淘宝页面url	//www.taobao.com
data-params	可选	扩展字段，必须使用标准json字段。	JSON.stringify([object])
data-type	必传	标注淘宝百川JSDK的系统参数。	tb_bc_jsdk

注：引入js 和初始化步骤必须完成。

 

5.1 打开宝贝详情页

<a href="//m.taobao.com?" data-type="tb_bc_jsdk" data-itemid="532108773369" data-params='{"bc_test":"01"}'>淘宝详情</a>

 

5.2 打开店铺页面

<a href="//m.taobao.com?ttid=00" data-type="tb_bc_jsdk" data-shopid="33810873" data-params='{"bc_test":"02"}'>去淘宝店铺</a>

 

5.3 打开淘客链接

<a href="//m.taobao.com?ttid=00" data-type="tb_bc_jsdk" data-taoke="//s.click.taobao.com/tgdYQXx" data-params='{"bc_test":"0"}'>去淘客短链</a>

 

5.4 打开url

<a href="//www.taobao.com" data-type="tb_bc_jsdk" data-params='{"bc_test":"04"}'>去活动</a>

 

6 补充说明

h5 url 跳转会将扩展参数拼接在跳转的url后面，参数冲突情况，由扩展参数覆盖原url后带的参数，参数进行encode处理。

扩展参数params， 如果单独调用会覆盖全局初始化的值，不单独调用会继承全局初始化的值。

订单消息通知使用说明：点击查看 。

 

7 版本更新

0.1.0

• 删除openTBAPP参数，新增openAPP参数，是否在APP中打开。
• 新增linkKey参数，linkKey: 'TM' 为唤起天猫，linkKey: 'TB' 为唤起手淘。
• jssdk从此版本起会判断是否接入的百川sdk3.1以上版本，对唤起手淘/天猫做优化，如果支持jsbridge功能则用jsbridge去唤起手淘/天猫。

0.1.1

• openPage方法新增forceScheme参数，默认false，如果为true，则在百川环境SDK>3.1时也不使用jsbridge唤起。

 

Q&A

1. 我的app中接入的jssdk，跳转到手淘里，没有出现返回按钮，是什么原因？

答：没有出现返回按钮有可能是appkey与backURL传入的不正确，appkey必须为百川注册的真实appkey，backURL参数需要填写。

 

2. 我的app中接入的jssdk，跳转到手淘里，出现了返回按钮，点击无效，是什么原因？

答：backURL必须在app中注册URL Scheme，格式要求与backURL的scheme相同。例如：

3. 如何判断是否在通过jsbridge唤起的手淘/天猫？

答：唤起app后切换回自己的app或浏览器，如果页面自动跳转到目标页h5，则不是通过jsbridge唤起的app。 纯前端的唤起是通过拼接scheme的方式发送唤起请求，因为无法判断app是否被唤起所以做了一个延迟1~2秒页面会自动跳转的目标h5页面的操作。由于jsbridge是通过Native来唤起的app，所以可以判断是否成功唤起，这个自动跳转的逻辑就不会执行。

 

4. 在我的app中的webview打开商品详情页，点击立即购买显示“接口异常”是什么原因？

答：订单接口依赖H5的localStorage API，没有接入百川SDK并用百川SDK打开详情页进行操作，需要开发者手动开启webview的localStorage支持。

 

5. 为什么在调用openPage方法后，会发起两个请求，第一个是以 tbopen:// 开头的，另外一个是http(https)://的？

答：JS-SDK通过scheme的方式唤起客户端，所以无法知道客户端是否有安装以及是否有被成功唤起，因此在1秒(ios环境为2秒)后默认跳转到h5目标页面。在客户端就会拦截到两个请求。

FAQ

webview的方式来载入 JSSDK 的页面无效