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


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入门第一课 jQuery选择符
Mar 14 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
微信小程序实现拼图小游戏
Oct 22 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实现链结人气统计
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
softmax及python实现过程解析
2019/09/30 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
新东网科技Java笔试题
2012/07/13 面试题
手机业务员岗位职责
2013/12/13 职场文书
硕士生工作推荐信
2014/03/07 职场文书
无毒社区工作方案
2014/05/23 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2019年大学推荐信
2019/06/24 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js