最近寫了一個工具類的小程序，按需求要求不要微信提供的微信賬號登錄，需要調(diào)取后臺登錄接口來登錄。由于小程序大部分都是調(diào)取微信信息登錄，很少有調(diào)用自己后臺來登錄的，所以寫的時候各種坑，現(xiàn)在把趟好坑的代碼共享給大家吧！（PS：如有不妥之處，共勉之。）

廢話不說，直接上代碼

找到app.js在里面寫如下代碼

App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    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"
  },

敲黑板劃重點(diǎn)：上圖中的代碼片段重要的地方就是：“globalData中的 adminUserViewId: "",token: "" ”
這兩個參數(shù)是前端需要存儲的后臺參數(shù)，用來標(biāo)記用戶的登錄狀態(tài)的。

然后建一個login文件夾，在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>

然后建一個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
//獲取應(yīng)用實(shí)例
var app = getApp()
var util = require('../../utils/util.js');

Page({
  data: {
    motto: 'Hello World',
    username: "",
    password: ""
  },
  onLoad(options) {
    // 初始化提示框
    this.$wuxToast = app.wux(this).$wuxToast
  },
  /** 監(jiān)聽帳號輸入 */
  listenerUsernameInput: function (e) {
    this.data.username = e.detail.value;
  },
  /** 監(jiān)聽密碼輸入 */
  listenerPasswordInput: function (e) {
    this.data.password = e.detail.value;
  },
  // 登錄按鈕點(diǎn)擊事件
  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, //僅為示例，并非真實(shí)的接口地址
      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;
          // 設(shè)置全局變量的值
          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: '服務(wù)器君好累

【相關(guān)推薦】

1. 微信公眾號平臺源碼下載

2.?小豬cms(PigCms)微電商系統(tǒng)運(yùn)營版（獨(dú)立微店商城+三級分銷系統(tǒng)）

3.?微信人脈王v3.4.5高級商業(yè)版 微信魔方源碼

以上是微信開發(fā)之后臺登錄（非微信賬號登錄）的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！