| 微信小程序登录功能实现（通过用户名和密码） | 您所在的位置：网站首页 › 坚果云怎么用微信登录账号密码 › 微信小程序登录功能实现（通过用户名和密码） |
|
通常我们在登录微信小程序的时候都是通过授权登录，各种博文上已经有了很多案例，这里记录一下自己实际开发过程中，通过用户名和密码请求登录的流程：
1、获取用户在用户名输入框输入的信息 wxml： 此处为事件名 js： getUserName: function(e) { var value = e.detail.value; //获取输入的内容 this.setData({ username:value,//改变page--data中username的值 }) wx.setStorageSync('username', value);//将获取到的username值存入本地缓存空间 },同理，用户密码也可以获取到 wxml： js： getPassword:function(e) { var value = e.detail.value; this.setData({ password: value, }) wx.setStorageSync('password', value); },
2、向后端发送请求交互，验证用户名密码 doLogin: function(e) { var that = this; if(that.data.username.length ==0 || that.data.password.length ==0){//校验非空 wx.showToast({ //弹框提示 icon: 'none', title: '用户名或密码不能为空！', duration: 2000, }) }else { wx.request({ //向后台发送请求 url: '你的请求地址', method: "get", header: { 'content-type': 'application/json' }, data: { username: this.data.username, //this.data.username 代表你data中username的值 password: this.data.password, }, success: function (res) { //res为后台返回给前端的数据 console.log("res.data"+res.data.code), that.setData({ userId: res.data.data, //保存userId code: res.data.code, }) console.log(res.data); if(that.data.code == 200){ //如果返回的code为200，代表用户名密码验证成功 wx.showToast({ title: '登录成功', }) wx.setStorageSync('userId', res.data.data); //保存userId至本地，以便随时调用 console.log(res.data.data); wx.redirectTo({ url: '../index/index', //跳转至首页 }) }else{ wx.showToast({ icon: 'none', title: '用户名或密码错误', }) } } }) } },
3、在js文件开始加载时，可以加上判断，如果该用户之前登陆过，则可以跳过登陆，直接进入首页 onLoad: function (options) { var that = this; wx.request({ url: 'https://192.168.10.163:8866/weixin/user/login', method: "get", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { username: wx.getStorageSync('username'), password: wx.getStorageSync('password'), }, success: function (res) { let code = res.data.code; let userId = res.data.data; console.log(code); console.log(userId); if(code == 200){ // wx.showToast({ // title: '登录成功', // }) wx.setStorageSync('userId', userId); wx.redirectTo({ url: '../index/index', }) } } }) },
|
| CopyRight 2018-2019 实验室设备网 版权所有 |