其中幾個(gè)關(guān)鍵點(diǎn)需要理解
a.Form表單，需要綁定一個(gè)submit事件，在小程序中，屬性為bindsubmit,
bindsubmit=”formSubmit”這里的屬性值formSubmit，命名可以為符合規(guī)范的任意值，相當(dāng)于以前html中的onsubmit=”formSubmit()”,是一個(gè)函數(shù)名，當(dāng)提交的時(shí)候觸發(fā)formSubmit這個(gè)函數(shù)事件，這個(gè)函數(shù)寫(xiě)在js中。
b.其他的屬性和之前的HTML差不多，注意的是，表單一定要有name=“value”，后端處理和以前一樣，比如name=”username”?PHP可以用$_POST[‘username’]來(lái)接收。
C.由于小程序沒(méi)有input submit這個(gè)按鈕，所以在每個(gè)form表單中都要有一個(gè)提交按鈕，
注冊(cè)，這個(gè)按鈕就是用來(lái)開(kāi)啟提交事件的。
index.js代碼
Page({
data: {
},
formSubmit: function(e) {
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title: '手機(jī)號(hào)碼或密碼不得為空!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else if(e.detail.value.mobile.length != 11){
wx.showToast({
title: '請(qǐng)輸入11位手機(jī)號(hào)碼!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else if(e.detail.value.password.length <6 ||e.detail.value.password.length>20){
wx.showToast({
title: '請(qǐng)輸入6-20密碼!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else if(e.detail.value.password != e.detail.value.repassword){
wx.showToast({
title: '兩次密碼輸入不一致!',
icon: 'loading',
duration: 1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else{
wx.request({
url: 'https://shop.yunapply.com/home/Login/register',
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()這個(gè)方法是必須有的，里面放置js對(duì)象，用于頁(yè)面加載的時(shí)候，呈現(xiàn)效果
data: {},數(shù)據(jù)對(duì)象，設(shè)置頁(yè)面中的數(shù)據(jù)，前端可以通過(guò)讀取這個(gè)對(duì)象里面的數(shù)據(jù)來(lái)顯示出來(lái)。
formSubmit: function小程序中方法都是 方法名:function()，其中function可以傳入一個(gè)參數(shù)，作為觸發(fā)當(dāng)前時(shí)間的對(duì)象
下面是函數(shù)的執(zhí)行，由于驗(yàn)證太多，我只拿一部分出來(lái)理解。
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title: '手機(jī)號(hào)碼或密碼不得為空!',
icon: 'loading',
duration: 1500
})
這里的e，就是當(dāng)前觸發(fā)事件的對(duì)象，類似于html onclick=“foo(this)”this對(duì)象，小程序封裝了許多內(nèi)置的調(diào)用方法，e.detail.value.mobile就是當(dāng)前對(duì)象name=”mobile”的對(duì)象的值e.detail.value.mobile.length就是這個(gè)值的長(zhǎng)度
showToast類似于JS中的alert，彈出框，title是彈出框的顯示的信息，icon是彈出框的圖標(biāo)狀態(tài)，目前只有l(wèi)oading和success這兩個(gè)狀態(tài)。duration是彈出框在屏幕上顯示的時(shí)間。
9.重點(diǎn)來(lái)了
wx.request({
url: 'https://shop.com/home/Login/register',
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: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
})
wx.request({})是小程序發(fā)起https請(qǐng)求，注意http是不行的。
這里
a.url是你請(qǐng)求的網(wǎng)址，比如以前在前端，POST表單中action=‘index.php’，這里的index.php是相對(duì)路徑，而小程序請(qǐng)求的網(wǎng)址必須是網(wǎng)絡(luò)絕對(duì)路徑。
比如：https://shop.com/home/Login/register
b.
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
由于POST和GET傳送數(shù)據(jù)的方式不一樣，POST的header必須是
"Content-Type": "application/x-www-form-urlencoded"
GET的header可以是'Accept': 'application/json'
c.一定要寫(xiě)明method：“POST” ?默認(rèn)是“GET”，保持大寫(xiě)
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
這里的data就是POST給服務(wù)器端的數(shù)據(jù) 以{name:value}的形式傳送
d.成功回調(diào)函數(shù)
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()是請(qǐng)求狀態(tài)成功觸發(fā)是事件，也就是200的時(shí)候，注意，請(qǐng)求成功不是操作成功，請(qǐng)求只是這個(gè)程序到服務(wù)器端這條線的通的。
fail:function()就是網(wǎng)絡(luò)請(qǐng)求不成功，觸發(fā)的事件。
f. 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后端程序有關(guān)系的，具體流程是這樣的，
1.POST通過(guò)數(shù)據(jù)到https://shop.com/home/Login/register這個(gè)接口，用過(guò)THINKPHP的就會(huì)知道是HOME模塊下的Login控制下的register方法
2.register方法根據(jù)POST過(guò)來(lái)的數(shù)據(jù)，結(jié)合數(shù)據(jù)庫(kù)進(jìn)行二次驗(yàn)證，如果操作成功，返回什么，如果操作失敗，返回什么
3.后端PHP代碼如下：
控制器LoginController.class.php
/**
* 用戶注冊(cè)
*/
public functionregister()
{
if(IS_POST) {
$User = D("User");
if(!$User->create($_POST, 4)) {
$this->error($User->getError(),'',true);
}else{
if($User->register()){
$this->success('注冊(cè)成功!','',true);
}else{
$this->error('注冊(cè)失敗!','',true);
}
}
}
}
模型
UserModel.class.php的register方法
public functionregister()
{
$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;
}
