Connexion backend après le développement de WeChat (connexion sans compte WeChat)

J'ai récemment écrit un petit programme outil. Selon les exigences, je n'ai pas besoin du compte WeChat fourni par WeChat pour me connecter. Je dois appeler l'interface de connexion en arrière-plan pour me connecter. Étant donné que la plupart des mini-programmes utilisent les informations WeChat pour se connecter et utilisent rarement leur propre backend pour se connecter, il existe divers pièges lors de leur écriture. Je vais maintenant partager le code qui a surmonté les pièges avec tout le monde ! (PS : s'il y a quelque chose qui ne va pas, partagez-le.)

Ne dites pas de bêtises, allez simplement dans le code

Trouvez app.js et écrivez-y le code suivant

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"
  },

Touchez les points clés au tableau : L'important certaines parties de l'extrait de code dans l'image ci-dessus sont : "adminUserViewId in globalData: "", token : "" "
Ces deux paramètres sont des paramètres d'arrière-plan qui doivent être stockés par le front-end pour marquer l'état de connexion de l'utilisateur.

Créez ensuite un dossier de connexion et écrivez le code suivant dans 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>

Créez ensuite un dossier de connexion et écrivez le code suivant dans 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;
}

Écrivez le code suivant dans 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: '服务器君好累

[Recommandations associées]

1 Téléchargement du code source de la plateforme de compte public WeChat

. 2. Version d'exploitation du système de micro-commerce PigCms (centre commercial de micro-magasins indépendant + système de distribution à trois niveaux)

3 WeChat People Network v3.4.5 Version commerciale avancée. du code source de WeChat Rubik's Cube

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!