接入文档

Package信息

包名：@alipay-inc/mpaas-mcdp-wx-render 类型：公共类库 适用场景：微信小程序 功能简介：支持在微信小程序进行弹屏、公告、轮播（banner）、浮标四种类型的展位投放，和个性化广告投放能力。

npm标签引入

1. 添加依赖

npm install @alipay-inc/mpaas-mcdp-wx-render

2. 在小程序源码中的app.js顶部，插入以下代码，init参数见下表

import McdpView from '@alipay-inc/mpaas-mcdp-wx-render';
McdpView.init({
  appId: 'my-appId', // 必传
  workspaceId: 'my-workspaceId', // 必传
  reportURL: 'my-url' // 必传
  uploadURL: 'my-url' // 必传
})

3. 在引用组件页面的json文件中插入以下代码（根据实际项目路径引入要使用的广告类型），广告类型见下表

{
  "usingComponents": {
    "rotation": "../../miniprogram_npm/@alipay-inc/mpaas-mcdp-wx-render/rotation/rotation"
  }
}

4. 在使用页面的wxml文件中插入以下代码，并绑定对应展位码应用ID

<rotation mcdpCode="my-code"></rotation>

web-view跳转说明

小程序配置跳转地址

因为用户点击广告需跳转h5，为了解决跳转页面符合习惯交互，需要使用者在接入插件的小程序中手动添加web-view页面，如果不添加，请参考小程序不内置跳转地址

1. 在小程序app.js定义web-view路由，并在项目中新建web-view页面

{
  "pages":[
    "pages/index/index",
    "pages/webview/webview"
  ]
}

2. 在组件标签绑定web-view跳转地址，跳转地址说明见下表

<rotation webviewPath="/pages/webview/webview" mcdpCode="my-code"></rotation>

3. 在web-view页面wxml文件中插入以下代码

<web-view src="{{url}}"></web-view>

4. 在web-view页面js文件中插入以下代码

Page({
  data: {
    url: ''
  },
  onLoad(query) {
    this.setData({ url: query.url });
  },
})

小程序不配置跳转地址

小程序不内置跳转地会默认在当前页面打开web-view，右上角有关闭按钮（微信IDE不显示）

配置参数

init配置参数

| 属性名 | 类型 | 必填 | 默认值 | 说明 | 备注 | | ---- | ---- | ---- | ---- | ---- | ---- | | appId | string | 是 | - | 展位应用ID | 获取展位信息必需 | | workspaceId | string | 是 | - | 展位工作控件ID | 获取展位信息必需 | | reportURL | string | 是 | - | 请求路径host | 获取展位信息必需 | | uploadURL | string | 是 | - | 埋点上报数据host | 埋点上报数据必需 |

广告类型配置参数