微信开发之后台登录（非微信账号登录）

废话不说，直接上代码

找到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: '服务器君好累

【相关推荐】

1. 微信公众号平台源码下载

2. 小猪cms(PigCms)微电商系统运营版（独立微店商城+三级分销系统）

3. 微信人脉王v3.4.5高级商业版 微信魔方源码

以上就是微信开发之后台登录（非微信账号登录）的详细内容，更多请关注php中文网其它相关文章！