小程序开发框架下 SDK (标准版)接入说明

最后更新于:2019-08-12 12:07:14

在使用前,请先阅读数据模型的介绍。

更新日志

1. mpvue 小程序框架集成 SDK

1.1 集成与初始化

第一步:通过 npm i sa-sdk-miniprogram集成 SDK
第二步:在项目的 main.js 中通过 import 引入 SDK,sensorsdata.js 必须在 vue 之前引入,然后调用 setPara() 方法设置初始化参数,调用 init() 方法完成初始化。

    import sa from 'sa-sdk-miniprogram'
    import Vue from 'vue'
    import App from './App'
    sa.setPara({
        name: 'sensors',
        server_url: '数据接收地址'
    });
    sa.init();

1.2 Page 中追踪自定义事件

    const app = getApp()
    export default {
      data () {
        return {}
      },
      created () {
        //示例: 采集一个自定义事件 show
        app.sensors.track('show');
      }
      methods: {

      }
    }

2. WePY 小程序框架集成 SDK

2.1 集成与初始化

第一步:通过 npm i sa-sdk-miniprogram集成 SDK
第二步:修改 src 目录下的 app.wpy,在 app.wpy 中引入 SDK,然后调用 setPara() 方法设置初始化参数,调用 init() 方法完成初始化。

    import sa from 'sa-sdk-miniprogram'
    import wepy from 'wepy'
    import 'wepy-async-function'
    import { setStore } from 'wepy-redux'
    import configStore from './store'
    sa.setPara({
        name: 'sensors',
        server_url: '数据接收地址'
    });
    sa.init();
    wepy.app({

    });

2.2 Page 中追踪自定义事件

    const app = getApp();
    wepy.page({
        onShow(){
            //示例: 采集一个自定义事件 show
            app.sensors.track('show');
        }
    })

注意事项:
1.WePY 2.0 中,Page 同样是使用小程序原生的 Component 方法进行注册的。

3. Taro 小程序框架集成 SDK

3.1 集成与初始化

第一步:通过 npm i sa-sdk-miniprogram集成 SDK
第二步:修改 src 目录下的 app.tsc,在 app.tsc 中引入 SDK,然后调用 setPara() 方法设置初始化参数,调用 init() 方法完成初始化。

    import Taro, { Component, Config } from '@tarojs/taro'
    import Index from './pages/index'
    import sa from 'sa-sdk-miniprogram'
    sa.setPara({
        name: 'sensors',
        server_url: '数据接收地址'
    });
    sa.init();
    class App extends Component {

    }

3.2 Page 中追踪自定义事件

    import Taro, {Component, Config} from '@tarojs/taro'
    const app = Taro.getApp();
    export default class About extends Component {
        componentWillMount () { 
            //示例: 采集一个自定义事件 show
            app.sensors.track('show');
        }
    }

4. uni-app 小程序框架集成 SDK

4.1 集成与初始化

第一步:通过 npm i sa-sdk-miniprogram集成 SDK
第二步:修改 src 目录下的 main.js,在 main.js 中引入 SDK,然后调用 setPara() 方法设置初始化参数,调用 init() 方法完成初始化。

    import sa from 'sa-sdk-miniprogram'
    import Vue from 'vue'
    import App from './App'

    sa.setPara({
        server_url:'https://test-syg.datasink.sensorsdata.cn/sa?project=xubo&token=27f1e21b78daf376'
    });
    sa.init();
    Vue.config.productionTip = false

    App.mpType = 'app'

    const app = new Vue({
        ...App
    })
    app.$mount()

4.2 Page 中追踪自定义事件

    const app = getApp()
    export default {
      data () {
        return {}
      },
      onLoad(){
        //示例: 采集一个自定义事件 show
        app.sensors.track('show');  
      },
      methods: {
      }    
    }

注意事项:
uni-app 自 1.8版本开始,同时支持两种编译模式:
1.template 模板模式:老框架模式,借鉴自 mpvue,将用户编写的 Vue 组件,编译为 WXML 中的模板(template),变相实现组件化开发。
2.自定义组件模式:新框架模式,DCloud 自研,将用户编写的 Vue 组件,编译为微信小程序自定义组件,实现了更高的性能及更完善的 Vue 语法支持。

5. 小程序框架对 SDK 预置事件的影响说明

由于 1.13.6 版本之前的微信小程序 SDK 是通过代理监听小程序 Page 构造器与页面生命周期中的 onShareAppMessage() 函数来采集 $MPViewScreen $MPShare预置事件的。因而当使用框架(Taro/ uni-app 自定义组件编译模式/ WePY 2.0)开发小程序时,小程序页面在编译后使用的是 Component 构造器形成的页面,那么 1.13.6 版本之前的微信小程序 SDK 无法自动采集该页面的预置事件 $MPViewScreen $MPShare,可以使用 track() 方法自定义采集。
1.13.6 之后的版本的小程序 SDK 对小程序 Component 构造器也做了监听,因而此版本之后的的 SDK 也可以采集到使用 Component() 构造的页面的 $MPViewScreen $MPShare预置事件。