>[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},
~~~
