字节(抖音头条)小程序
对于字节(抖音头条)小程序多样的开发方式，我们给出了主流开发方式的集成方法参考。如您使用了其他开发方式，请咨询我们。
如果您使用跨平台框架开发且有多端（特指小程序，快应用、App和Web除外）同时需要集成SDK的需求时，只需在框架代码中集成一次即可。例：
使用uni-app同时开发微信小程序和阿里(支付宝)小程序，只需集成一次即可。
2、在您的小程序中获取
appId。3、在下列选项中选择对应的开发框架，并下载对应的SDK文件存放在项目中或使用npm的方式集成。下文中以
utils/gio目录作为下载集成的示例目录(目录和SDK文件可自定义重命名)。参考示例在 app.js/main.js 小程序主文件中添加初始化代码。添加位置参考示例代码，注意不要随意修改初始化代码位置。SDK不支持在小程序中任意生命周期中进行初始化。
1、加载SDK
(如果您点击链接在浏览器中直接打开了文件并不是下载文件，请尝试右键点击链接，选择链接存储为...即可正常触发下载)
2、使用
init方法进行初始化注意
init方法所处位置在App实例之前。示例代码
// app.js
import gio from './utils/gio/gio-bytedance.js';
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
...other settings
});
App({ ... });
1、加载SDK
方式一：下载本地集成
(如果您点击链接在浏览器中直接打开了文件并不是下载文件，请尝试右键点击链接，选择链接存储为...即可正常触发下载)
方式二：npm集成
npm i gio-miniprogram-sdk-saas --save
2、使用
init方法进行初始化注意
init方法所处位置（vue2和vue3中分别与app实例的相对位置不同）示例代码
uni-app(vue2)
uni-app(vue3)
// main.js
import Vue from 'vue';
import App from './App.vue';
// 下载集成方式
import gio from './utils/gio/gio-uniapp.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-uniapp';
App.mpType = 'app';
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
uniVue: Vue,
...other settings
});
// 注意vue2中app实例在初始化之后
const app = new Vue(App);
app.$mount();
// main.js
import App from './App.vue';
import { createApp } from 'vue';
// 下载集成方式
import gio from './utils/gio/gio-uniapp.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-uniapp';
export function createApp() {
// 注意vue3中app实例在初始化之前
const app = createApp(App);
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
uniVue: app,
...other settings
});
return { app };
}
1、加载SDK
方式一：下载本地集成
(如果您点击链接在浏览器中直接打开了文件并不是下载文件，请尝试右键点击链接，选择链接存储为...即可正常触发下载)
方式二：npm集成
npm i gio-miniprogram-sdk-saas --save
2、使用
init方法进行初始化注意
init方法所处位置（vue2和vue3中分别与app实例的相对位置不同）。使用vue开发时taro和taroVue都要传。示例代码
Taro2
Taro3(react)
Taro3(vue2)
Taro3(vue3)
// app.jsx
import Taro, { Component } from '@tarojs/taro';
// 下载集成方式
import gio from './utils/gio/gio-taro.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-taro';
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
taro: Taro,
...other settings
});
class App extends Component { ... }
Taro.render(<App />, document.getElementById('app'));
```
额外安装bable插件
npm i babel-plugin-setname --save
// babel.config.js
module.exports = {
presets: [['taro', { framework: 'react' }]],
plugins: [
[
'babel-plugin-setname', {
includes: ['src'],
lower: false, // 从taro2升级至3时请修改为true
}
]
]
};
import React, { Component } from 'react';
// 下载集成方式
import gio from './utils/gio/gio-taro.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-taro';
// 无论哪种集成方式，都要引入taroRuntime
const taroRuntime = require('@tarojs/runtime');
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
taro: taroRuntime,
...other settings
});
class App extends Component { ... }
export default App;
// app.js
import Vue from 'vue';
import Taro from '@tarojs/taro';
// 下载集成方式
import gio from './utils/gio/gio-taro.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-taro';
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
taro: Taro, // 注意taro和taroVue都需要传
taroVue: Vue, // 注意taro和taroVue都需要传
...other settings
});
// 注意vue2中App实例在初始化之后
const App = { ... };
export default App;
// app.js
import { createApp } from 'vue';
import Taro from '@tarojs/taro';
// 下载集成方式
import gio from './utils/gio/gio-taro.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-taro';
// 注意vue3中App实例在初始化之前
const App = createApp({ ... });
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
taro: Taro, // 注意taro和taroVue都需要传
taroVue: App, // 注意taro和taroVue都需要传
...other settings
});
export default App;
1、加载SDK
方式一：下载本地集成
(如果您点击链接在浏览器中直接打开了文件并不是下载文件，请尝试右键点击链接，选择链接存储为...即可正常触发下载)
方式二：npm集成
npm i gio-miniprogram-sdk-saas --save
2、使用
init方法进行初始化注意
init方法所处位置在App实例之前。// app.js
import * as remax from 'remax';
// 下载集成方式
import gio from './utils/gio/gio-remax.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-remax';
gio('init', 'your GrowingIO 项目ID', 'your AppId', {
version: 'your miniProgram version',
remax: remax,
...other settings
});
const App = (props) => props.children;
export default App;
要正常采集字节(抖音头条)小程序的数据并发送给 GrowingIO，需要事先设置一个通讯域名，允许跟 GrowingIO API 服务器进行网络通信。具体步骤如下：
- 1.
- 2.打开开发设置，到服务器域名配置部分。
- 3.在 request 合法域名中添加：https://wxapi.growingio.com
GrowingIO为您提供多种验证SDK是否正常采集数据的方式：
方式二：在SDK中设置了Debug模式后，在开发者工具中查看数据采集日志。