@zgfe/zg-sdk-uniapp-popup

v1.0.10

Published

a month ago

诸葛io小程序uniapp弹窗sdk

Downloads

0High
0Medium
0Low

uni-app 弹窗SDK使用指南

配置安全域名

需要在小程序的安全域名设置中，添加诸葛域名为安全域名，默认域名为： https://u.zhugeapi.net

https://ubak.zhugeio.com

https://cep.zhugeio.com

注意：如果通过zhuge.load函数修改了默认数据上传地址和popup.usePlugin函数设置了api_base_url弹窗数据上传地址，则需要将修改后的数据上传地址，设置为安全域名。

诸葛分析 SDK

在使用弹窗 SDK 之前，请确保已经引用了诸葛 SDK。详细使用步骤请参照 uniapp SDK埋点集成使用帮助文档 uniapp SDK（npm地址https://www.npmjs.com/package/zg-sdk-uniapp

安装sdk

1.在小程序中执行命令安装sdk包

npm install --production zg-sdk-uniapp    //小程序sdk
npm install --production @zgfe/zg-sdk-uniapp-popup   //小程序弹窗sdk

引用sdk

首先您需要初始化诸葛分析 SDK，具体可参考：uniapp SDK埋点集成使用帮助文档uniapp SDK（https://docs.zhugeio.com/dev/uniapp.html）。诸葛分析 SDK 初始化完成之后，再初始化诸葛弹窗 SDK。参考代码如下：

1.main.js文件头部，引入sdk

import zhuge from 'zg-sdk-uniapp'  // 小程序sdk
import popup from '@zgfe/zg-sdk-uniapp-popup'  //小程序弹窗sdk
import popupComponent from '@zgfe/zg-sdk-uniapp-popup/components/popup-component/popup-component'  // 小程序弹窗组件
Vue.component('popup-component', popupComponent)  //全局注册组件
Vue.mixin(mixins)
zhuge.load('AppKey', {
// load配置参数，具体参考[uniapp SDK](https://www.npmjs.com/package/zg-sdk-uniapp)
})

//弹窗初始化
//zhuge参数为诸葛sdk对象（必填)
popup.usePlugin(zhuge,{
  // 是否打印 log 日志
  show_log: true,
  interval_time:600000,// 会话超时时间（默认10分钟）,单位：毫秒
  //  弹窗 SFO 地址为当前cep域名
  api_base_url: 'https://cep.zhugeio.com',//必填
  // 弹窗按钮打开链接的小程序页面地址，默认是/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

<template>
<view>
  <web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
  data() {
    return {
      url:""
    }
  },
  onLoad(op){
    this.url=decodeURIComponent(op.url)// 需要decodeURIComponent进行解码
  },
}
</script>

手动拉取计划触达弹窗 this.zhuge.pullPlan()

弹窗sdk及组件注册完成后，默认十分钟拉取弹窗数据实现页面弹窗，如果有其他需求，可以修改会话时间（interval_time属性）增加弹窗响应频率或者手动调用this.zhuge.pullPlan()，实现实时弹窗响应。

强制拉取小程序弹窗方法：this.zhuge.pullPlan()

实名用户需要调用: this.zhuge.identify(cuid, props)

如果使用小程序弹窗sdk时，调用 zhuge.identify(cuid, props)实名认证的用户，用户属性中需要传入openid、unionid、微信小程序，具体方法使用参考uniapp SDK（https://docs.zhugeio.com/dev/uniapp.html）

cuid <string> 用户唯一标识
props <object> 用户属性

为了保持对用户的跟踪，你需要为他们记录一个识别码，可以使用手机号、email等唯一值来作为用户的识别码。另外，也可以在跟踪用户的时候，记录用户更多的属性信息，便于你更了解你的用户
使用示例：

this.zhuge.identify(cuid, {
  'openId': openId,//必填
  'unionId': unionId,//非必填
  '微信小程序'：小程序名称//必填 key值为，微信小程序、百度小程序、支付宝小程序、Android应用、iOS应用等。根据unapp最终打包的结果key取值不同,value值为名称(如果为小程序名称则取小程序名称，如果为Android应用、iOS应用则取应用名称)
})

实现弹窗回调

在使用 popup.usePlugin注册弹窗时，可以通过该函数第二个参数的 popup_listener 属性来设置对弹窗的回调监听。popup_listener 对象包含了 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 | | 3 | 跳转当前小程序 | 点击后弹窗关闭，打开当前小程序指定路径 | navigateTo | | 4 | 跳转其他小程序 | 点击后弹窗关闭，打开其他小程序指定路径 | navigateToMiniProgram |

引入弹窗组件

在小程序项目的所有需要渲染弹窗的页面中引入弹窗组件。例如在 index 页面引入：

main.js引入弹窗组件

  import popupComponent from '@zgfe/zg-sdk-uniapp-popup/components/popup-component/popup-component'  // 小程序弹窗组件路径
  Vue.component('popup-component', popupComponent)  //全局注册组件

在 index 页面使用组件

// index.vue
<popup-component id="zhuge_cep_popup"></popup-component>  // 把此组件放在 index.vue 的页面的任意位置

创建cep画布弹窗

首先在cep智能运营中创建画布，并且“触达方式”为小程序弹窗，发布完成后进行本地开发测试