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

0.0.1-alpha.13 • Public • Published

接入文档

Package信息

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

npm标签引入

  1. 添加依赖
npm install @alipay-inc/mpaas-mcdp-ali-render
  1. 在小程序源码中的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' // 必传
})
  1. 在引用组件页面的json文件中插入以下代码(根据实际项目路径引入要使用的广告类型),广告类型见下表
{
  "usingComponents": {
    "rotation": "../../miniprogram_npm/@alipay-inc/mpaas-mcdp-ali-render/rotation/rotation"
  }
}
  1. 在使用页面的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"
  ]
}
  1. 在组件标签绑定web-view跳转地址,跳转地址说明见下表
<rotation webviewPath="/pages/webview/webview" mcdpCode="my-code"></rotation>
  1. 在web-view页面wxml文件中插入以下代码
<web-view src="{{url}}"></web-view>
  1. 在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路由地址

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

1

Version

0.0.1-alpha.13

License

MIT

Unpacked Size

1.15 MB

Total Files

27

Last publish

Collaborators

  • geminiwen
  • weijupeng
  • ywy1994
  • stormyray
  • shengyong.zhu
  • liwe.lw