Backend login after WeChat development (login without WeChat account)

Recently I wrote a small tool program. According to the requirements, you do not need to log in with the WeChat account provided by WeChat. You need to call the background login interface to log in. Since most of the mini programs use WeChat information to log in, and rarely use their own backend to log in, there are various pitfalls when writing them. Now I will share the code with everyone! (PS: If there is anything wrong, please share it.)

Don’t talk nonsense, go directly to the code

Find app.js and write the following code in it

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

Knock on the blackboard to highlight: The important part of the code snippet in the picture above is: "globalData adminUserViewId: "",token: "" ”
These two parameters are background parameters that need to be stored by the front end and are used to mark the user's login status.

Then create a login folder and write the following 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>

Then create a login folder and write the following 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;
}

Write the following 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: '服务器君好累

[Related recommendations]

1. WeChat public account platform source code download

2. PigCms (PigCms) micro-e-commerce system operation version (independent micro-store mall + three-level distribution system)

3. WeChat Network King v3.4.5 Advanced Commercial Edition WeChat Rubik’s Cube Source Code

The above is the detailed content of Backend login after WeChat development (login without WeChat account). For more information, please follow other related articles on the PHP Chinese website!