微信小程序 后台登录（非微信账号）实例详解

微信小程序 后台登录

实现效果图：

最近写了一个工具类的小程序，按需求要求不要微信提供的微信账号登录，需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录，很少有调用自己后台来登录的，所以写的时候各种坑，现在把趟好坑的代码共享给大家吧！（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:"http://airb.cakeboss.com.cn"
  // baseurl:"http://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 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
//获取应用实例
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: '服务器君好累????，请稍后重试',
     success: () => console.log('登录失败，请稍后重试。')
    })
   }
  })
 }
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！