微信小程序实现登录注册功能


Posted in Javascript onDecember 29, 2020

本文实例为大家分享了微信小程序实现登录注册的具体代码,供大家参考,具体内容如下

html:

<form bindsubmit="handleSubmit" wx:if="{{ onoff }}">
 用户名: <input type="text" name='username'/>
 密码: <input type="password" name='password'/>
 手机号: <input type="text" name='phone'/>
 <button form-type="submit"> 注册 </button>
</form>

<form bindsubmit="handleLogin" wx:else>
 用户名: <input type="text" name='username'/>
 密码: <input type="password" name='password'/>
 <button form-type="submit"> 登录 </button>
</form>

js:

// pages/login/login.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 onoff: false
 },
 handleSubmit(e){
 const {value} = e.detail;
 // console.log(value)
 const that = this;
 wx.request({
 url: 'http://pddapi.h5sm.com/index/pdduser/getpddregister',
 method: 'post',
 data: value,
 success(res){
 if(res.data.status == 1){
  that.setData({
  onoff: false
  })
 }
 }
 })
 },

 handleLogin(e){
 const {username, password} = e.detail.value;

 const that = this;
 wx.request({
 url: 'http://pddapi.h5sm.com/index/pdduser/getpddlogin',
 method: 'post',
 data:{
 username, password
 },
 success(res){
  console.log(res)
 }
 })
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

效果图:

微信小程序实现登录注册功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Node.js实现文件上传
Jul 05 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
puppeteer库入门初探
Jan 09 Javascript
Vue实现随机验证码功能
Dec 29 #Vue.js
js闭包的9个使用场景
Dec 29 #Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 #Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
elementui实现预览图片组件二次封装
Dec 29 #Javascript
You might like
yii操作session实例简介
2014/07/31 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python构建网页爬虫原理分析
2017/12/19 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
越南综合购物网站:Lazada越南
2019/06/10 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
邀请函的格式
2015/01/30 职场文书