本文将带你了解微信小程序开发之后台登录（非微信账号登录），希望本文对大家学微信有所帮助。

最近写了一个工具类的小程序，按需求要求不要微信提供的微信账号登录，需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录，很少有调用自己后台来登录的，所以写的时候各种坑，现在把趟好坑的代码共享给大家吧！（PS：如有不妥之处，共勉之。）废话不说，直接上代码找到app.js在里面写如下代码App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var   logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs',   logs)
  },
  globalData: {
    adminUserViewId:   "",
    token: "",
    userInfo: null,
      BaseURL:"//airb.cakeboss.com.cn"
    //   BaseURL:"//192.168.0.107:8080"
  },敲黑板划重点：上图中的代码片段重要的地方就是：“globalData中的 adminUserViewId: "",token: "" ”这两个参数是前端需要存储的后台参数，用来标记用户的登录状态的。然后建一个login文件夹，在login.wxml中写如下代码<import   src="../../components/toast.wxml" />
   
    <!-- is="toast" 匹配组件中的toast提示  如果用dialog的话这就是dialog   -->
    <template is="toast" data="{{ ...$wux.toast }}"   />
    <view>
      <view>
    <text>账号：</text>
    <input placeholder="请输入登录账号" bindinput="listenerUsernameInput"/>
  </view>
  <view>
    <text>密码：</text>
    <input placeholder="请输入密码" password="true"   bindinput="listenerPasswordInput"/>
  </view>
  <view>
    <button bindtap="loginAction">登录</button>
  </view>
    </view>然后建一个login文件夹，在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;
    }在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: '服务器君好累    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！