微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...

微信小程序后台登录

实现效果图：

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

账号：

密码：

然后建一个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: '服务器君好累

微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...相关推荐

微信公众号发送小程序卡片_微信公众号将能够直接给用户推送小程序卡片，社交电商开始发力...
公众号或能在对话框中直接给粉丝推送小程序卡片了,这个功能似乎正在灰度测试中. 微信公众号将能够直接给用户推送小程序卡片,社交电商开始发力一直以来,微信公众号和微信小程序一直是腾讯基于微信生态的两款明 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
php微信接口怎么开发,php微信公众平台配置接口开发程序的方法实例详解
这篇文章主要为大家详细介绍了php微信公众平台配置接口开发程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在阅读这篇文章之前你要做以下的准备: 1.注册一个订阅号(通过微信公众平台https: ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
微信小程序php返回数组,微信小程序数组（增，删，改，查）等操作实例详解...
微信小程序数组(增,删,改,查)等操作最近在做一个小程序的demo.由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为例,给新手分享一些经验. 首先这是原 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...

微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...

微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...相关推荐

最新文章

热门文章

微信公众账号后台怎么解除小程序_微信小程序 后台登录（非微信账号）实例详解...

微信公众账号后台怎么解除小程序_微信小程序 后台登录（非微信账号）实例详解...相关推荐

最新文章

热门文章

微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...

微信公众账号后台怎么解除小程序_微信小程序后台登录（非微信账号）实例详解...相关推荐