Article From:https://www.cnblogs.com/LChenglong/p/9685616.html

I am a mobile worker – source: https://www.jianshu.com/p/87a75ec2fd53

Small program sharing group and information tracking

demand

  1. Page sharing

​ Widget page sharing links add the source parameter, which is encrypted by the user ID, and the shared links are similar to / pages / Live / live? Id = 10109 & amp; source = 1 ada812s

​ Share, copy, link and cover map when sharing.

​ After sharing the information, you can get the group ID successfully.Make a presentation.,Record the information shared by the user.

  1. Track

​ After opening the shared card, the group user gets the source parameter in the link.Make a presentation.,Record which users open the applet.

​ After watching 30s on this pageMake a presentation.

Realization

Page distribution:

  • live.js Small program page
  • app.js Applet applet

Code analysis:

Because there are many unrelated parts in the code, the analysis process, as far as possible to omit unrelated parts of the code, in order to better understand the entire sharing process.

First reported

Throughout the requirement development, there are three reports that need to be reported. You can define the report as the same function and do different things according to different input parameters.live.jsThe function of the report is as follows:

upload_share_Result(res, type, uid) {
    let share_event = apiUrl.share_event    // Access to interfaces
    let token = Store.getState().updateToken    // Get login user token
    let params = {
        token,  // Login user's token
        //Forwarding group events: type=1; entering the live broadcast event: type=2; entering the live room 30s event: type=3
        type,
        uid,    // Record the source, if the widget opens, the source is empty; if it opens from someone else, the source is someone else's UID
        encryptedData: res ? res.encryptedData : '',    // Sharing group messages to groups
        iv: res ? res.iv : ''       // Sharing group messages to groups
    }
    Request(share_event, params, 'post').then((res) => {
       //...
    }).catch((res) => {
       //...
    })
},

 

First, we need to understand the API forwarded by the widget, including whether it has a group identity, how to get the group identity, how to decrypt the group information, and so on. Next we will analyze a little bit.

staylive.jsImplementation of forwardingshareThe train of thought and code are as follows:

First, ensure that the live page displays the share button and is able to carry it.ShareTicketForwarding

/*
*  Life cycle function -- monitoring page loading*/
onLoad: function (options) {
    // Displays the forwarding button for the current page.
    wx.showShareMenu({
      // Do you use shareTicket forwarding?
      withShareTicket: true
    })
}

 

And then inlive.jsThe onShareAppMessage is called to realize the custom forwarding information. And then get the needed group information through getShareInfo. Specific API shows official website onShareAppMessage & getSharEInfo

/**
* Users click on the top right corner to share.*/
onShareAppMessage: function () {
    let _this = this
    let uid = Store.getState().updateUid        // Get user uid in Redux
    return {
        title: this.data.title,
        // Sharing path, room name + user UID
        path: `/pages/live/live?id=${this.data.roomid}&source=${uid}`,
        imageUrl: this.data.shareImage,
        // Forwarding successful callback function
        success: function (res) {
            // Sharing to individuals: {errMsg:'shareAppMessage:ok'}
            // Share to group: {errMsg:'shareAppMessage:ok', shareTickets: Array (1)}
            /* shareTicket array* each item is a shareTicket, which is a ticket for forwarding the target group information, corresponding to a forwarding object.*/
            var shareTicket = (res.shareTickets && res.shareTickets[0]) || ''
            /* The Tip: of official website is adjusted due to the change of strategy.* developers can first use the group ID in the wx.getShareInfo interface for functional development.*/
            wx.getShareInfo({
                // Bring the bill with you.
                shareTicket: shareTicket,
                success: function (res) {
                    // If there is no source from a small program, if you share it with another two times, share it with source.
                    // Follow up will talk about the source of _this.data.source.
                    let source = _this.data.source ? _this.data.source : '';
                    // Report to the backstage, bring the group information to the background, and the background will decrypt the necessary information.
                    _this.upload_share_Result(res, '1', source)
                }
            })
        },
        fail: function (res) {
        }
    }
}

 

The above sections can be basically shared to the group, then get the group information, and complete the first report.

Follow up

Next, when a user opens a small program shared by others, andAcceptance of authorizationperhapsAlready authorizedUnder the circumstances, how to complete the second and third reports, the code is still inlive.jsIn the middle.

onLoad: function (options) {
    let _this = this;
    this.setData({
        // Get the source in the applet URL, record who is sharing this little program, or there may be no source.
        roomid: options.id,
        source: options.source
    }, function () {
        //...
    })

    // Add a callback function to the globe, and when the user has no authorized state and needs to click the authorization button, the callback function is executed
    app.getInfoCb = function () {
        if (options.source) {
            // For the second time, if there is options.source, who will share it?
            _this.share_event_req(null, '2', options.source)
            // For the third time, if there is options.source, who will share it?
            setTimeout(() => {
                _this.share_event_req(null, '3', options.source)
            }, 30 * 1000)
        }
    }
    // If the user is authorized, the small program is not deleted and executed directly.
    if (Store.getState().updateUid) {
        app.getInfoCb()
    }
}

 

Then click onTo grant authorizationHow do you perform the callback function after the button? Now move toapp.jsin

App({
   postLogin(cdoe, iv, encryptedData) {
       let params = {
           code : cdoe,
           iv: iv,
           encryptedData: encryptedData
       }
       let _this = this;    // thisPoint to App object
       Request(apiUrl.postLogin, params, 'post').then(
           (res) => {
               wx.hideLoading()
               if(res.code === 1){
                   // ...
                   // If global getInfoCb exists, then execute.
                   _this.getInfoCb && _this.getInfoCb()     
               }
           }
       )
   } 
})

 

A closer look at the above code will reveal the way in which the global callbacks are implemented.share_event_reqIt is not the public that we originally defined.upload_share_Result。If you call directlyupload_share_ResultThe method can be reported directly. Why do we need to call it?share_event_reqWhat? thisshare_event_reqWhat has been done in the method? We then analyze the code inlive.jsChina:

share_event_req(res, type, uid) {
    let _this = this;
    // If a shareTicket ticket exists globally, re-execute getShareInfo to retrieve the group information contained in the ticket
    // And report to the background, so that the background to resolve group information.
    // Official website: When the user forwards the applet to any group chat, he can get the forwarded shareTicket. When the forwarding card is opened by other users in the group chat, he can get another one in App. onLaunch () or App. onShow.ShareTicket. The shareTicket obtained in both steps can get the same forwarding information through the wx. getShareInfo () interface.
    // That is to say, A forwards to a group, only B opens from this group can be regarded as A's second report; but B forwards to this group again, and C opens the report from this group, then B does not report successfully. This prevents users from washing each other.
    if (app.globalData.shareTicket) {
        wx.getShareInfo({
            shareTicket: app.globalData.shareTicket,
            success: function (res) {
                _this.upload_share_Result(res, type, uid);
            }
        })
    } else {
        // If the global shareTicket does not exist, call upload_share_Result directly.
        self.upload_share_Result(null, type, uid);
    }
}

 

According to official website, the global shareTicket is obtained in App.onLaunch () or App.onShow ().

App({
    onShow: function (options) {
        // thisPoint to App object
        this.globalData.shareTicket = options.shareTicket
    }
})

 

summary

  • User A shares group information and empty source to the background for the first time from the applet. It
  • The user A first shared personal information from a small program and won’t get shareTicket without reporting it.
  • The user B opens the applet from the group and gets it to the global shareTicket.
    • If there is authorization to perform global callbacks, submit the shareTicket information and source=A to the background.
    • If there is no authorization, click Authorization to perform a global callback and report the shareTicket information and source = A to the background
  • When the user B stays in this small program 30s, the shareTicket information and source=A are reported to the backstage.
  • User B shares the group again, and passes the shared group information and source = A to the background. The group information is the same. It
  • The user C opens the applet shared by the user B to the global shareTicket.
    • If there is authorization to perform global callbacks, submit the shareTicket information and source=B to the background. It
    • If there is no authorization, click Authorization to execute a global callback and report the shareTicket information and source = B to the background.

Leave a Reply

Your email address will not be published. Required fields are marked *