登陆界面
注册界面
功能分析 登陆模块： Login按钮：点击Login按钮，将文本框内容通过http协议的POST方法传递至后端服务器,成功则提示登陆成功，失败则提示登陆失败 Register按钮：点击Register按钮，跳转至注册界面 Reset按钮：点击Reset按钮，清空表单内容注册模块： Login按钮：点击Login按钮，跳转至登陆界面 Register按钮：点击Register按钮，将文本框内容通过http协议的POST方法传递至后端服务器，成功则提示注册成功，失败则提示注册失败 Reset按钮：点击Reset按钮，清空表单内容 目录结构 代码部分（附详细注释）login.wxml
<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>login.js
Page({ data: { //表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->js chosen: '' }, //登陆方法 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', //后端接口完整URL data: { 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为相对路径 }) }})register.wxml
<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>register.js
Page({ data: { //表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->js chosen: '' },//注册方法 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', //后端接口完整URL data: { 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为相对路径 }) }})