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

最近写了一个工具类的小程序，按需求要求不要微信提供的微信账号登录，需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录，很少有调用自己后台来登录的，所以写的时候各种坑，现在把趟好坑的代码共享给大家吧！（ps：如有不妥之处，共勉之。）

废话不说，直接上代码

找到app.js在里面写如下代码

App({
 onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync( #39;logs #39;) || []
 logs.unshift(Date.now())
 wx.setStorageSync( #39;logs #39;, 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 >
然后建一个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( #39;../../utils/util.js #39;);
Page({
 data: {
 motto: #39;Hello World #39;,
 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: #39;text #39;,
 timer: 1000,
 color: #39;#fff #39;,
 text: 用户名不能为空！ ,
 success: () = console.log( #39;用户名不能为空！ #39;)
 return;
 } if (passwords === ) {
 that.$wuxToast.show({
 type: #39;text #39;,
 timer: 1000,
 color: #39;#fff #39;,
 text: 密码不能为空！ ,
 success: () = console.log( #39;密码不能为空！ #39;)
 return;
 //加载提示框
 util.showLoading( 登录中... 
 var urlStr = app.globalData.BaseURL + #39;/api/adminUser/login #39;;
 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( #39;adminUserViewId #39;, adminUserViewId);
 wx.setStorageSync( #39;token #39;, token);
 console.log( 登录成功的adminUserViewId： + adminUserViewId);
 console.log( 登录成功的token： + token);
 // 切换到首页
 wx.switchTab({
 url: #39;/pages/index/index #39;
 } else {
 that.$wuxToast.show({
 type: #39;text #39;,
 timer: 1000,
 color: #39;#fff #39;,
 text: res.data.msg,
 success: () = console.log( #39;登录失败，请稍后重试。 #39; + res.data.msg)
 fail: function () {
 util.hideToast();
 console.log( 登录失败 
 that.$wuxToast.show({
 type: #39;text #39;,
 timer: 1000,
 color: #39;#fff #39;,
 text: #39;服务器君好累
【相关推荐】
1. 微信公众号平台源码下载
2. 小猪cms(PigCms)微电商系统运营版（独立微店商城+三级分销系统）
3. 微信人脉王v3.4.5高级商业版 微信魔方源码
以上就是微信开发之后台登录（非微信账号登录）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！