@alipay-inc/mpaas-mcdp-miniapp-render

接入文档

Package信息

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

npm标签引入

1. 添加依赖

npm install @alipay-inc/mpaas-mcdp-ali-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-ali-render/rotation/rotation"
  }
}

4. 在使用页面的axml文件中插入以下代码，并绑定对应展位码应用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	埋点上报数据必需

广告类型配置参数

广告类型	属性名	类型	必填	默认值	说明	备注
rotation (轮播)	mcdpCode	string	是	-	展位码应用ID	获取展位信息必需
	webviewPath	string	否	-	跳转web-view	小程序内定义webview路由地址
buoy (浮标)	mcdpCode	string	是	-	展位码应用ID	获取展位信息必需
	webviewPath	string	否	-	跳转web-view	小程序内定义webview路由地址
notice (公告)	mcdpCode	string	是	-	展位码应用ID	获取展位信息必需
	webviewPath	string	否	-	跳转web-view	小程序内定义webview路由地址
banner (弹屏)	mcdpCode	string	是	-	展位码应用ID	获取展位信息必需
	webviewPath	string	否	-	跳转web-view	小程序内定义webview路由地址