So melden Sie sich beim uniapp WeChat-Applet an

Angesichts der Beliebtheit von WeChat-Miniprogrammen achten immer mehr Menschen auf die Entwicklung von WeChat-Miniprogrammen. In diesem Prozess ist das Anmeldemodul unverzichtbar, und Uniapp hat sich auch zu einem beliebten WeChat-Applet-Entwicklungsframework entwickelt. Wie melde ich mich also beim Uniapp WeChat-Applet an? Schauen wir uns das unten genauer an.

1. Konfiguration der WeChat-Entwicklerplattform

Bevor wir uns beim WeChat-Miniprogramm anmelden, müssen wir relevante Konfigurationen auf der WeChat-Entwicklerplattform durchführen. Öffnen Sie zunächst unter „Entwicklung“ -> „Entwicklungseinstellungen“ -> „Entwicklertools“ den „Service-Port“ und geben Sie Ihre eigene IP-Adresse ein.

Zweitens fügen Sie unter „Entwicklung“ -> „Entwicklungseinstellungen“ -> „Miniprogramm-Hintergrundkonfiguration“ das Miniprogramm „Legalen Domänennamen anfordern“ hinzu.

Dann müssen wir die AppID und das AppSecret des Miniprogramms abrufen und unter „Einstellungen“ -> „Entwicklertools“ -> „Entwicklungseinstellungen“ überprüfen.

2. Uniapp-Konfiguration

Bei der bedingten Kompilierung von MicroMessenger-uni müssen wir zuerst die Datei wx-auth.js einführen, die wir selbst schreiben oder aus dem Internet herunterladen können.

Konfigurieren Sie beim Start von App.vue die AppID, das AppSecret und die Hintergrundadresse des WeChat-Applets, um OpenID zu erhalten.

Im nächsten Schritt müssen wir beim Aufrufen der Anmeldeschnittstelle eine Methode schreiben, um den Code in wx-auth.js abzurufen:

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

Dann schreiben wir eine Methode, um OpenID in wx-auth.js abzurufen:

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)
          }
        })
      })
    }

Endlich , in Auf der Anmeldeseite im Projekt können wir die Anmeldemethode schreiben:

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

3. WeChat-Applet-Implementierung

Im WeChat-Applet müssen wir die wx.login-Methode in der Anmeldeschaltfläche aufrufen, um den Code zu erhalten. und übergeben Sie dann den Code. Gehen Sie in den Hintergrund, rufen Sie OpenID und andere Benutzerinformationen aus dem Hintergrund ab und implementieren Sie die Anmeldefunktion.

Das Folgende ist ein Beispiel für das WeChat-Applet, das die wx.login-Methode aufruft:

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

IV. Durch die obigen Schritte können wir die Anmeldefunktion des Uniapp WeChat-Applets implementieren. Es ist zu beachten, dass die WeChat-Applet-Anmeldung gemeinsam mit der Back-End-API-Schnittstelle debuggt werden muss und die Rückgabeinformationen vom Back-End abgerufen werden müssen, um den eigentlichen Anmeldevorgang zu implementieren. Gleichzeitig müssen die privaten Daten der Benutzer, wie z. B. OpenID, während des Anmeldevorgangs geschützt werden, um Lecks und Missbrauch zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo melden Sie sich beim uniapp WeChat-Applet an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!