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


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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Vue2.x中的Render函数详解
May 30 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
小程序实现横向滑动日历效果
Oct 21 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP判断网络文件是否存在的方法
2015/03/12 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python对数据库操作
2016/03/28 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
工程招投标邀请书
2014/01/26 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
英语感谢信范文
2015/01/20 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫