微信小程序 PHP后端form表单
1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。
2.昨天写了登录注册、忘记密码功能，他们实质上都是一个表单提交操作。因此就拿注册功能来写这个例子。
3.目录图
-
js文件是逻辑控制，主要是它发送请求和接收数据，
-
json 用于此页面局部 配置并且覆盖全局app.json配置，
-
wxss用于页面的样式设置，
-
wxml就是页面，相当于html
4.样式和json文件暂时不管了，我只是想回顾一下form表单的提交
5.Wxml文件代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<viewclass="load-head">
<imagesrc="../../images/return.png"/>
注册
</view>
<viewclass="login">
<formbindsubmit="formSubmit">
<viewclass="field clearfix">
<labelfor="name"><imagesrc="../../images/phone.png"/></label>
<inputid="name"name="mobile"class="login-input"type="text"placeholder="请输入手机号"/>
</view>
<viewclass="field clearfix">
<labelfor="password"><imagesrc="../../images/code.png"/></label>
<inputid="password"class="login-input"type="password"placeholder="请输入验证码"/>
<buttonclass="get-code"hover-class="code-hover">获取验证码</button>
</view>
<viewclass="field clearfix">
<labelfor="password"><imagesrc="../../images/password.png"/></label>
<inputid="password"name="password"class="login-input"type="password"placeholder="请设置6-20位登录密码"/>
</view>
<viewclass="field clearfix">
<labelfor="repassword"><imagesrc="../../images/password.png"/></label>
<inputid="repassword"name="repassword"class="login-input"type="password"placeholder="请输入确认密码"/>
</view>
<buttonclass="btn_login"formType="submit">注册</button>
</form>
<viewclass="reg_forget clearfix">
<navigatorurl="../login/index"class="btn_reg">登录</navigator>
<navigatorurl="../forget/index"class="btn_forget">忘记密码</navigator>
</view>
</view>
|
6.其中几个关键点需要理解
a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,
bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。
b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username']来接收。
C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，
<button formType="submit">注册</button>，这个按钮就是用来开启提交事件的。
7.index.js代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
Page({
data: {
},
formSubmit:function(e) {
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title:'手机号码或密码不得为空!',
icon:'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}elseif(e.detail.value.mobile.length != 11){
wx.showToast({
title:'请输入11位手机号码!',
icon:'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}elseif(e.detail.value.password.length <6 ||e.detail.value.password.length>20){
wx.showToast({
title:'请输入6-20密码!',
icon:'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}elseif(e.detail.value.password != e.detail.value.repassword){
wx.showToast({
title:'两次密码输入不一致!',
icon:'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else{
wx.request({
header: {
"Content-Type":"application/x-www-form-urlencoded"
},
method:"POST",
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
success:function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon:'loading',
duration: 1500
})
}else{
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon:'success',
duration: 1000
})
}
}
})
}
},
})
|
8.需要注意的是
Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果
data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。
formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象
下面是函数的执行，由于验证太多，我只拿一部分出来理解。
|
1
2
3
4
5
6
7
8
9
10
11
|
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title:'手机号码或密码不得为空!',
icon:'loading',
duration: 1500
})
|
这里的e，就是当前触发事件的对象，类似于html
onclick=“foo(this)”this对象，小程序封装了许多内置的调用方法，e.detail.value.mobile
就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度
showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。
9.重点来了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
wx.request({
header: {
"Content-Type":"application/x-www-form-urlencoded"
},
method:"POST",
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
success:function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon:'loading',
duration: 1500
})
}else{
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon:'success',
duration: 1000
})
}
},
fail:function(){
wx.showToast({
title:'服务器网络错误!',
icon:'loading',
duration: 1500
})
}
})
|
wx.request({})是小程序发起https请求，注意http是不行的。
这里
a.url是你请求的网址，比如以前在前端，POST表单中action=‘index.php'，这里的index.php是相对路径，而小程序请求的网址必须是网络绝对路径。
比如：https://shop.com/home/Login/register
b.
|
1
2
3
4
5
|
header: {
"Content-Type":"application/x-www-form-urlencoded"
},
|
由于POST和GET传送数据的方式不一样，POST的header必须是
"Content-Type": "application/x-www-form-urlencoded"
GET的header可以是 'Accept': 'application/json'
c.一定要写明method：“POST” 默认是“GET”，保持大写
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
这里的data就是POST给服务器端的数据 以{name:value}的形式传送
d.成功回调函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
success:function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon:'loading',
duration: 1500
})
}else{
wx.showToast({
title: res.data.info,
icon:'success',
duration: 1000
})
}
}
|
e.success:function()是请求状态成功触发是事件，也就是200的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。
fail:function()就是网络请求不成功，触发的事件。
f.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon:'loading',
duration: 1500
})
}else{
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon:'success',
duration: 1000
})
}
|
这里的一段代码是和PHP后端程序有关系的，具体流程是这样的，
1.POST通过数据到https://shop.com/home/Login/register这个接口，用过THINKPHP的就会知道是HOME模块下的Login控制下的register方法
2.register方法根据POST过来的数据，结合数据库进行二次验证，如果操作成功，返回什么，如果操作失败，返回什么
3.后端PHP代码如下：
控制器 LoginController.class.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/**
* 用户注册
*/
publicfunctionregister()
{
if(IS_POST) {
$User= D("User");
if(!$User->create($_POST, 4)) {
$this->error($User->getError(),'',true);
}else{
if($User->register()){
$this->success('注册成功!','',true);
}else{
$this->error('注册失败!','',true);
}
}
}
}
|
模型
UserModel.class.php 的register方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
publicfunctionregister()
{
$mobile = I('post.mobile');
$password = I('post.password');
$res = D('User')->add(array(
'mobile'=> $mobile,
'password'=>md5($password),
'modifytime'=>date("Y-m-d H:i:s")
));
return$res;
}
|
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！