zxh-popup 中文文档教程

Question

微信小程序弹窗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智能运营中创建画布，并且“触达方式”为小程序弹窗，发布完成后进行本地开发测试