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


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插件
Nov 24 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JS自定义滚动条效果
Mar 13 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
ext jquery 简单比较
2010/04/07 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
js+css实现打字效果
2020/06/24 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
python获取文件扩展名的方法
2015/07/06 Python
python中int与str互转方法
2018/07/02 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
擅自离岗检讨书
2014/02/11 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015年党员自评材料
2014/12/17 职场文书
武当山导游词
2015/02/03 职场文书
小学六一主持词开场白
2015/05/28 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书