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

最近写了一个工具类的小程序，按需求要求不要微信提供的微信账号登录，需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录，很少有调用自己后台来登录的，所以写的时候各种坑，现在把趟好坑的代码共享给大家吧！（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"    },

然后建一个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高级商业版 微信魔方源码

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