zxh-popup 中文文档教程
微信小程序弹窗SDK使用指南
配置安全域名
登录「微信公众平台」在「开发-开发设置-服务器域名」的「request 合法域名」中,增加诸葛域名: https://u.zhugeapi.net
https://ubak.zhugeio.com
注意:如果通过zhuge.load函数修改了默认数据上传地址和popup.usePlugin函数设置了apibaseurl弹窗数据上传地址,则需要将修改后的数据上传地址,设置为安全域名。
诸葛分析 SDK
在使用弹窗 SDK 之前,请确保已经引用了微信小程序 SDK 。详细使用步骤请参照 集成使用帮助文档 微信小程序 SDK (npm地址)
安装sdk
1.在小程序中执行命令安装sdk包
npm install zg-sdk-wechart //小程序sdk
npm install @zgfe/zg-sdk-wechart-popup //小程序弹窗sdk
2.点击开发者工具中的菜单栏:工具 --> 构建 npm。
3.勾选“使用 npm 模块”选项。
引用sdk
首先您需要初始化诸葛分析 SDK,具体可参考:微信小程序 SDK埋点集成使用帮助文档微信小程序 SDK。 诸葛分析 SDK 初始化完成之后,再初始化诸葛弹窗 SDK。参考代码如下:
1.main.js文件头部,引入sdk
import 'zg-sdk-wechart' // 小程序sdk
import '@zgfe/zg-sdk-uniapp-popup/zhuge-wx.popup.min.js' //小程序弹窗sdk
App.zhuge.load('AppKey', {
superProperty: {
'小程序名称': '小程序名称' //使用小程序弹窗sdk需要全局配置小程序名称
},
usePlugin:true,//使用小程序弹窗sdk,需要配置该属性
// load配置参数,具体参考[微信小程序 SDK](https://www.npmjs.com/package/zg-sdk-wechart)
})
//弹窗初始化
//zhuge参数为诸葛sdk对象(必填)
App.popup.usePlugin(App.zhuge,{
AppKey:'AppKey',//必须配置Appkey
// 是否打印 log 日志
show_log: true,
interval_time:600000,// 会话超时时间(默认10分钟),单位:毫秒
// 弹窗 SFO 地址为cep服务器地址
api_base_url: '',
// 弹窗按钮打开链接的小程序页面地址,默认是/pages/webView/index,需要开发者自己开发
webView:"/pages/webView/index",
//监听弹窗的回调
popup_listener:{
/**
* 对弹窗点击事件,绑定事件处理函数
* @param {string} plan_id 活动id
* @param {object} valueObj 弹窗内容对象(在 cep后台 中配置的弹窗内容)
*/
onClick: function(plan_id, valueObj) {
},
/**
* 弹窗关闭结束时,绑定事件处理函数
* @param {string} plan_id 计划ID
*/
onClose(plan_id){
},
/**
* 弹窗加载成功时,绑定的事件处理函数
* @param {string} plan_id 活动id
*/
onLoadSuccess: function(plan_id) {
},
/**
* 弹窗加载失败时,绑定的事件处理函数
* @param {string} plan_id 活动id
* @param {string} code 错误码
* @param {string} message 错误信息
*/
onLoadFailed: function(plan_id, code, message) {
}
}
});
小程序打开web链接的页面
默认配置地址为:/pages/webView/index,需要开发者根据需求开发
实名用户需要调用: zhuge.identify(cuid, props)
如果使用小程序弹窗sdk时,调用 App.zhuge.identify(cuid, props)实名认证的用户,用户属性中需要传入openid和unionid
- cuid \<string> 用户唯一标识
- props \<object> 用户属性
为了保持对用户的跟踪,你需要为他们记录一个识别码,可以使用手机号、email等唯一值来作为用户的识别码。另外,也可以在跟踪用户的时候, 记录用户更多的属性信息,便于你更了解你的用户
使用示例:
App.zhuge.identify('17711111111', {
'openid': 'openid',
'unionid': 'unionid'
})
实现弹窗回调
在使用 App.popup.usePlugin注册弹窗时,可以通过该函数第二个参数的 popuplistener 属性来设置对弹窗的回调监听。popuplistener 对象包含了 4 个回调函数
设置弹窗按钮点击回调
当用户点击弹窗上的按钮、图片或遮罩时,SDK 会触发 onClick 回调方法。
/**
* 对弹窗点击事件,绑定事件处理函数
* @param {string} plan_id 活动id
* @param {object} valueObj 弹窗内容对象(在 cep后台 中配置的弹窗内容)
*/
onClick: function(plan_id, valueObj) {
},
设置弹窗加载成功回调
在弹窗加载成功时,SDK 会调用 onLoadSuccess 回调方法。
/**
* 弹窗加载成功时,绑定的事件处理函数
* @param {string} plan_id 活动id
*/
onLoadSuccess: function(plan_id) {
},
设置弹窗加载失败回调
在弹窗加载失败时,SDK 会调用 onLoadFailed 回调方法。
/**
* 弹窗加载失败时,绑定的事件处理函数
* @param {string} plan_id 活动id
* @param {string} code 错误码
* @param {string} message 错误信息
*/
onLoadFailed: function(plan_id, code, message) {
}
设置弹窗关闭结束回调
在弹窗关闭结束后,SDK 会调用 onClose 回调方法。
/**
* 弹窗关闭结束时,绑定事件处理函数
* @param {string} plan_id 计划ID
*/
onClose(plan_id){
},
目前弹窗内容对象中返回的点击事件类型即:valueObj.type 值有:点击图片元素、点击icon关闭按钮、点击button按钮、点击遮罩层。对应关系如下
序号 | 点击元素类型 | value |
---|---|---|
1 | 点击遮罩层 | mask |
2 | 点击icon关闭按钮 | close |
3 | 点击图片 | img |
4 | 点击button按钮 | button |
目前弹窗内容对象中返回的按钮点击类型即:valueObj.actionType 值有:关闭弹窗、打开链接。对应关系如下
序号 | 类型 | 弹窗响应 | value |
---|---|---|---|
1 | 关闭弹窗 | 点击后弹窗关闭 | close |
2 | 打开链接 | 点击后弹窗关闭 | openlink |
引入弹窗组件
在小程序项目的所有需要渲染弹窗的页面中引入弹窗组件。例如在 index 页面引入:
// index.json
{
"usingComponents": {
"popup-component": "@zgfe/zg-sdk-uniapp-popup/popup-component/popup-component" // 注意组件所在路径
}
}
// index.wxml
<popup-component id="sensors_popup"></popup-component> // 把此组件放在 index.wxml 的页面的任意位置
创建cep画布弹窗
首先在cep智能运营中创建画布,并且“触达方式”为小程序弹窗,发布完成后进行本地开发测试