相思资源网 Design By www.200059.com

微信小程序 后台登录

实现效果图:

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

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

然后建一个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('登录失败,请稍后重试。')
    })
   }
  })
 }
})

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

标签:
微信小程序,后台登录,微信小程序,后台登录实现实例,微信小程序,后台登录不用微信登录

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序 后台登录(非微信账号)实例详解”

暂无微信小程序 后台登录(非微信账号)实例详解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。