Guide language: recently in the company’s AI English assessment small program project, it is my first time to complete a small program independently, but also encountered a lot of pits, here to summarize and record the problems encountered.

1. Login and authorization

The login

For example, to obtain a user’s mobile phone number, log in to the server using the mobile phone number to obtain the user token.

  1. Get code with wX.login.
  2. Use code to request the server to obtain the OpenID and sessionKey.
  3. Use the buttonopen-type="getPhoneNumber"Get encryptedData and IV.
  4. Through the encryptedData, iv, sessionKey request server decrypts the get the user mobile phone number.
  5. Log in to the server using the mobile phone number to obtain user information such as the token and save it locally.

Here are a few things to note:

  1. The sessionKey is time-sensitive, and the specific time is not given officially. It can be passedwx.checkSession()Check whether a sessionKey is expired.
  2. After wx.login is used, the old sessionKey becomes invalid immediately. In this case, you need to obtain the sessionKey again.

authorization

When using Wx.authorize () to authorize functions such as microphone, the applet will not pop up authorization prompt when invoking Wx.authorize () after getting authorization result. Even if the applet rejects authorization, the applet will not pop up authorization prompt when invoking this API again. In this case, you can use wx.openSetting to enable user authorization.

Summary of plug-in and component usage

ec-canvas

Chart plugin github.com/ecomfe/echa…

Ec-canvas is an echart-based applet chart component with the same configuration as echart. It is also very simple to use, only need to configure the line.

Every document echarts.apache.org/zh/index.ht…

Painter draws the canvas and generates the component of the picture.

The purpose of using this plugin is to create a shared poster and draw it as large as possible to avoid blurred images. You can also use widthPixels to set the width of the generated image. The huge pit encountered by using Painter is that after use2D=true is used, the picture drawn by real machine is incomplete, but it is full-grown on the simulator. What is the reason why it takes several days to work out? Finally, we can only use use2D, and the picture drawn without use2D will be relatively blurred. Just make the picture a little bigger.

API usage and other issues

About small program recognition two-dimensional code

  1. Show-menu-by-longpress using image can only recognize small program codes
  2. Using WX. previewImage can recognize small program code, wechat business card
  3. Use web-View to identify ordinary QR code, small program code, wechat business card. However, if the link of the common QR code is not configured in the service domain name, the access cannot be recognized

Development experience

  1. It is often used in business scenarios"navigationStyle": "custom"But can cause the layout to be obscured by the status bar. You can usewx.getSystemInfoSync()Gets the status bar height and device safety width heightsafeAreaTo do container uniform width and height treatment. The code is as follows.
 // Obtain the system status bar information
let e = wx.getSystemInfoSync()
this.globalData.safeAreaStyle = `position:relative; top:${e.statusBarHeight + 50}px; height:${e.safeArea.height - 50}px; `
data(){
    safeAreaStyle:getApp().globalData.safeAreaStyle
}
Copy the code
<view class="demo-level" style="{{safeAreaStyle}}"></view>
Copy the code
  1. Properties that do not need to be used on the page can be undefined in data for easy reading and writing. To update the attempt, you need to use setData to assign attributes in data. Properties that do not need to be used in the page can be defined outside, using this.xxx to read and write, rather than setData.