跳到主要内容
版本：3.7.0

uni-app

集成指南​

  • 解压BonreeSDK_TDEM_MP.Wechat.zip，用HBuilder-X打开项目，将bonreeSDK_MP_Wechat.min.esm.js加入到项目中；若打包到抖音平台运行，则解压解压BonreeSDK_TDEM_MP.Tiktok.zip，将bonreeSDK_MP_Tiktok.min.esm.js加入到项目中。下图为打包到微信平台端集成图示：

image

  • 使用公有云平台，需要在微信/抖音小程序管理后台中的服务器域名内加入数据上报域名。示例为公有云平台数据上报域名https://oneupload.bonree.com，私有化环境域名请根据实际部署情况进行配置，或联系技术支持获取。

image

接入​

  • 在main.js文件中引入探针文件：

    微信小程序中运行引入：

    import {BonreeRUM} from './bonreeSDK_MP_Wechat.min.esm.js'

    抖音小程序中运行引入：

    import {BonreeRUM} from './bonreeSDK_MP_Tiktok.min.esm.js'

  • 启动小程序探针，在传入的配置参数中设置Config地址与AppID：

<#Config地址#> 与 <#AppID#> 请于平台上获取，获取方式参见《如何查询AppID和Config地址？》。如有问题请联系技术支持。

BonreeRUM.start({
    configAddress: "<#Config地址#>",
    appId: "<#AppID#>"
})

vue2项目和vue3项目中小程序探针初始化位置有所不同

vue2项目中：

import App from "./App";
import {BonreeRUM} from './bonreeSDK_MP_Wechat.min.esm.js'    // 微信小程序中引入
// import {BonreeRUM} from './bonreeSDK_MP_Tiktok.min.esm.js' // 抖音小程序中引入

// #ifndef VUE2
import Vue from "vue";
import "./uni.promisify.adaptor";

BonreeRUM.start({
    configAddress: "<#Config地址#>",
    appId: "<#AppID#>",
});

Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
    ...App,
});
app.$mount();
// #endif

// #ifdef VUE2
import { createSSRApp } from "vue";
export function createApp() {
    const app = createSSRApp(App);
    return {
        app
    };
}
// #endif

vue3项目中：

import App from "./App";
import {BonreeRUM} from './bonreeSDK_MP_Wechat.min.esm.js'    // 微信小程序中引入
// import {BonreeRUM} from './bonreeSDK_MP_Tiktok.min.esm.js' // 抖音小程序中引入

// #ifndef VUE3
import Vue from "vue";
import "./uni.promisify.adaptor";
Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
    ...App,
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {
    BonreeRUM.start({
        configAddress: "<#Config地址#>",
        appId: "<#AppID#>",
    });
    const app = createSSRApp(App);
    return {
        app
    };
}
// #endif
  • 运行小程序模拟器。在HBuilder-X中选择用微信/抖音开发者工具运行该项目
  • 项目在微信/抖音开发者工具中运行成功后，在微信/抖音开发者工具的调试器只查看Network，有config请求结果输出且响应中的rc字段为10000即标识嵌码成功。下图为微信开发者工具中的响应结果：

image