User authorized login:

The applet can easily obtain the user id provided by wechat through the login ability officially provided by wechat, and quickly establish the user system in the applet.

1. First we call   wx.login() obtain   Temporary login certificate code  ， And send it back to the developer server (the company's server).

2. We use wx.request() to send the code to the developer server.

3. Then the server side requests the wechat open interface and sends the generated code, appid and appsecret to the wechat interface service to verify the user information. If the verification is successful, the wechat development interface will send the user's oppenid and session_ Key and so on are returned to our server. At this time, the server will generate a custom token (custom login status) with our openid and session_ Key Association, and then return the token to the applet client

4. When our wechat applet client requests a token, we store the token in the local storage

5. Then every time data is requested, the stored token will be read locally, and then a request will be sent to obtain data

6. Then, the server side will verify whether the token we sent is correct or not expired. If it is correct, the business data will be returned to the applet side

Example code:

  login(){
    // Call wx.login() to get the code
    wx.login({
      success:(res)=>{
        let code=res.code
        wx.request({
          // The url here is the login domain name interface in your company's server. I used another test interface here
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin',
          method:"POST",
          data:{
            code:code,
          },
          success:res=>{
            console.log(res);
            // Get token
            let token=res
            console.log(token);
            // Store token locally
            wx.setStorage({
              key:"token",
              data:token
            })
          }
        })
      }
    })
  },

After that, the developer server can generate a user-defined login status according to the user ID, which is used to identify the user identity during the front-end and back-end interaction in the subsequent business logic.

Get user information:

Example code:

wx.getUserProfile({
      desc: 'desc',//It is required to declare the purpose of obtaining user information
      success:(res)=>{//Callback on success
        console.log(res);
      }
    })

Get the required basic user avatar, and the nickname information is in res.userInfo

Wechat applet payment function:

1. Call the background interface to generate an order. An order must be generated before calling up payment

2. After the order is generated, the background returns the parameters required for applet payment

3. Wx.requestpayment (parameter) start wechat payment

Example code:

pay(){
    // 1. Generate order
    wx.request({
      url: 'Address of the interface where the order is requested to be generated',
      success:res=>{
        console.log(res.data);
        // Generally, the generate order interface will return the following parameters to us:
        // perpay_id (the prepay_id parameter value returned by the unified ordering interface, and the submission format, such as: prepay_id = * * *), nonceStr (random string, less than 32 characters in length), timeStamp (timeStamp generated by the order), paySign (signature, see wechat payment document for details)
        // Initiate payment request
        wx.requestPayment({
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          paySign: res.data.paySign,
          timeStamp: res.data.timeStamp,
          success:(res)=>{
            // Wechat payment will be automatically activated after the call is successful
          }
        })
      }
    })
  }

For other parameters, see: wx.requestPayment(Object object) | wechat open document

Wechat applet is authorized to obtain the user's mobile phone number:

See: button | wechat open document and Get mobile phone number | wechat open document

To obtain the mobile phone number bound by wechat users, you need to call wx.login Interface.

The user is authorized to obtain the mobile phone number   It needs to be built with button   Use the open type = "" attribute

If the user clicks allow to obtain the mobile phone number, select return   encryptedData and iv properties   Then these two parameters are sent to the server for decryption   Obtain the mobile phone number after the server decrypts successfully   Return client

<button type="primary"  open-type="getPhoneNumber" bindtap="getPhoneNumber">One click to get mobile phone number</button>

 getPhoneNumber(e){
    console.log(e);
    // iv initial vector of encryption algorithm
    let iv=e.detail.iv
    // encryptedData is the encrypted data of complete user information including sensitive data. See the encrypted data decryption algorithm for details
    let encryptedData=e.detail.encryptedData
    wx.request({
      url: 'url',
      // The back-end interface can transmit whatever data is required
      data:{
        encryptedData:encryptedData,
        iv:iv,
      },
      success:res=>{

      }
    })
  },

Sharing function:

Method 1: wx.showShareMenu displays the forward button of the current page (click the top right corner... The forward button in the pop-up content is disabled by default)

• "shareAppMessage" means the "send to friends" button, and "shareTimeline" means the "share to circle of friends" button
• When the "share to circle of friends" button is displayed, the "send to friends" button must be displayed at the same time. When the "send to friends" button is displayed, the "share to circle of friends" button can not be displayed

//This function is enabled when the page loads the life cycle
onLoad:function(){
    wx.showShareMenu({
      //
      menus: ['shareAppMessage', 'shareTimeline'],
      success:res=>{
        
      }
    })
  },

Method 2:   By giving   button   Component settings properties   Open type = "share", which can be triggered after the user clicks the button   Page.onShareAppMessage   event

<button type="primary" open-type="share">share</button>

button added properties   Open type = "share", click to trigger sharing directly without binding events