资源位SDK(微信小程序)

集成小程序采集sdk

首先按照官方文档 微信小程序SDK 集成文档,集成小程序采集sdk。集成成功后,可以在微信小程序开发者工具的控制台中看到打印输出 init growingio...。如已集成过小程序采集sdk,此步跳过

查看sdk版本

正确集成小程序sdk后,可以通过在控制台输入 gioGlobal.vdsConfig.sdkVer 查看sdk版本,要使用Banner功能,请确保版本在 3.2.0 之上。

集成小程序Banner

小程序Banner分两种集成方式:
  • 模版渲染
  • 自渲染
bannerKey来源于网页配置

一、模板渲染

适合本身没有Banner组件或者希望全部使用GrowingIO触达Banner的场景。 此种方式集成,sdk提供小程序组件供调用,支持几乎所有小程序swiper属性。

集成方式

原生组件
  1. 1.
    app.json文件中的usingComponents属性中,添加gio-banner组件
    1
    "usingComponents": {
    2
    "gio-banner": "utils/es/components/gio-banner/gio-banner"
    3
    },
    Copied!
  2. 2.
    在需要集成的page页面的wxml文件里,引入gio-banner组件。
3.7.3 版本支持跳转H5 和 第三方小程序,需要添加标签属性h5-page和 env-version
1
// 例:pages/index/index.wxml
2
<gio-banner bannerKey='xxx' h5-page="/pages/webview/index" env-version="release"/>
3
<View>Welcome to GrowingIO</View>
Copied!

H5页面跳转

小程序是无法直接跳转到浏览器的,要实现h5页面的跳转就需要在小程序内提供一个带有webview的承接页来展示h5页面,该页面要用户提供并配置,弹窗和资源位提供新的标签属性h5-page
属性
类型
默认值
说明
h5-page
String
/pages/h5/h5
配置h5页面的承接页
如承接页为: /pages/webview/index,应该如下配置<gio-banner 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
Taro
  1. 1.
    在需要集成的page页面的config配置项里通过usingComponents属性引入组件
  2. 2.
    render方法中使用组件。
1
// 例:pages/index/index.js
2
export default class Index extends Component {
3
config = {
4
navigationBarTitleText: 'GrowingIO',
5
usingComponents: {
6
'gio-banner': 'utils/es/components/gio-banner/gio-banner'
7
}
8
}
9
10
...
11
12
render() {
13
return (
14
<View>
15
<gio-banner bannerKey='xxx' ...props />
16
<View>Welcome to GrowingIO</View>
17
</View>
18
)
19
}
20
}
Copied!
mpvue
  1. 1.
    将sdk文件包解压后放到/src/utils
  2. 2.
    将其中的components目录移动到/static
  3. 3.
    /src/pages/下具体页面的main.json中或/src/app.json中使用usingComponents引入组件
1
{
2
"usingComponents": {
3
"gio-banner": "../static/components/gio-banner/gio-banner"
4
}
5
}
Copied!
4.在具体渲染组件的template中使用,bannerKey来自网页生成,值唯一
1
<template>
2
<div>
3
<gio-banner bannerKey='xxx' />
4
</div>
5
</template>
Copied!

wepy应用(2.0.0以上版本)

在每一个page页面的wpy文件里,引入gio-banner组件(原则上只需要在需要banner的页面引入组件)
1
// 例:pages/index.wpy
2
3
// template
4
<template>
5
<gio-banner bannerKey='xxx' />
6
// ...more
7
</template>
8
9
<config>
10
// usingComponents
11
"usingComponents": {
12
"gio-banner": "../utils/gio-minp/components/gio-banner/gio-banner"
13
}
14
</config>
Copied!

属性参考

属性
类型
含义
bannerKey
String
bannerKey,必填,唯一值
placeholderDrawable
String
默认占位图,建议使用本地图片
errorReplaceDrawable
String
请求出错时的占位图,建议使用本地图片
indicatorDots
Boolean
是否显示面板指示点,默认true
indicatorColor
String
指示点颜色,默认 'rgba(0, 0, 0, .3)'
indicatorActiveColor
String
当前选中的指示点颜色,默认 '#000'
autoplay
Boolean
是否自动切换,默认true
interval
Number
自动切换时间间隔,默认5000ms
duration
Number
滑动动画时长,默认500ms
circular
Boolean
是否采用衔接滑动,默认true
vertical
Boolean
滑动方向是否为纵向,默认false
previousMargin
String
前边距,可用于露出前一项的一小部分,默认 '0px'
nextMargin
String
后边距,可用于露出后一项的一小部分,默认 '0px'
easingFunction
String
动画类型,默认 'default',剩余值参考小程序swiper组件

模板渲染容错处理:

假如没有配置资源位banner也没有设置默认占位图,则隐藏banner区域 假如服务器出错, 会先取缓存里banner的数据,如果没有缓存,会加载用户配置的错误占位图errorReplaceDrawable,如果没有设置错误占位图,会显示空白,所以建议设置好错误占位图。 如果请求图片加载慢的话,可以设置默认占位图placeholderDrawable,作为中间过程显示的图片。

二、自渲染

仅提供数据,适合本身有banner组件,希望在已有的banner组件上添加触达banenr的场景。

集成方式

  1. 1.
    在需要触达banner的页面或者全局usingComponents上,引入触达banner。
    1
    "usingComponents": {
    2
    "gio-banner": "utils/es/components/gio-banner/gio-banner"
    3
    },
    Copied!
  2. 2.
    引入成功后,会在gioGlobal上注册一个函数,接着可以通过调用此函数来异步获取触达banner信息。
    1
    gioGlobal.getBannerMessages(bannerKey).then(data => {
    2
    console.log('触达banner数据', data);
    3
    })
    Copied!

request

后台配置的bannerKey,必填。

response详情

属性
含义
key
bannerKey
name
banner的名称
messages
banner详情

messages详情

属性
含义
id
单张banner的Id
index
单张banner的在后台配置显示的序号
name
单张banner的名称
imageUrl
单张banner的url
summary
单张banner的summary,暂无
onShow
单张banner的显示事件,需要手动调用,调一次会上报一次显示次数
onClick
单张banner的点击事件,需要手动调用,调一次会上报一次点击次数并执行后台配置的操作