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


Posted in Javascript onMarch 31, 2017

微信小程序 后台登录

实现效果图:

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

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

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

Javascript 相关文章推荐
jQuery版Tab标签切换
Mar 16 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
JS实现扫雷项目总结
May 19 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 #Javascript
ES6新特性之Object的变化分析
Mar 31 #Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 #Javascript
ES6新数据结构Map功能与用法示例
Mar 31 #Javascript
基于AGS JS开发自定义贴图图层
Mar 31 #Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 #Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 #Javascript
You might like
php随机显示图片的简单示例
2014/02/15 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python实现flappy bird小游戏
2018/12/24 Python
Pandas的Apply函数具体使用
2020/07/21 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
华为python面试题
2016/05/03 面试题
优秀党支部书记事迹材料
2014/05/29 职场文书
学校教师读书活动总结
2014/07/08 职场文书
人事代理委托书
2014/09/27 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android