>[info]js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部 配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html
·参考博客：[小程序form表单提交](http://www.cnblogs.com/zhouqi666/p/6272802.html)
>具体流程是这样的，
1.POST提交数据到 `http://127.0.0.1/miniApp/form.php` 这个接口
2.PHP根据POST过来的数据，结合数据库进行二次验证，如果操作成功，返回什么，如果操作失败，返回什么
### 表单视图
~~~
<view class="page">
<form bindsubmit="formSubmit">
<view class="weui-cells weui-cells_form">
<view class="weui-cell">
<view class="weui-cell__hd">
<view class="weui-label">name</view>
</view>
<view class="weui-cell__bd">
<input type="text" name="name" placeholder="请输入用户名" auto-focus/>
</view>
</view>
<view class="weui-cell">
<view class="weui-cell__hd">
<view class="weui-label">tel</view>
</view>
<view class="weui-cell__bd">
<input type="text" name="tel" placeholder="请输入手机号" auto-focus/>
</view>
</view>
<view class="weui-cell">
<view class="weui-cell__hd">
<view class="weui-label">password</view>
</view>
<view class="weui-cell__bd">
<input type="password" name="password" placeholder="请设置6-20位登录密码" auto-focus/>
</view>
</view>
<button class="weui-btn weui-btn_info" formType="submit">注册</button>
</view>
</form>
</view>
~~~
**关键点**
1、Form表单，需要绑定一个 `submit` 事件，在小程序中，属性为 `bindsubmit` ,
~~~
<form bindsubmit="formSubmit"></form>
~~~
这里的属性值 `formSubmit` ，命名可以为符合规范的任意值，相当于以前 html 中的 `onsubmit=”formSubmit()”`,是一个函数名，当提交的时候触发 `formSubmit` 这个函数事件，这个函数写在js中。
2、注意点：
>[warning]其他的属性和之前的HTML差不多；
注意的是，表单一定要有name=“value；
后端处理和以前一样，比如name=”username”；PHP可以用` $_POST[‘username’]`来接收。
3、由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，`<button formType="submit">注册</button>`，这个按钮就是用来开启提交事件的。
### js接口处理
~~~
// form.js
var app = getApp()
Page({
data: {},
},
formSubmit: function(e) {
console.log(e);
if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){
wx.showToast({
title: '手机号码或密码不得为空!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
} else {
wx.request({
url: 'http://127.0.0.1/miniApp/form.php',
data: {name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
"Content-Type": "application/x-www-form-urlencoded"
}, // 设置请求的 header
success: function(res){
console.log(res);
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
// success
},
fail: function(res) {
console.log(res);
// fail
}
})
}
}
})
~~~
**关键点**
>1、Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果
2、data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。
3、formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象
下面是函数的执行，由于验证太多，我只拿一部分出来理解。
~~~
if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){
wx.showToast({
title: '手机号码或密码不得为空!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}
~~~
#### e参数的信息
这里的e，就是当前触发事件的对象，类似于 `html onclick=“foo(this)”this` 对象，小程序封装了许多内置的调用方法，
`e.detail.value.name` 就是当前对象 `name=”name”` 的对象的值
`e.detail.value.mobile.name` 就是这个值的长度
#### showToast
showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。
#### wx.request
详细参考上一节的描述
1、url 填写表单提交后请求的地址
2、由于POST和GET传送数据的方式不一样
POST的header必须是
~~~
"Content-Type": "application/x-www-form-urlencoded"
~~~
GET的header可以是
~~~
'Accept': 'application/json'
~~~
3、一定要写明method：“POST” 默认是“GET”，保持大写
4、这里的data就是POST给服务器端的数据 以{name:value}的形式传送
~~~
data:{name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password},
~~~
