运营平台使用指南
  • 产品简介
  • 快速上手 - App
  • 快速上手 - Web
  • 快速上手 - H5
  • 快速上手 - 小程序
  • 开发者文档
    • Webhook 通道对接
    • SDK集成
      • SDK更新日志
      • iOS SDK
        • iOS SDK 概述
        • 弹窗 SDK(iOS)
        • 推送 SDK(iOS)
        • 资源位 SDK(iOS)
        • 集成后调试指南
        • 常见问题
        • iOS 推送证书设置指南
        • iOS推送1.3.2及以前推送版本升级指导
        • iOS SDK 1.1.2及以下旧版本升级指导
      • Android SDK
        • 弹窗 SDK (Android)
        • 推送 SDK(Android)
        • 资源位 SDK(Android)
      • Flutter SDK
        • 弹窗 SDK(Flutter)
      • RN SDK
        • 弹窗 SDK( RN)
      • 小程序SDK
        • 弹窗SDK(微信小程序)
        • 资源位SDK(微信小程序)
        • 调试指南(小程序)
        • 小程序获取设备访问ID
        • 弹窗SDK(支付宝小程序)
        • 小程序集成常见问题
      • Web弹窗SDK
      • H5弹窗SDK
    • 厂商通道
      • 华为推送通道集成指南
      • 小米推送通道集成指南
      • 魅族推送通道集成指南
      • vivo推送通道集成指南
      • OPPO推送通道集成指南
    • API参考
      • 弹窗API
      • 推送API
  • 产品使用文档
    • 权限配置
    • 弹窗
      • 创建弹窗
      • 弹窗数据
      • 弹窗管理
      • A/B测试
    • 资源位
      • 创建资源位
      • 轮播图设置
      • 资源位数据
    • 推送
      • 概述
      • 推送准备
      • 创建推送
      • 推送数据
    • 短信
      • 阿里云短信
      • 云片短信
      • 创蓝短信
    • Webhook
    • 用户分层
    • 流程画布
      • 流程画布核心功能
      • ABtest
  • FAQ
    • 弹窗 FAQ
    • 推送(Push) FAQ
    • 术语解释
Powered by GitBook
On this page
  • 一. 集成小程序弹窗SDK
  • 二. 平台创建微信小程序SDK消息
  • 三. 使用微信小程序SDK组件
  • 3.1 原生小程序应用
  • 3.2 Taro应用
  • 3.3 mpvue应用
  • 3.4 wepy应用(2.0.0以上版本)
  • 四. 接入问题排查文档
  • 五. 弹窗大小说明
  • 六. 登陆用户注册至今设置
  • 七. 弹窗 埋点事件时机选择

Was this helpful?

  1. 开发者文档
  2. SDK集成
  3. 小程序SDK

弹窗SDK(微信小程序)

Previous小程序SDKNext资源位SDK(微信小程序)

Last updated 3 years ago

Was this helpful?

参考代码:

一. 集成小程序弹窗SDK

  1. 首先先按照进行微信小程序采集SDK的集成。(如已集成采集SDK则跳过此步)

  2. 登陆微信小程序后台,进入配置

    打开开发设置,到服务器域名配置部分

    在request合法域名中添加:https://messages.growingio.com downloadFile请求合法域名列表中添加:https://statics.growingio.com和https://growing-statics-public.cn-bj.ufileos.com

域名必须设置,否则线上不会弹窗

二. 平台创建微信小程序SDK消息

进入GrowingIO官网 -> 用户运营,点击左上角的新建按钮,选择弹窗,然后选择小程序,即可进入微信小程序的弹窗配置页面

根据您的需要,选择对应的产品、触发时机、触发次数、图片素材、点击事件后、上线时间、停止时间后,保存上线即可。

三. 使用微信小程序SDK组件

这里以原生小程序应用与Taro应用为例,其余微信小程序框架可参考对应框架对于小程序原生组件的使用方式。如果是第一次集成小程序SDK,建议下载最新GIOSDK全量替换。

3.1 原生小程序应用

1. 在app.json文件中的usingComponents属性中,添加gio-marketing组件

"usingComponents": {
  "gio-marketing": "utils/es/components/gio-marketing/gio-marketing"
},

2. 在每一个page页面的wxml文件里,引入gio-marketing组件

(原则上只需要在需要弹窗的页面引入组件)

3.7.3 版本支持跳转H5 和 第三方小程序,需要添加标签属性h5-page和 env-version

// 例:pages/index/index.wxml,   假如H5承接页面为/pages/webview/index

<gio-marketing h5-page="/pages/webview/index" env-version="release"/>
<View>Welcome to GrowingIO</View>

H5页面跳转

小程序是无法直接跳转到浏览器的,要实现h5页面的跳转就需要在小程序内提供一个带有webview的承接页来展示h5页面,该页面要用户提供并配置,弹窗和资源位提供新的标签属性h5-page。

属性

类型

默认值

说明

h5-page

String

/pages/h5/h5

配置h5页面的承接页

如承接页为: /pages/webview/index,应该如下配置<gio-marketing h5-page="/pages/webview/index" />

承接页示例如下:

 // pages/webview/index.js
 Page({
   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
     this.setData({
       url: this.options.url
     })
   }
 })
 ​
 // pages/webview/index.wxml
 <view>
   <web-view src="{{url}}"></web-view>
 </view>

注:承接页必须不为tabBar页面。

三方小程序跳转

属性

类型

默认值

说明

env-version

String

release

三方小程序的版本,仅开发测试使用支持:develop, trial, release

3.2 Taro应用

在每一个page页面的config配置项里通过usingComponents属性引入组件,接着在render方法中使用组件(原则上只需要在需要埋点的页面引入组件)。

// 例:pages/index/index.js

export default class Index extends Component {
  config = {
    navigationBarTitleText: 'GrowingIO',
    usingComponents: {
      'gio-marketing': 'utils/es/components/gio-marketing/gio-marketing'
    }
  }
  
  ...
  
  render() {
    return (
      <View>
        <gio-marketing />
        <View>Welcome to GrowingIO</View>
      </View>
    )
  }
}

3.3 mpvue应用

  1. 将SDK文件包解压后放到/src/utils下

  2. 将其中的components目录移动到/static下

  3. 在/src/pages/下具体页面的main.json中或/src/app.json中使用usingComponents引入组件

{
  "usingComponents": {
    "gio-marketing": "../static/components/gio-marketing/gio-marketing"
  }
}

4. 在具体渲染组件的template中使用

<template>
  <div>
    <gio-marketing />
  </div>
</template>

3.4 wepy应用(2.0.0以上版本)

在每一个page页面的wpy文件里,引入gio-marketing组件(原则上只需要在需要弹窗的页面引入组件)

// 例:pages/index.wpy

// template
<template>
    <gio-marketing />
    // ...more
</template>

<config>
// usingComponents
"usingComponents": {
  "gio-marketing": "../utils/gio-minp/components/gio-marketing/gio-marketing"
}
</config>

四. 接入问题排查文档

五. 弹窗大小说明

宽度是窗口的80%,高度随内容的高度自动伸缩

六. 登陆用户注册至今设置

使用特殊 登陆用户变量,注册至今 需要在代码设置一下登陆用户变量 注册日期 CreateAt,需要保证key 是 CreateAt , 值是YYYYMMDD SDK 版本3.3.0以上

//参考
gio('setUser', {'CreateAt':'20200107'})

七. 弹窗 埋点事件时机选择

建议放在onShow 后,官网onLoad 有时不触发

遇到集成问题和弹窗未弹出等问题,点击查看文档
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
其他疑问见微信小程序文档
https://github.com/growingio/minp-marketing-demo
微信小程序SDK集成文档