微信小程序登陆/注册界面及接口开发实战（二）

项目预览

登陆界面

注册界面

功能分析

登陆模块：Login按钮：点击Login按钮，将文本框内容通过http协议的POST方法传递至后端服务器,成功则提示登陆成功，失败则提示登陆失败Register按钮：点击Register按钮，跳转至注册界面Reset按钮：点击Reset按钮，清空表单内容
注册模块：Login按钮：点击Login按钮，跳转至登陆界面Register按钮：点击Register按钮，将文本框内容通过http协议的POST方法传递至后端服务器，成功则提示注册成功，失败则提示注册失败Reset按钮：点击Reset按钮，清空表单内容

目录结构

代码部分（附详细注释）

<view class="container"><view class="page-body"><view>这是一个登陆界面</view><form catchsubmit="formSubmit" catchreset="formReset"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd" style="margin: 30rpx 0" ><input class="weui-input" name="name" placeholder="用户名" /></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__bd" style="margin: 30rpx 0" ><input class="weui-input" password type="text" name="pwd" placeholder="密码" /></view></view><view class="btn-area"><button style="margin: 30rpx 0" type="primary" formType="submit" >Login</button><button style="margin: 30rpx 0" type="primary" bindtap="register" plain="true">Register</button><button style="margin: 30rpx 0" formType="reset">Reset</button></view></form></view></view>

Page({data: {//表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->jschosen: ''},//登陆方法formSubmit(e) {console.log('form发生了submit事件，携带数据为：', e.detail.value), //小程序表单自带API，e.detail.value即为表单值//触发登陆请求wx.request({method:"POST", //指定为http协议中的POST方法url: 'http://localhost:9000/user/login', //后端接口完整URLdata: {name: e.detail.value.name, //将表单中name的值绑定给对象的name属性pwd: e.detail.value.pwd  //将表单中pwd的值绑定给对象的pwd属性},header: {'content-type': 'application/json' // 设置传输格式为json格式，默认如此},success(res) {console.log(res.data)//如果返回值的code为0 提示登陆成功，否则提示登陆失败if(res.data.code == 0){ wx.showToast({title: '登陆成功',duration: 1000})}else{wx.showToast({title: '账号名或密码错误',duration: 1000})}}})},formReset(e) {console.log('form发生了reset事件，携带数据为：', e.detail.value)//通过setData方法清空表单this.setData({chosen: ''})},register(){console.log("register"),//通过小程序自带路由跳转API进行页面跳转wx.redirectTo({url: '../register/register', //注意url为相对路径})}
})

<view class="container"><view class="page-body"><view>这是一个注册界面</view><form catchsubmit="formSubmit" catchreset="formReset"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd" style="margin: 30rpx 0" ><input class="weui-input" name="name" placeholder="用户名" /></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__bd" style="margin: 30rpx 0" ><input class="weui-input" password type="text" name="pwd" placeholder="密码" /></view></view><view class="btn-area"><button style="margin: 30rpx 0" type="primary" bindtap="login" plain="true">Login</button><button style="margin: 30rpx 0" type="primary" formType="submit" >Register</button><button style="margin: 30rpx 0" formType="reset">Reset</button></view></form></view></view>

Page({data: {//表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->jschosen: ''},//注册方法formSubmit(e) {console.log('form发生了submit事件，携带数据为：', e.detail.value),//小程序表单自带API，e.detail.value即为表单值wx.request({method: "POST", //指定为http协议中的POST方法url: 'http://localhost:9000/user/register', //后端接口完整URLdata: {name: e.detail.value.name, //将表单中name的值绑定给对象的name属性pwd: e.detail.value.pwd  //将表单中pwd的值绑定给对象的pwd属性},header: {'content-type': 'application/json' // 设置传输格式为json格式，默认如此},success(res) {console.log(res.data)//如果返回值的code为0 提示登陆成功，否则提示登陆失败if (res.data.code == 0) {wx.showToast({title: '注册成功',duration: 1000})}else {wx.showToast({title: '注册失败',duration: 1000})}}})},formReset(e) {console.log('form发生了reset事件，携带数据为：', e.detail.value)//通过setData方法清空表单this.setData({chosen: ''})},login() {console.log("login"),//通过小程序自带路由跳转API进行页面跳转wx.redirectTo({url: '../login/login',//注意url为相对路径})}
})

微信小程序登陆/注册界面及接口开发实战（二）相关推荐

微信小程序-登陆注册滑块验证
微信小程序-登陆注册滑块验证一.创建自定义组件MoveVerify 二.在index页面使用一.创建自定义组件MoveVerify MoveVerify.js Component({/*** 组件 ...
微信小程序登录注册——云开发
微信小程序登录注册页面_云开发_调用云数据库源代码下载https://download.csdn.net/download/lujiebin/11241027 1.界面展示 2.代码 1.云开发初始 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序手机号注册获取验证码+验证判断
微信小程序手机号注册获取验证码+验证判断扫描二维码,进入首页,找到"小程序演示",效果类->手机号码注册效果,点击进入即可.
微信小程序的登录界面实现
微信小程序的登录界面实现 <view class="container"><view class="wrapper"><view ...
PHP —— 用 ThinkPHP5.0 实现微信小程序登陆
PHP -- 用 ThinkPHP5.0 实现微信小程序登陆 <工欲善其事,必先利其器> 大家好,之前学习了原生 PHP 和框架,今天我们运用框架 TP5.0 来实现一下微信小程序的用户 ...
新手入门微信小程序-从注册到开发（校庆头像框）
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
微信小程序汇率计算界面
微信小程序汇率计算界面最近在学习微信小程序,自己制作了一个自己想制作的小应用--汇率计算界面(真不知道为什么自己对汇率那么感兴趣XD ) 数据接入在获取数据之前先在data里面添加几个参数 mon ...
微信小程序——登陆凭证校验报错{errcode:40029,errmsg:invalid code, hints: [ req_id: weh8ka0297hc58 ]}
微信小程序登陆校验时需要使用临时登录凭证code ,appID和appsecret来向微信服务接口来获取 session_key 和 openid .但是后台向微信服务器请求时得到的一直是{" ...
微信小程序：简洁界面清爽让人非常舒服的一款短视频去水印微信小程序
总得来说这是一款以各大平台短视频去水印为主的一款小程序源码内含支持多平台的接口支持短视频和图集去水印小编个人觉得界面让人看起来特别的清爽特别的舒服没有那么多的花里胡哨的,另外小编也给它添加了多 ...

微信小程序登陆/注册界面及接口开发实战（二）

项目预览

功能分析

目录结构

代码部分（附详细注释）

微信小程序登陆/注册界面及接口开发实战（二）相关推荐

最新文章

热门文章