Quick Tracking:mini program SDK

Overview of SDK access

You need to obtain the appKey before integration.

1. Download the SDK

Download the SDK installation package, decompress the ZIP package, and put it in the source code project of the mini program for reference.

• Download URL of Alipay mini program

• Download URL of WeChat Mini Program

2. Development configuration

2.1 WeChat Mini Program Background Configuration

1. Add the domain name whitelist of the WeChat mini program.

   Operation entry: Development Management-Development Settings-Server Domain Name-Modify-Enter the request valid domain name

   The following figure shows the operation in WeChat:

2. 

3. 

4. 

2. If you cannot configure a domain name whitelist for the time being, you can first select Don't verify valid domain names in the mini program editor panel during the development phase.

   The procedure is shown in the following figure:

2.2 Alipay configuration

1. configure a domain name whitelist (the domain name whitelist is the collected domain name deployed by apm service).

2. If you cannot configure a domain name whitelist for the time being, you can first select Don't verify valid domain names in the mini program editor panel during the development phase.

3. Integrate the SDK

The sdk downloaded in step 1 is referenced at the beginning of the top of app.js. The integration method is the same as WeChat. WeChat refers to files beginning with wx and payment refers to files beginning with alipay. The integration is carried out in the following way.

As shown in the figure, cjs is a commonjs package, which is generally referenced by require in native applets, and esm is an es module package, which is generally referenced by import. developers choose the appropriate introduction method according to their own business conditions.

3.1 Method 1: Declarative writing, suitable for native applet development

ESM introduction method

// The ESM introduction method import {init} from ./build/wx.esm.
import { init } from './build/wx.esm'

init({
  appKey: 'The unique identifier of your application',
  dsn: 'Collection domain name',
  debug: true, // Enable debug logging.
  version:'x.y.z' // Set the application version number.
})

commonjs introduction method

// Use the following methods to introduce commonjs:
require('./build/wx.cjs');
App({
  umengConfig: {
    appKey: 'The unique identifier of your application',
    dsn: 'Collection domain name',
    debug: true, // Enable debug logging.
    version:'x.y.z' // Set the application version number.
  }
});

3.2 Mode 2 Command Writing

Applicable to uni-app, taro and other tripartite frameworks

// Use the following methods to introduce commonjs:
const uapm = require('./build/wx.cjs');
uapm.init({
  appKey: 'The unique identifier of your application',
  dsn: 'Collection domain name',
  debug: true, // Enable debug logging.
  version:'x.y.z' // Set the application version number.
});

4. Initialization parameters

IFieler type description

pageFilter, errorFilter, and apiFilter all inherit from the IFilter interface and are used for the following filter targets, respectively:

• pageFilter: used to filter page paths (path)

• errorFilter: used to filter stack information

• apiFilter: URL used to filter requests

You can configure a whitelist or blacklist policy for a collection item. You can select one of the two policies:

• If you select the whitelist method, only pages that meet the rules are collected.

• If you select the blacklist method, pages that meet the rule will be excluded and will not be collected.

This parameter is not required. This parameter is used to determine whether to filter logs. The following table shows the parameters.

Description of the RumConfig type

This parameter is not required. This parameter is used to determine whether to filter logs. The following table shows the parameters.

Instance method description

After the SDK is initialized, the $umapm object is globally attached to the instance. You can call the following methods by using wx.$umapm my.$umapm.

5. Case

Case 1

Support App umengConfig custom property setting configuration parameters:

// wechat
const umapm = require('./wx.cjs');

App({
  umengConfig: {
    appKey: 'Unique identifier of the application',
    dsn: 'Collection domain name',
    debug: true,
    version:'x.y.z',
    debug: true,
    pageFilter: {
      mode: 'match',
      rules: ['/home']
    }
  },
  onLaunch: function () {
    wx.request({
      url: "https://xxx/getUserId",
      method: "post",
      success: (res) => {
        wx.$umapm.setUserid(res.data.userid);
      }
    })
  }
});

Case 2

Supports instance init method configuration initialization:

// wechat
var umapm = require('./wx.cjs');
umapm.init({
  appKey: 'Unique identifier of the application',
  dsn: 'Collection domain name',
  debug: true,
  version:'x.y.z',
  debug: true,
  pageFilter: {
    mode: 'match',
    rules: ['/home']
  }
});

App({
  onLaunch: function () {
    wx.request({
      url: "https://xxx/getUserId",
      method: "post",
      success: (res) => {
        wx.$umapm.setUserid(res.data.userid);
      }
    });
  }
});

Case 3

Integrate the SDK by using conditional compilation in the uni-app framework:

// Configure the parameters for initialization.
// #ifdef MP-WEIXIN
import { init } from "./wx.esm";
init({
  appKey: 'Unique identifier of the application',
  dsn: 'Collection domain name',
  version:'x.y.z',
  pageFilter: {
    mode: "ignore", 
    rules: []
  },
});
// #endif

// #ifdef MP-ALIPAY
import { init } from "./alipay.esm";
init({
  appKey: 'Unique identifier of the application',
  dsn: 'Collection domain name',
  version:'x.y.z',
  pageFilter: {
    mode: "ignore", 
    rules: [] 
  },
});
// #endif

// #ifdef H5
import { init } from "./apm";
init({
  pageFilter: { mode: "ignore", rules: [] },
  pid: "Unique identifier of an H5 application",
  logLevel:3,
});
// #endif

Introduce uapm.js into main.js

import Vue from 'vue'
import App from './App'
import './uapm';

Vue.config.productionTip = false

App.mpType = 'app'

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