弹窗SDK（微信小程序）

Search…

弹窗SDK（微信小程序）

参考代码：https://github.com/growingio/minp-marketing-demo​
一. 集成小程序弹窗SDK
1.首先先按照微信小程序SDK集成文档进行微信小程序采集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组件
1
"usingComponents": {
2
  "gio-marketing": "utils/es/components/gio-marketing/gio-marketing"
3
},
Copied!
2. 在每一个page页面的wxml文件里，引入gio-marketing组件
（原则上只需要在需要弹窗的页面引入组件）
3.7.3 版本支持跳转H5 和 第三方小程序，需要添加标签属性h5-page和 env-version
1
// 例：pages/index/index.wxml,   假如H5承接页面为/pages/webview/index
2
​
3
<gio-marketing h5-page="/pages/webview/index" env-version="release"/>
4
<View>Welcome to GrowingIO</View>
Copied!
H5页面跳转
小程序是无法直接跳转到浏览器的，要实现h5页面的跳转就需要在小程序内提供一个带有webview的承接页来展示h5页面，该页面要用户提供并配置，弹窗和资源位提供新的标签属性h5-page。
属性
类型
默认值
说明
h5-page
String
/pages/h5/h5
配置h5页面的承接页
如承接页为: /pages/webview/index，应该如下配置<gio-marketing h5-page="/pages/webview/index" />
承接页示例如下：
1
 // pages/webview/index.js
2
 Page({
3
   /**
4
    * 生命周期函数--监听页面显示
5
    */
6
   onShow: function () {
7
     this.setData({
8
       url: this.options.url
9
     })
10
   }
11
 })
12
 ​
13
 // pages/webview/index.wxml
14
 <view>
15
   <web-view src="{{url}}"></web-view>
16
 </view>
Copied!
注：承接页必须不为tabBar页面。
三方小程序跳转
属性
类型
默认值
说明
env-version
String
release
三方小程序的版本，仅开发测试使用支持：develop, trial, release
​其他疑问见微信小程序文档​
3.2 Taro应用
在每一个page页面的config配置项里通过usingComponents属性引入组件，接着在render方法中使用组件（原则上只需要在需要埋点的页面引入组件）。
1
// 例：pages/index/index.js
2
​
3
export default class Index extends Component {
4
  config = {
5
    navigationBarTitleText: 'GrowingIO',
6
    usingComponents: {
7
      'gio-marketing': 'utils/es/components/gio-marketing/gio-marketing'
8
    }
9
  }
10
  
11
  ...
12
  
13
  render() {
14
    return (
15
      <View>
16
        <gio-marketing />
17
        <View>Welcome to GrowingIO</View>
18
      </View>
19
    )
20
  }
21
}
Copied!
3.3 mpvue应用
1.将SDK文件包解压后放到/src/utils下
2.将其中的components目录移动到/static下
3.在/src/pages/下具体页面的main.json中或/src/app.json中使用usingComponents引入组件
1
{
2
  "usingComponents": {
3
    "gio-marketing": "../static/components/gio-marketing/gio-marketing"
4
  }
5
}
Copied!
4. 在具体渲染组件的template中使用
1
<template>
2
  <div>
3
    <gio-marketing />
4
  </div>
5
</template>
Copied!
​
3.4 wepy应用(2.0.0以上版本)
 在每一个page页面的wpy文件里，引入gio-marketing组件（原则上只需要在需要弹窗的页面引入组件）
1
// 例：pages/index.wpy
2
​
3
// template
4
<template>
5
    <gio-marketing />
6
    // ...more
7
</template>
8
​
9
<config>
10
// usingComponents
11
"usingComponents": {
12
  "gio-marketing": "../utils/gio-minp/components/gio-marketing/gio-marketing"
13
}
14
</config>
Copied!
四. 接入问题排查文档
​遇到集成问题和弹窗未弹出等问题，点击查看文档​
​
五. 弹窗大小说明
  宽度是窗口的80%，高度随内容的高度自动伸缩
​
六. 登陆用户注册至今设置
使用特殊 登陆用户变量，注册至今
需要在代码设置一下登陆用户变量 注册日期 CreateAt，需要保证key 是 CreateAt , 值是YYYYMMDD
SDK 版本3.3.0以上
1
//参考
2
gio('setUser', {'CreateAt':'20200107'})
Copied!
七. 弹窗 埋点事件时机选择

建议放在onShow 后，官网onLoad 有时不触发
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html