WeChat

WeChat mini program provides two integration methods: plug-in docking and SDK docking. Please select the appropriate docking method according to the comparison below

Comparison between plug-in and SDK:

1. Plug-in code does not directly provide SDK source code, does not occupy a mini program volume
2. After the new version of the plug-in is released, the manager of the mini program will receive the update notification and can experience the new version of the plug-in and update the mini program. The mini-program release does not need to be reviewed again
3. Mini program can call plug-ins, and plug-ins can no longer call other plug-ins
4. In common subcontracting, plug-ins can only be used in one subcontracting, and the same plug-in cannot be referenced by multiple subcontractors at the same time. Plug-ins cannot be used in independent subcontracting for the time being

Plug-in version

1.1 Mini program management background add plug-in

1. Log in to the WeChat public platform and click the Settings menu on the lower left
2. Go to the Settings page and click the third-party Settings TAB
3. In the plug-in management module, click the Add Plug-in button
4. Search for wxfp, select the plug-in, and finish adding (After the application, the administrator will receive the application the next day. If the application is urgent, the administrator can contact the developer for quick approval)

1.2 Integrate mini program code

1.app.json declares the plugin

{


  "plugins": {
    "tdfp-plugin": {
      "version": "1.7.4",
      "provider": "wxc3b909c3d24c5417"
    }
  },


}

• Note: The tripartite framework can be added accordingly. For example, in uni-app, you can add the above declaration to the mp-weixin module of the manifest.json file

2. Initialize the plug-in js

Our device fingerprint object lives in the lifecycle of a Page (or Component), so an instance needs to be created for each page that needs to get device information. For example, in pages/index/index.js, the plugin and global variables are referenced at the top of the file:

const plugin = requirePlugin('tdfp-plugin')
const app = getApp()

Then initialize the object in the onLoad callback of the Page:

// example
onLoad: function() {
    var that = this
    var fmagent = new plugin.FMAgent(app.globalData._fmOpt) //Some necessary configurations
    ......
}

Configuration of FMAgent
In the above code, you can see that when you initialize the object, you need to pass in a configuration object. Since this configuration should be the same throughout the App, in the demo we put the configuration in globalData of the app object, and we strongly recommend that you do the same.
partnerCode and appName are required parameters, and initialization throws an exception if none is passed.
In app.js:

App({
  ......
  globalData: {
    ......
    _fmOpt: {
      partnerCode: "", // Please fill in your partner code
      appName: "", // Please fill in your app name,Please fill in different appnames for different applets of the same company
      env: "PRODUCTION" // Use 'SANDBOX' for test environment and 'PRODUCTION' for production environment,use 'SG' when using Singapore interface
    }
  }
})

• Note: After initialization, you can see a log on the console:

FMAgent: init succeeded.

3. Get BlackBox
   After the device fingerprint object is initialized, the device information can be obtained. Our device fingerprint SDK adopts a call mode similar to WeChat API and supports passing success, fail, complete callback, and other configuration fields:

fmagent.getInfo({
  page: that,  // The Page or Component object where FMAgent resides
  mode:'plugin',
  openid: '', // If openid or unionid is empty or undefined, do not encrypt upload, pass an empty string
  // If you have the unionid function enabled, pass in the encrypted user unionid
  // Please pass in the encrypted openid of the user (ensure that the encrypted openid is one-to-one corresponding to the original openid).
  unionid: '', 
  success: function (res) {},//Successful callback, res is BlackBox string
  fail: function (res) {},// Failure callback, res for various exception objects
  complete: function (res) {} //Complete callback, res for BlackBox string or various exception objects
})

2. SDK Mode

2.1 Adding a Domain Name

In Settings - development Settings - server domain request legal domain add:

Note:

• If the online version applet will only access the same production environment, add the first production domain name

2.3 Insert canvas node

Import in the corresponding wxml file that needs to call the sdk

<view>
    <canvas canvas-id='tdcanvas' style="visibility: hidden;position: fixed;z-index: -999;left: 9999px;"></canvas>
</view>

Note: You are advised to introduce it as a component

2.4 Initialization

Our device fingerprint object lives in the lifecycle of a Page (or Component), so an instance needs to be created for each page that needs to get device information. For example, in pages/index/index.js, first reference the SDK file at the top of the file:

import FMAgent from '../../fmsdk/fm-xxx-es.min.js'

Initialize the object in the onLoad callback of the Page:

onLoad: function() {
	var that = this
	var fmagent = new FMAgent(app.globalData._fmOpt) // Some necessary configurations
	......
}

Configuration of FMAgent
In the globalData of the app object in the app.js file

App({
	......
	globalData: {
		......
		_fmOpt: {
			partnerCode: "", // Please fill in your partner code
			appName: "", // Please fill in your app name
			env: "PRODUCTION" // Use 'SANDBOX' for test environment and 'PRODUCTION' for production environment,use 'SG' when using Singapore interface
		 }
	}
})

After the initialization is successful, you can see a log on the console:
FMAgent: init succeeded.

2.5 Get the blackBox

After the device fingerprint object is initialized, the device information can be obtained. Our device fingerprint SDK adopts a call mode similar to WeChat API and supports passing success, fail, complete callback and other configuration fields:

fmagent.getInfo({
    page: that, // The Page or Component object where FMAgent resides
    openid: '', // user openid
    unionid: '', // If you have the unionid function enabled, pass in user unionid
    success: function (res) {
    // Successful callback, the res is blackBox string
    },
    fail: function (res) {
    // Failure callback, res for various exception objects
    },
    complete: function (res) {
    // Complete callback, res for BlackBox string or various exception objects
    }
})

Parameter Description

Note:

• blackbox has an expiration date, so please do not cache blackbox yourself, there is a caching mechanism inside our SDK, so please call the getInfo interface where you need blackbox
• Degrade The blackbox length ranges from 3000 to 5000 bytes. You are advised to report the blackbox to the body