Part I Introduction

Introduction of Taro

Taro is a multi-terminal development solution that follows the React syntax specification.

Using Taro, we can only write one set of code, and then compile the source code to run on different applications (wechat, Baidu, Alipay, Bytedance, QQ mini program, Kuaiapp, H5, React-Native, etc.) using Taro’s compilation tool.

Introduction to Tencent

Launched by Tencent Smart Retail, Tencent Meowu is a data analysis and management platform for brands and retailers. It integrates Tencent’s data, technology and ecological advantages and provides full-link operation data analysis, consumer insight, precision marketing and other capabilities to make enterprise operation more “meowu”.

Hi profile picture

Based on face recognition, one-click generation in line with the festive atmosphere of the avatar. For example, at Christmas, Spring Festival, etc., generate a Christmas hat picture, New Year picture, etc.

Part II Access

New applet

Need to upgrade Taro to 2.x or 3.x

  • taro init myAppInitialize the project
  • choosedefault-youshuThe template
  • runnpm run dev:weappStart applets compilation

Wechat small program developer tools console can see the 8 major behavior log report visit docs.qq.com/form/fill/D… Request several data view permissions

Through the above process, your micro channel mini program has the experience ability of 8 user behavior buried points. After the experience is completed, you only need to replace the Token and micro channel mini program APPID, and you can have the official version of the function. You can obtain an official account from docs.qq.com/form/fill/D…

Hi avatar access scheme (already small program)

Access documentation mp.zhls.qq.com/youshu-docs…

1. Install the SDK through NPM

npm i sr-sdk-wxapp
Copy the code

Import the SDK in app.jsx

import sr from 'sr-sdk-wxapp'
Copy the code

2. Add a trusted domain name

Log in to the letter public platform, enter < development >< development Settings >< server domain name >, and add https://zhls.qq.com as the legitimate domain name of Request.

There will also be SDK version checking in the development environment, so it will prompt sr-home-1257214331.cos.ap-guangzhou.myqcloud.com does not exist in the following request legitimate domain name list, you can do this by setting an unverified domain name.

3. Initialize the SDK in taro/app.js

sr.init({
  /** * there are -ka app_id assigned by 'access test'. The corresponding service interface person is responsible for */
  token: 'biccaffbxxx'./** * wechat appID, start with wx */
  appid: 'wxd5e8xxxx'./** * If applet plug-ins are used, set this parameter to true */
  usePlugin: false./** * Enables debugging information printing. The default value is false */
  debug: true./** * Recommended to enable - enable automatic proxy Page, Sr. page(options) is used instead of page(sr.page(options)). true */
  proxyPage: true.The SDK is responsible for reporting browse, leave, share and other events */
  proxyComponent: true.// Recommended - Whether to enable automatic link tracing for page sharing
  openSdkShareDepth: true.// It is recommended to enable - element event tracking to automatically report element events, such as tap, change, longpress and Confirm
  autoTrack: true,})Copy the code

Login information incoming

OpenId information will be passed in

Native applets proxy SR instance

// app.js
// The SDK needs to be initialized by init to work properly
let sr = require('sr-sdk-wxapp').init({
    appid: 'wx9d********'.// wechat appid, starting with wx
    token: 'bi72f*******'./ / token is several appid, begin with bi, value for the key management in the https://srdata.tencent.com/ _APP ID
})
App({
    sr, // Mount it to the App instance
})
// otherjs
let app = getApp()
app.sr.track('login_wxapp',
{
    "page": "pages/tabBar/index/index"."page_title": "Home page"."time": "1560409473714"."wx_user": {
      "app_id": ""."open_id": ""."user_id": ""."union_id": ""."local_id": "",}// more...
})
Copy the code

Taro represents the SR instance

// app.js
import sr from 'sr-sdk-wxapp'
// Attach SDK instances to Taro objects for easy global use
Taro.srSdk = sr.init({
    appid: 'wx9d********'.// wechat appid, starting with wx
    token: 'bi72f*******'./ / token is several appid, begin with bi, value for the key management in the https://srdata.tencent.com/ _APP ID
})
// store/user.js
setLoginInfo(state, payload) {
  const { userInfo = {} } = payload
  if (Taro.srSdk) {
    const { wxOpenId, userId } = userInfo
    // Set the login information
    Taro.srSdk.setUser({
      open_id: wxOpenId,
      user_id: userId,
    })

    // Activate the login
    Taro.srSdk.track('login_wxapp')}}Copy the code

The third part, event study

Taro Page Implementation principles of onShow

/** * Recommended to enable - enable automatic proxy Page, Sr. page(options) is used instead of page(sr.page(options)). true */
proxyPage: true.Copy the code

Whether to enable automatic proxy Page. The default value is false. Sr. page can be used instead of page(sr.page(options)) for browse, leave and share events reported by SDK.

Allows automatic listening of four events such as onclick and onchange

There are SDK event types

Big classification

  • Traffic operations
  • Commodity operating
  • Activity operations
  • Sales of attribution
  • Search operations
  • Customer service consultation
  • Channel reported

Hi avatar focuses on the basic flow operation module, including:

  • Small program start
  • Applet display
  • Applet hiding
  • Page views
  • Page to leave
  • Page drop-down refresh
  • Page on the bottom
  • Page to share
  • Element event
  • User registration
  • The user login

Among them, I observed several with the following characteristics:

Leave the page, leave the app, leave_wxapp_page and exit_wxapp

If cancelled, app_show and Browse_wxapp_page will be triggered.

Event click, automatically triggered

sr.track('element', {
    "type": "change"."element_id": "secKillPage-banner1_1"."index": "1"."name": "Seckill page - rotation 1_1"."page": "pages/product? sku_id=AOdjf7u".// more...
})
Copy the code

Part four has more to look forward to

Hi Avatar is based on cloud development, there are two sets of development environment, and There are two sets of tokens provided by Meow, which is very impressive.

Smart retail and e-commerce payment scenarios

Smart retail pays more attention to the operation information of e-commerce portal stores. It creates a data analysis and management platform for brands and retailers, integrates Tencent’s data, technology and ecological advantages, and provides full-link operation data analysis, consumer insight, precision marketing and other capabilities, so that enterprises can operate more “well-informed”.

The Hi Avatar needs to add more payment scenarios to complete the trial of all scenarios of smart retail, such as wechat Pay, which introduces cloud development.

Business Version details

There are several SDK versions for mobile phone system version, wechat version and SDK version, but I also expect the basic library version of small program and the business version of small program, that is, the version of each small program function development.

Custom events

Several SDK events are predefined, such as add_CART, but I also need custom events, for example, when I choose profile picture, I want to distinguish wechat profile picture, camera and album.