微信小程序表单提交传值
1. 表单提交事件
全局变量存储在app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
} //全局变量
})
登录页面:index.wxml
请输入用户名"/>
请输入密码"/>
//登录按钮
登录页面js: index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
formSubmit: function (e) { //表单提交绑定事件
if (e.detail.value.username.length == 0 || e.detail.value.password.length == 0) {
wx.showToast({
title: '用户名或密码不得为空!',
icon: 'loading',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else {
wx.request({ //后台交互
url: 'http://localhost/xxxx/zzzz/user_login',
//指向方法, 本地用http:\\... 线上必须是https:\\...
header: {
"Content-Type": "application/x-www-form-urlencoded"
}, //标明格式, 必不可少
method: "POST", //传递数据类型
data: { login_info: e.detail.value.username, password: e.detail.value.password }, //传输数据
success: function (res) { //返回信息,类似于ajax-json交互
if (res.data.status == 1) {
wx.showToast({
title: 'success',
icon: 'success',
duration: 1500
}),
getApp().globalData.userInfo = res.data.username;
//将信息存储到app.js的全局变量里,方便以后调用,
wx.navigateTo({
url: '../reg/reg'
}) //跳转下一页面
} else {
wx.showToast({
title:'failed',
icon: 'success',
duration: 1000
})
}
}
})
}
},
})
登录后台逻辑:simple.php里的user_login
function user_login(){
$login_info = IFilter::act(IReq::get('login_info','post'));
$password = IReq::get('password','post');
$pwd=md5($password);
$sellerObj = new IModel('user');
$swhere = ' username = "'.$login_info.'" and password = "'.$pwd.'"';
$checkCount = $sellerObj->query($swhere,"id",false,'',1);
if(!empty($checkCount)){
echo json_encode(array('status'=>1,'username'=>$login_info));
}else{
echo json_encode(array('status'=>0));
//必须返回json格式
}
}
跳转页面js逻辑处理: reg.js
//获取应用实例
const app = getApp()
Page({
onLoad: function (options) {
this.setData({
username: getApp().globalData.userInfo
//页面加载时获取userInfo变量信息赋值给username
})
},
})
跳转页面: reg.wxml
{{username}}