小程序接入广告

1.引入npm包

npm install 4pyun-ad-sdk

2.构建

• uni-app框架：小程序自定义组件支持
• 在根目录新建wxcomponents文件夹
• 打开node_modules/4pyun-ad-sdk文件，copy目录中整个src文件到wxcomponents目录下，按需重命名使用
• 目录结构

┌─wxcomponents              微信小程序自定义组件存放目录
│   └──4pyun-ad-sdk      微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
├─main.js
├─App.vue
├─manifest.json
└─pages.json

• 小程序原生：小程序npm支持
• 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用npm模块
• 小程序开发者工具 -> 工具 -> 构建 npm
• 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹

3.使用

• uni-app框架：小程序自定义组件支持
• 找到需要引入广告的页面
• 页面的json文件中做如下配置

//pages.json
{
  "pages": [
    {
      "path": "4pyun-ad-sdk/4pyun-ad-sdk,
      "style": {
          "usingComponents": {
              "4pyun-ad-sdk": "/wxcomponents/4pyun-ad-sdk/index"
          }
      }
    }
  ]
}

1. 在页面中引入该组件

<template>
  <4pyun-ad-sdk 
    space_id="{{space_id}}" 
    openid="{{openid}}"
    app_id="{{app_id}}"
    provider_code="{{provider_code}}"
    personas="{{personas}}"
  >
  </4pyun-ad-sdk>
</template>

<script>
  export default {
    data() {
        return {
            space_id: '',
            openid: '',
            app_id: '',
            provider_code: '',
            personas: {
                mobile: '131xxxxxxxx',
                plate: '粤BAAAAA',
            }
        }
    }
  }
</script>

• 小程序原生
• 找到需要引入广告的页面
• 页面的json文件中做如下配置

// index.json
{
    "usingComponents": {
        "4pyun-ad-sdk": "4pyun-ad-sdk"
    }
}

1. 在页面中引入该组件

// index.wxml

<4pyun-ad-sdk 
  space_id="{{space_id}}" 
  openid="{{openid}}"
  app_id="{{app_id}}"
  provider_code="{{provider_code}}"
  personas="{{personas}}"
>
</4pyun-ad-sdk>

// index.js
data: {
  space_id: '',
  openid: '',
  app_id: ''
  provider_code: '',
  personas: {
    mobile: '131xxxxxxxx',
    plate: '粤BAAAAA',
  }
}

4.参数说明

personas参数说明

5.特殊场景说明

• 跳转webview的情况： 当广告点击后跳转的目标是H5链接的情况下，会跳转到PP停车小程序里的webview打开H5

需要准备的工作：

1. 打开 微信公众平台
2. 登录微信公众平台后，找到 设置-第三方设置 滑到页面下方找到半屏小程序管理-我调用的-添加
3. 输入PP停车的小程序APPID：wxa204074068ad40ef 并添加即可