Backend-Anmeldung nach der WeChat-Entwicklung (Anmeldung ohne WeChat-Konto)

Ich habe kürzlich ein kleines Toolprogramm geschrieben. Gemäß den Anforderungen benötige ich nicht das von WeChat bereitgestellte WeChat-Konto, um mich anzumelden. Ich muss die Hintergrund-Anmeldeschnittstelle aufrufen, um mich anzumelden. Da die meisten Miniprogramme WeChat-Informationen zum Anmelden verwenden und selten ihr eigenes Backend zum Anmelden verwenden, gibt es beim Schreiben verschiedene Fallstricke. Jetzt werde ich den Code, der die Fallstricke überwunden hat, mit allen teilen! (PS: Wenn etwas nicht stimmt, teilen Sie es bitte mit.)

Reden Sie keinen Unsinn, gehen Sie einfach zum Code

Suchen Sie app.js und schreiben Sie den folgenden Code hinein

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
    adminUserViewId: "",
    token: "",
    userInfo: null,
    BaseURL:"http://airb.cakeboss.com.cn"
    // BaseURL:"http://192.168.0.107:8080"
  },

Schreiben Sie die wichtigsten Punkte an die Tafel: Das Wichtige Teile des Codeausschnitts im Bild oben sind: „adminUserViewId in globalData: „“,token: „“ „
Diese beiden Parameter sind Hintergrundparameter, die vom Frontend gespeichert werden müssen, um den Anmeldestatus des Benutzers zu kennzeichnen.

Erstellen Sie dann einen Anmeldeordner und schreiben Sie den folgenden Code in login.wxml

<import src="../../components/toast.wxml" />

<!-- is="toast" 匹配组件中的toast提示  如果用dialog的话这就是dialog -->
<template is="toast" data="{{ ...$wux.toast }}" />
<view class="login_container">
  <view class="login_view">
    <text class="login_lable">账号：</text>
    <input class="login_text" placeholder="请输入登录账号" bindinput="listenerUsernameInput"/>
  </view>
  <view class="login_view">
    <text class="login_lable">密码：</text>
    <input class="login_text" placeholder="请输入密码" password="true" bindinput="listenerPasswordInput"/>
  </view>
  <view>
    <button class="login_button" bindtap="loginAction">登录</button>
  </view>
</view>

Erstellen Sie dann einen Anmeldeordner und schreiben Sie den folgenden Code in login.wxss

.login_container {
  margin-top: 30px;
}

.login_view {
  width: calc(100% - 40px);
  padding: 0 20px;
  line-height: 45px;
  height: 45px;
  margin-bottom: 20px;
}

.login_text {
  float: left;
  height: 45px;
  line-height: 45px;
  font-size: 12px;
  border: 1px solid rgb(241, 242, 243);
  padding: 0 12px;
  width: calc(100% - 70px);
  border-radius: 4px;
}

.login_lable {
  float: left;
  font-size: 12px;
  width: 40px;
}

.login_button {
  width: 150px;
  background: green;
  color: #fff;
}

Schreiben Sie den folgenden Code in login.js

//login.js
//获取应用实例
var app = getApp()
var util = require('../../utils/util.js');

Page({
  data: {
    motto: 'Hello World',
    username: "",
    password: ""
  },
  onLoad(options) {
    // 初始化提示框
    this.$wuxToast = app.wux(this).$wuxToast
  },
  /** 监听帐号输入 */
  listenerUsernameInput: function (e) {
    this.data.username = e.detail.value;
  },
  /** 监听密码输入 */
  listenerPasswordInput: function (e) {
    this.data.password = e.detail.value;
  },
  // 登录按钮点击事件
  loginAction: function () {

    var userName = this.data.username;
    var passwords = this.data.password;
    var that = this;

    if (userName === "") {
      that.$wuxToast.show({
        type: 'text',
        timer: 1000,
        color: '#fff',
        text: "用户名不能为空！",
        success: () => console.log('用户名不能为空！')
      })
      return;
    } if (passwords === "") {
      that.$wuxToast.show({
        type: 'text',
        timer: 1000,
        color: '#fff',
        text: "密码不能为空！",
        success: () => console.log('密码不能为空！')
      })
      return;
    }

    //加载提示框
    util.showLoading("登录中...");

    var urlStr = app.globalData.BaseURL + '/api/adminUser/login';
    wx.request({
      method: "POST",
      url: urlStr, //仅为示例，并非真实的接口地址
      data: util.json2Form({
        username: userName,
        password: passwords
      }),
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function (res) {
        util.hideToast();
        console.log(res.data);
        var code = res.data.code;
        if (code === 200) {
          // 后台传递过来的值
          var adminUserViewId = res.data.data.adminUserViewId;
          var token = res.data.data.token;
          // 设置全局变量的值
          app.globalData.adminUserViewId = res.data.data.adminUserViewId;
          app.globalData.token = res.data.data.token;
          // 将token存储到本地
          wx.setStorageSync('adminUserViewId', adminUserViewId);
          wx.setStorageSync('token', token);
          console.log("登录成功的adminUserViewId：" + adminUserViewId);
          console.log("登录成功的token：" + token);
          // 切换到首页
          wx.switchTab({
            url: '/pages/index/index'
          })
        } else {
          that.$wuxToast.show({
            type: 'text',
            timer: 1000,
            color: '#fff',
            text: res.data.msg,
            success: () => console.log('登录失败，请稍后重试。' + res.data.msg)
          })
        }
      },
      fail: function () {
        util.hideToast();
        console.log("登录失败");
        that.$wuxToast.show({
          type: 'text',
          timer: 1000,
          color: '#fff',
          text: '服务器君好累

[Verwandte Empfehlungen]

1. Download des Quellcodes der WeChat-Plattform für öffentliche Konten

2. Betriebsversion des PigCms-Mikro-E-Commerce-Systems (unabhängiges Mikro-Einkaufszentrum + dreistufiges Vertriebssystem)

3. WeChat People Network v3.4.5 Erweiterte kommerzielle Version des WeChat Rubik's Cube-Quellcodes

Das obige ist der detaillierte Inhalt vonBackend-Anmeldung nach der WeChat-Entwicklung (Anmeldung ohne WeChat-Konto). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!