作者:JoyJin,来自原文地址
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
form表单:
当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
bindtap 用户点击时触发
bindchange 用户输入完成时触发(建议要输入中文的input采用这个点击事件)
判断两次密码不一致用 !== 相比较 例如:if(that.data.password !== that.data.password_confirmation){ }
-
<form bindsubmit="loginTap">
-
<view class="section">
-
<input placeholder="输入手机号" maxlength="11" placeholder-style="color:#fff" name="phone" bindtap="phone"/> //placeholder-style 设置样式
-
</view> //hover-class="none" 设置按钮按下的样式及状态
-
<button hover-class="other-button-hover" form-type="submit" bindtap="phoneBtn"> 登录 </button>
-
</form>
-
Page({
-
data: loginData,
-
loginTap: function (e) {
-
var that = this //这句很重要
-
var loginData = e.detail.value //获取表单里所有key的值
-
wx.request({
-
method: 'POST',
-
url: 'https://....', //小程序只能采用https
-
data: loginData, //请求的数据
-
header: {'content-type': 'application/json'},
-
success: function (res) {
-
var tokend = res.data.token; //获取后台token
-
wx.setStorageSync('tokend', tokend) //存储token
-
if (res.code == 200) {
-
wx.switchTab({ //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数(需在 app.json 的 tabBar 字段定义的页面)
-
url: '../index/index',
-
})
-
}if (res.code == 400) {
-
wx.showToast({ //消息提示框,默认只能success,loading两种形式,可引进图片方式
-
title: '手机号码不正确',
-
image: '../Image/error.png',
-
duration: 2000
-
})
-
}
-
},
-
})
-
}
-
})
也可以就单独获取每个input的值
-
Page({
-
data:{
-
phone:''
-
},
-
phone:function(e){ //获取input值
-
var that = this;
-
that.setData({
-
phone: e.detail.value
-
})
-
},
-
phoneBtn: function (e) {
-
var that = this;
-
wx.request({
-
url: 'https://....',
-
method: 'GET',
-
header: { 'content-type': 'application/json' },
-
data: {
-
'phone': that.data.phone //请求的数据
-
},
-
success: function (res) {}
-
})
-
},
-
})