重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

微信开发之后台登录(非微信账号登录)

时间:2020-09-13 14:30:07 作者:重庆seo小潘 来源:
最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(PS:如有不妥之处,共勉之

最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录。由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(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 alt="微信开发之后台登录(非微信账号登录)" 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('../../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高级商业版 微信魔方源码以上就是微信开发之后台登录(非微信账号登录)的详细内容,更多请关注小潘博客其它相关文章!