X-SDK uniapp集成

App中集成X-SDK

目前浩客提供了uts的插件,用于在android 和 ios两个的嵌入使用。

Step 1: 引入uts插件

import * as Howxm from "@/uni_modules/howxm-xsdk";

Step 2:初始化sdk

注意: 由于uts插件在android和ios引入是一套代码,但在浩客平台上的应用是按系统分开的,所以需要在浩客后台创建两个应用,在代码中根据运行时不同平台来设置不同的appId和campaignId, 参考下面代码:

data() {
        return {    
            appId: '',
            campaignId: ''
        }
    },
onReady() {
    const platform = uni.getDeviceInfo().platform
    //需要在howxm.com后台分别创建两个应用,一个ios,一个android的,然后获取appId和campaignId
    if(platform === 'ios'){
        this.appId = '自行获取'
        this.campaignId = '自行获取'
    }else if(platform === 'android'){
        this.appId = '自行获取'
        this.campaignId = '自行获取'
    }

    Howxm.initializeSDK(this.appId, {
        success: function() {
        },
        fail: function() {
        },
    })
},

接口能力

1. identify 用户身份信息传递

Howxm.identify({
        uid: "test_u002", //用户uid,必填项
        name: "haha", //用户姓名,选填
        email: "",//邮箱,选填
        mobile: "",//手机号,选填
        attrs:{ //客户其他属性,选填
            u_vip: 10,
            u_login_at: new Date().toISOString()
        }
    })

2. checkOpen 弹出策略检查接口

Howxm.checkOpen(this.campaignId, "当前用户的uid", {
            success: function() {
            },
            fail: function() {
            },
        })

3. open 弹出问卷接口

Howxm.open(this.campaignId, {
                    uid: 'uid',
                    //..其他属性
                    attrs:{
                        u_vip: 11,
                        u_tag: '666'
                    }
                }, { //open问卷的时候,还可以设置额外的参数
                    value:{
                        'c1':'001'
                    }
                })

4. event 抛出事件接口

Howxm.event("eventCode",{
                    value:{ //触发事件时候的额外属性
                        "attr_1":"aaa"
                    }
                })

小程序中集成X-SDK

参考文档:https://uniapp.dcloud.net.cn/tutorial/mp-weixin-plugin.html#import-mp-plugin 浩客官方示例源码:https://github.com/howxm/howxm-uniapp-wechat-miniprogram-demo

Step 1: 在 uniapp工程的manifest.json中,找到"mp-weixin"节点,新增:

"plugins":{
    "howxm-plugin": {
        "version": "2.0.1",// 版本号建议使用 https://howxm.com/help/articles/x-sdk-miniapp 中最新版本
         "provider": "wx37a782d0c8107a02"
      }
 }  

Step 2:在项目中引用浩客小程序插件

1. 在App.vue中,onShow的时候进行sdk的初始化

onShow: function() {
    console.log('App Show')
    const howxm = requirePlugin('howxm-plugin') //引入浩客sdk
    howxm.debug(true) //开启debug模式
    howxm.init( //进行初始化
      'your app id',
      {},
      function (data) {
        console.log("init success:",data)
      },
      function (err) {
        // 失败回调
      }
    )
},

!注意: 这里强烈建议放在 onShow 方法中,以保证SDK正常工作!

2. 在需要使用到浩客插件的页面进行引入(以页面 pages/index/index 为例):

  • 2.1 在pages.json中新增:
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "mp-weixin": {
          "usingComponents": {
            "howxm-widget": "plugin://howxm-plugin/howxm-widget"
          }
        }
      }
    }
  ]
}
  • 2.2 在 pages/index/index页面中还需要手动添加如下代码: <howxm-widget path="/pages/index/index" />

放在最外层<view>下面即可,示例代码如下:

<template>
   <view>
      <view>......</view>
      <howxm-widget path="/pages/index/index" />
   <view>
</template>

3. 其他api的调用参考官方文档即可