2024年最全零基础学小程序005---小程序登陆注册功能实现,图文详解

分享

这次面试我也做了一些总结,确实还有很多要学的东西。相关面试题也做了整理,可以分享给大家,了解一下面试真题,想进大厂的或者想跳槽的小伙伴不妨好好利用时间来学习。学习的脚步一定不能停止!

薪酬缩水,“裸辞”奋战25天三面美团,交叉面却被吊打,我太难了

Spring Cloud实战

薪酬缩水,“裸辞”奋战25天三面美团,交叉面却被吊打,我太难了

Spring Boot实战

薪酬缩水,“裸辞”奋战25天三面美团,交叉面却被吊打,我太难了

面试题整理(性能优化+微服务+并发编程+开源框架+分布式)

本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友,可以点击这里获取

header: {

 "Content-Type": "application/x-www-form-urlencoded"

},

method: "POST",

data: {

 name: inputName,

 password: inputPassword

},

success: function(res) {

 console.log(res)

 if (res.statusCode != 200) {

  wx.showToast({ //这里提示失败原因

   title: res.data.message,

   icon: 'loading',

   duration: 1500

  })

 } else {

  wx.showToast({

   title: '注册成功', //这里成功

   icon: 'success',

   duration: 1000

  });

  that.setData({

   isLogin: true,

  }

  )

 }

},

fail: function(res) {

 console.log(res)

 wx.showToast({

  title: '请求失败',

  icon: 'none',

  duration: 1500

 })

}

});

}

},




注意点:  

if (res.statusCode != 200) 这里我们判断后台返回的statusCode,只有statusCode等于200时,才说明我们注册成功,下面时注册成功后后台返回的信息  

![注册成功.png](https://upload-images.jianshu.io/upload_images/6273713-63dd384862c99f2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



四,登陆功能实现

========



登陆其实和注册都是把用户名和密码传到后台,只不过登陆时,先那用户名去数据库里查,看是否存在这个用户。  

如果存在,就去比对我们传的密码和数据库里存的密码是否一样,如果一样就登陆成功,返回登陆信息。  

![登陆成功.png](https://upload-images.jianshu.io/upload_images/6273713-281001cd7526f89c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



下面贴出完整代码index.js

----------------



var inputName = “”;

var inputPassword = “”;

Page({

/**

  • 页面的初始数据

  • 初始化两个输入值

*/

data: {

isLogin: false

},

//获取用户输入的值a

inputName: function(e) {

inputName = e.detail.value;

},

//获取用户输入的值b

inputPassword: function(e) {

inputPassword = e.detail.value;

console.log(“输入的密码:” + inputPassword);

},

// 注册

register: function() {

var that = this;

var isrightful = that.checkInput();

if (isrightful) {

wx.request({

url: 'http://localhost:8080/user/testSave',

header: {

 "Content-Type": "application/x-www-form-urlencoded"

},

method: "POST",

data: {

 name: inputName,

 password: inputPassword

},

success: function(res) {

 console.log(res)

 if (res.statusCode != 200) {

  wx.showToast({ //这里提示失败原因

   title: res.data.message,

   icon: 'loading',

   duration: 1500

  })

 } else {

  wx.showToast({

   title: '注册成功', //这里成功

   icon: 'success',

   duration: 1000

  });

  that.setData({

   isLogin: true,

  }

  )

 }

},

fail: function(res) {

 console.log(res)

 wx.showToast({

  title: '请求失败',

  icon: 'none',

  duration: 1500

 })

}

});

}

},

// 登陆

login: function() {

var that = this;

var isrightful = that.checkInput();

if (isrightful) {

wx.request({

url: 'http://localhost:8080/user/testLogin',

header: {

 "Content-Type": "application/x-www-form-urlencoded"

},

method: "POST",

data: {

 name: inputName,

 password: inputPassword

},

success: function(res) {

 console.log(res)

 if (res.statusCode != 200) {

  wx.showToast({ //这里提示失败原因

   title: res.data.message,

   icon: 'loading',

   duration: 1500

  })

 } else {

  wx.showToast({

   title: '登陆成功', //这里成功

   icon: 'success',

   duration: 1000

  });

  that.setData({

   isLogin: true,

  }

  )

 }

},

fail: function(res) {

 console.log(res)

 wx.showToast({

  title: '请求失败',

  icon: 'none',

  duration: 1500

 })

}

});

}

},

//检测输入值

checkInput: function() {

if (inputName == “” || inputName == null ||

inputName == undefined) {

this.showErrorToastUtils(‘请输入用户名’);

} else if (inputPassword == “” || inputPassword == null || inputPassword == undefined) {

this.showErrorToastUtils(‘请输入密码’);

} else if (inputPassword.length < 6) {

this.showErrorToastUtils(‘密码至少要6位’);

}

总结

对于面试还是要好好准备的,尤其是有些问题还是很容易挖坑的,例如你为什么离开现在的公司(你当然不应该抱怨现在的公司有哪些不好的地方,更多的应该表明自己想要寻找更好的发展机会,自己的一些现实因素,比如对于我而言是现在应聘的公司离自己的家更近,又或者是自己工作到达了迷茫期,想跳出迷茫期等等)

image

Java面试精选题、架构实战文档

整理不易,觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持,我的动力;祝各位前程似锦,offer不断!

本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友,可以点击这里获取

自己的家更近,又或者是自己工作到达了迷茫期,想跳出迷茫期等等)

[外链图片转存中…(img-1MQHspCA-1715123985075)]

Java面试精选题、架构实战文档

整理不易,觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持,我的动力;祝各位前程似锦,offer不断!

本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友,可以点击这里获取

  • 21
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序中的新手引导功能可以通过以下代码实现: 1. 引导页: 在小程序的 app.js 文件中,添加以下代码: ``` App({ onLaunch: function () { wx.getStorage({ key: 'isShowed', success(res) { console.log(res.data) }, fail() { wx.setStorage({ key: "isShowed", data: true }) wx.navigateTo({ url: '/pages/guide/guide' }) } }) }, }) ``` 在小程序的 pages 目录下,创建一个名为 guide 的目录,并在该目录下创建一个名为 guide.js 和一个名为 guide.wxml 的文件。guide.wxml 中可以添加引导页的布局,如下所示: ``` <view class="guide-container"> <image class="guide-img" src="/images/guide.png"></image> <button class="guide-btn" bindtap="handleGoHome">立即开启</button> </view> ``` 2. 遮罩层: 在小程序的某个页面或功能模块上,添加一个遮罩层,并在遮罩层上添加提示信息和按钮等元素,如下所示: ``` <view class="mask" wx:if="{{showMask}}"> <view class="tip">请点击这里进行下一步操作</view> <button class="btn" bindtap="handleNext">下一步</button> </view> ``` 其中,showMask 为控制遮罩层是否显示的变量,handleNext 为点击下一步按钮时的事件处理函数。 3. 引导提示: 在小程序的某个关键节点上,添加一个引导提示,如下所示: ``` <view class="tip" wx:if="{{showTip}}">请点击这里进行下一步操作</view> ``` 其中,showTip 为控制引导提示是否显示的变量。 4. 交互式引导: 在小程序的某些功能模块中,可以通过交互式引导的方式,帮助用户更好地理解和掌握功能的使用方法。例如,在小程序中添加一个拖拽元素,可以通过以下代码实现交互式引导: ``` <view class="drag-container"> <view class="drag-element" bindtouchmove="handleDragMove"></view> <view class="tip" wx:if="{{showTip}}">请拖动元素到指定位置</view> </view> ``` 其中,showTip 为控制引导提示是否显示的变量,handleDragMove 为拖拽元素时的事件处理函数。 5. 小程序教程: 可以在小程序中添加一个教程模块,为用户提供详细的小程序使用方法和功能介绍。可以通过视频、图文等多种方式,为用户提供更好的使用体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值