How to log in to the uniapp WeChat applet

With the popularity of WeChat mini programs, more and more people are paying attention to the development of WeChat mini programs. In this process, the login module is indispensable, and Uniapp has also become a popular WeChat applet development framework. So, how to log in to the Uniapp WeChat applet? Let’s take a closer look below.

1. WeChat Developer Platform Configuration

Before logging in to the WeChat applet, we need to perform relevant configurations on the WeChat developer platform. First, in "Development" -> "Development Settings" -> "Developer Tools", open the "Service Port" and fill in your own IP address.

Secondly, in "Development"->"Development Settings"->"Mini Program Background Configuration", add the mini program "request legal domain name".

Then, we need to get the AppID and AppSecret of the mini program and check it in "Settings" -> "Developer Tools" -> "Development Settings".

2. Uniapp configuration

In the conditional compilation of MicroMessenger-uni, we need to first introduce the wx-auth.js file, which can be written by ourselves or downloaded from the Internet.

In onLaunch of App.vue, configure the AppID, AppSecret, and background address of the WeChat applet to obtain Openid.

Next step, when calling the login interface, we need to write a method to obtain the code in wx-auth.js:

getLoginCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          success: (res) => {
            if (res.code) {
              resolve(res.code)
            } else {
              reject(res)
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

Then, write a method to obtain Openid in wx-auth.js Method:

getOpenId(appid, secret, code) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

Finally, in the login page in the project, we can write the login method:

async login() {
      let code = await this.getLoginCode()
      let res = await this.getOpenId(this.appid, this.secret, code)
      console.log(res)
      // 在这里可以将Openid和其他用户信息存入后台，实现登录功能
   }

3. WeChat applet implementation

In the WeChat applet On the end, we need to call the wx.login method in the login button to obtain the code, and then pass the code to the background to obtain Openid and other user information from the background to implement the login function.

The following is an example of a WeChat applet calling the wx.login method:

wx.login({
      success(res) {
        if (res.code) {
          //将code传到后台获取Openid
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      },
      fail(err) {
        console.log('登录失败！' + err.errMsg)
      }
    })

4. Summary

Through the above steps, we can realize the login function of the Uniapp WeChat applet. It should be noted that the WeChat applet login needs to be jointly debugged with the back-end API interface and obtain the return information from the back-end to implement the real login process. At the same time, users’ private information, such as OpenID, needs to be protected during the login process to avoid leakage and abuse.

The above is the detailed content of How to log in to the uniapp WeChat applet. For more information, please follow other related articles on the PHP Chinese website!