第一歩：拥有支付宝小程序

要在您的小程序内接入淘宝联盟营销套件功能前，您需要首先完成 开发者入驻 并 创建小程序。

如果已经拥有支付宝小程序，请获取小程序APPID并记录好，获取APPID链接：https://developers.alipay.com/platform/developerIndex.htm

如图：

第二歩：支付宝能力中心订购插件

插件订购地址

必订购插件「百川官方投放能力插件插件」并绑定你的支付宝小程序应用，https://nengli.alipay.com/abilityprod/detail?abilityCode=PL002020051700010297

• Banner插件：https://app.alipay.com/abilityprod/detail?abilityCode=PL002020051700010296

• 标签导航插件 https://app.alipay.com/abilityprod/detail?abilityCode=PL002020051500010265

• 浮标插件：https://app.alipay.com/abilityprod/detail?abilityCode=PL002020051700010283

• 弹窗插件：https://app.alipay.com/abilityprod/detail?abilityCode=PL002020051700010313

• 搜索插件：https://nengli.alipay.com/abilityprod/detail?abilityCode=PL002020071500012669

• 搜索返利插件：https://app.alipay.com/abilityprod/detail?abilityCode=PL002020081800013897

• 行业锁佣插件-每日精选：https://nengli.alipay.com/abilityprod/detail?abilityCode=PL002020092700015277【此插件定向邀约，联盟账户日均引流uv>5w，可以联系运营申请】

以 “授权”插件为例：

1、订购插件

2、绑定应用

第三歩：激活插件并入驻淘宝联盟备案

1、激活淘宝联盟插件

2、绑定淘宝开发者主账户（淘宝开发者账户同淘宝联盟账户，入驻门槛详见：淘宝客入驻条件）

3、入驻淘宝开发者，如果淘宝开发者主账户还不是淘宝开发者需要入驻（已经是淘宝开发者账户忽略此步骤）。

4、入驻成功后返回上一步重新激活淘宝联盟插件。账户绑定，注意：淘宝开发者主账户和支付宝小程序开发者主账户绑定，不要搞错。没有解绑流程！不要搞错。没有解绑流程！不要搞错。没有解绑流程！

5、绑定成功，进入备案

授权绑定成功后，点击【前往备案】进入淘宝联盟备案页面，支付宝小程序名称、APPID、简介自动填充，无需重复填写：按备案信息提示认真填写信息。

填写完成后进入淘宝联盟风控自动审核，审核成功后点击【继续订购】进入下一步：

第四歩：百川套件申请&配置&发布

1、点击【申请】按钮进行百川套件申请：

填写申请理由：格式

支付宝小程序应用全称，dau，联盟pubid（账号id，如下图），媒体名称，联系人，电话，申请原因。

案例：播客，1w，123456，淘宝联盟，张三，12345678901，申请淘宝联盟支付宝营销套件用于小程序电商购物变现。

【注意】页面类型，必须勾选默认，如图：

2、权限申请成功后，点击套件页面上的【我的套件】，进行套件配置，如图：

新增版本或修改现有配置

进入套件-插件配置页。点击【默认】，进入插件插件配置页，如图：

以（联盟icon导航插件）配置为例：

1、本插件推广位：需要为插件在联盟后台创建一个插件新的pid，注意不要用错！

2、第二至第五的素材信息需要媒体自行配置，如果官方给了默认配置，媒体可自行替换，如果没给默认配置，媒体需要自行转推广链接（媒体配置链接前一定做下单测试追踪）

如图：

3、配置完成后，提交发布。

如图：

审核状态查看如图：

通过后，发布状态为【已发布】插件配置才正式生效

第五歩：开始开发，嵌入插件代码

请务必升级小程序开发者工具到 v1.12 beta 以上！（去升级）

按照以下文档，在小程序代码中添加插件的配置参数，详情请参考插件使用。

使用

npm install miniapp-bc-user -S

方法

方法	说明
loadBC	加载百川官方插件 loadBC(): Promise<{success:boolean}> 异步方法，加载成功返回{ success:true }

组件

<bc-module />

属性

属性	说明
code	模块code	具体值参见下表
name	区块名	具体值参见下表
onError	错误事件，当组件发生错误时触发

Code 列表

插件名称	code(模块 code)	name(区块名称)	参数
Banner插件	suite://bc.suite.union618/bc.template.banner	block-banner
标签导航插件	suite://bc.suite.union618/bc.template.nav	block-nav
弹窗插件	suite://bc.suite.union618/bc.template.dialog	block-dialog	type: 'static' // 固定模式，默认为空即弹窗模式
浮标插件	suite://bc.suite.union618/bc.template.icon	block-icon
搜索插件	suite://bc.suite.union_search/bc.template.searchbox	block-searchbox
搜索返利插件	suite://bc.suite.etaoMarketing/bc.template.rebate.search	block-etao-searchbox
行业锁佣插件-每日精选	suite://bc.suite.choiceness/bc.template.choiceness	block-choiceness	pluginOptions: { pageSize: 10, // 每页个数，可选，默认 10 maxPageNum: 5, // 最大页数，可选，默认加载所有数据 relationId: '', // 配置 relationId },

DEMO

// Page.jsimport { loadBC } from 'miniapp-bc-user'Page({ data:{ showComponent:false }, async onReady(){ try { await loadBC(); this.setData({ showComponent: true }) } catch(e) {} }, bcError(err){ console.log('err:',err) }, /*----以下是行业锁佣插件-每日精选专用代码--其他对接请忽略--*/ // 每日精选插件 // 监听页面滚动到底部，加载更多 onReachBottom() { this.setData({ loadMoreTime: (this.data.loadMoreTime || 0) + 1 }) }, /*----以上是行业锁佣插件-每日精选专用代码--其他对接请忽略--*/})

// Page.axml<view class="page"> <bc-module a:if="{{ showComponent }}" code="suite://bc.suite.union618/bc.template.nav" // 示例，注意前后不要有空格 name="block-nav" // 示例，注意前后不要有空格 onError="bcError" /*----以下是行业锁佣插件-每日精选专用代码--其他对接请忽略--*/ ext="{{ pluginOptions, loadMoreTime }}" /*----以上是行业锁佣插件-每日精选专用代码--其他对接请忽略--*//></view>

// Page.json，引入 bc-module 加载插件{ "usingComponents": { "bc-module": "miniapp-bc-user/es/bc-module/bc-module" }}

// app.json 声明使用插件动态加载方式{ "useDynamicPlugins": true}

开发者工具控制台会打印出相关信息，可以检查一下和百川后台配置的 pid 是否一致。

恭喜

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 yubaibai360@qq.com 举报，一经查实，本站将立刻删除。