微信小程序 增、刪、改、查操作實例詳解
1.以收貨地址的增刪改查為例
2.文件目錄
<form bindsubmit="addSubmit"><view class="consignee"><text class="consignee-tit">收貨人信息</text><view class="consignee-main"><view class="flex flex-align-center flex-pack-justify"><text>姓名</text><input class="flex-1" name="name" type="number" maxlength="11" placeholder="請輸入收貨人姓名" /></view><view class="flex flex-align-center flex-pack-justify"><text>電話</text><input class="flex-1" name="mobile" type="number" maxlength="11" placeholder="請輸入手機號" /></view><view class="flex flex-align-center flex-pack-justify"><text>地址</text><input class="flex-1" name="address" type="text" maxlength="11" placeholder="請輸入地址" /></view></view></view><view class="delivery-time flex flex-align-center flex-pack-justify"><text>送貨時間</text><picker mode="date"></picker></view><view class="receipt-address"><view class="receipt-address-tit">收貨地址信息</view><view wx:for="{{addressInfo}}" wx:key="unique"><view class="receipt-address-list clearfix"><image src="../../images/address-icon.png"></image><view class="address-list-main"><view class="clearfix"><text>收貨地址{{item.address}}</text><text>1km</text></view><view class="address-info">收貨人{{item.name}}</view><view class="address-time">收貨人電話{{item.mobile}}</view><view data-deleteid="{{item.id}}" bindtap="deleteClick">刪除</view><view data-editid="{{item.id}}" bindtap="editClick">編輯</view></view></view></view></view><view class="receipt-true"><button class="btn_login" formType="submit">保存</button></view></form>前端頁面主要展示一個表單和已有收貨人信息
1.其中幾個關鍵點需要理解
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>，這個按鈕就是用來開啟提交事件的。
至于循環，拆開解
d.小程序給我們一個封裝好的方法onLoad: function()，當頁面加載的時候，調用這個方法。
var app = getApp()Page({data:{}, onLoad: function() { var that = this; //收貨地址首頁 wx.request({ //缺少用戶唯一標識，現在的在服務器的控制器里有一個假id = 2 url: 'https://shop.yunapply.com/home/shipping/index', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ "addressInfo": res.data.info, }) console.log(res.data.info); }, fail:function(){ wx.showToast({ title: '服務器網絡錯誤!', icon: 'loading', duration: 1500 }) } }) }})查
收貨地址的首頁，用于拉取當前用戶已有的收貨地址
var that = this;
不知道為什么要這樣做，可能是為了避免this 沖突或者語意不明確，將當前的對象，賦值給變量that
wx.request({})發起https請求
url: 'https://shop.com/home/shipping/index',所需要請求的網址接口
method: 'GET',請求的方式，默認是GET，當時POST的時候，必須聲明
data: {},發送的請求的數據
header: {},發送的頭信息，
GET方式的頭信息為：'Accept': 'application/json'
POST方式的頭信息為："Content-Type": "application/x-www-form-urlencoded"
success:function() 請求成功調用的方法
Fail:function() 請求失敗調用的方法
success: function(res) { that.setData({ "addressInfo": res.data.info, }) },res為調用成功以后服務器端返回的數據，
that.setData({"addressInfo": res.data.info,}) 添加數據到當前頁面的data對象，鍵名為addressInfo,鍵值是返回的數據，我需要的是res的data對象的info對象的所有信息
fail:function(){ wx.showToast({ title: '服務器網絡錯誤!', icon: 'loading', duration: 1500 }) }網絡請求失敗調用的方法
showToast類似于JS中的alert，彈出框，title 是彈出框的顯示的信息，icon是彈出框的圖標狀態，目前只有loading 和success這兩個狀態。duration是彈出框在屏幕上顯示的時間。
a.url是你請求的網址，比如以前在前端，POST表單中action=‘index.php'，這里的index.php是相對路徑，而小程序請求的網址必須是網絡絕對路徑。
b.'https://shop.yunapply.com/home/shipping/index',以GET方式請求HOME模塊下的Shipping控制下的index方法
c.將得到的值添加到data里
看HOME模塊下的Shipping控制下的index方法
public function index(){ //$id 為用戶名id 等以后可以通過token獲取或者session(id)什么的 $use_id = 2; $res = D('Shipping')->getAddress($use_id); if ($res == false){ $this->error('暫無收貨地址','',true); }else{ $this->success($res,'',true); }}查看Shipping模型中的getAddress()方法
/** * 獲取收貨地址信息 * @param $id 當前用戶id * @return 屬于用戶的所有地址 */public function getAddress($id){ $address_list = $this->where(array('user_id'=>$id))->select(); if ($address_list == false){ return false; } return $address_list;} 這樣就根據用戶是否有地址還返回相應的JSON數據
本例子的JSON數據是
{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"","city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27","modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}請求成功以后就將JSON添加到data{}中，并設置鍵值為addressInfo
那么接下來就是將這些信息展示在前端頁面上
<view wx:for="{{addressInfo}}" wx:key="unique"><view class="receipt-address-list clearfix"><image src="../../images/address-icon.png"></image><view class="address-list-main"><view class="clearfix"><text>收貨地址{{item.address}}</text><text>1km</text></view><view class="address-info">收貨人{{item.name}}</view><view class="address-time">收貨人電話{{item.mobile}}</view><view data-deleteid="{{item.id}}" bindtap="deleteClick">刪除</view><view data-editid="{{item.id}}" bindtap="editClick">編輯</view></view></view></view>控制屬性 wx:for 綁定一個數組，就是JS中的addressInfo這個數組，默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item ?？梢愿鶕{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}獲取到當前數據的地址、收貨人、電話和該條信息的id
循環之后就可以按照格式展示所有地址信息了，相當于TP模板中的foreach
刪
在前臺模板的循環數據里可以看到這樣一條標簽
event.currentTarget.dataset.deleteid;表示事件對象的目標的data-*的值
bindtap屬性是微信在模板頁中綁定點擊事件，deleteClick為觸發時間的方法名
在index.js中，刪除代碼如下：
//刪除地址 deleteClick:function(event){ var id = event.currentTarget.dataset.deleteid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/delAddress?id='+id, data: {}, method: 'GET', 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 }) } }) } 點擊前端刪除按鈕的時候，觸發deleteClick事件，可以傳入一個參數，代表事件對象。
event.currentTarget.dataset.deleteid;表示事件對象的目標的data-*的值
然后通過GET方式傳入url，在服務器端刪除功能如下
public function delAddress($id){ $res = D('Shipping')->where(array('id'=>$id))->delete(); if ($res){ $this->success('刪除成功','',true); }else{ $this->error('刪除失敗','',true); }}根據返回的JSON值就可以提示刪除成功與否
增、改
之前覺得增加和修改會和表單提交一樣簡單，但是做了一些還是覺得不一樣，好好在寫一遍。
首先查看前臺表單
<form bindsubmit="addSubmit"><view class="consignee"><text class="consignee-tit">收貨人信息</text><view class="consignee-main"><input name="id" type="hidden" value="{{addressEdit.id}}" /><view class="flex flex-align-center flex-pack-justify"><text>姓名</text><input class="flex-1" name="name" type="number" value="{{addressEdit.name}}" maxlength="11" placeholder="請輸入收貨人姓名" /></view><view class="flex flex-align-center flex-pack-justify"><text>電話</text><input class="flex-1" name="mobile" type="number" value="{{addressEdit.mobile}}" maxlength="11" placeholder="請輸入手機號" /></view><view class="flex flex-align-center flex-pack-justify"><text>地址</text><input class="flex-1" name="address" type="text" value="{{addressEdit.address}}" maxlength="-1" placeholder="請輸入地址" /></view></view></view><view wx:for="{{addressInfo}}" wx:key="unique"><view class="receipt-address-list clearfix"><image src="../../images/address-icon.png"></image><view class="address-list-main"><view class="clearfix"><text>收貨地址{{item.address}}</text><text>1km</text></view><view class="address-info">收貨人{{item.name}}</view><view class="address-time">收貨人電話{{item.mobile}}</view> <view data-deleteid="{{item.id}}" bindtap="deleteClick">刪除</view><view data-editid="{{item.id}}" bindtap="editClick">編輯</view> <view class="receipt-true"><button class="btn_login" formType="submit">保存</button></view></form>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>，這個按鈕就是用來開啟提交事件的。
d.由于添加地址和編輯地址都是在一個頁面的，所以我需要在每個表單中，加一個默認值變量，當點擊修改的時候，默認值就顯示在輸入框中。
e.表單中有一個編輯，綁定了事件editClick，當點擊這個按鈕的時候，就會進入編輯模式
添加和修改的放在一個函數里面，但是修改數據的顯示是另外一個函數
先說修改，點點擊編輯的時候，觸發editClick事件
JS如下：
editClick:function(event){ var that = this; var id = event.currentTarget.dataset.editid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/edit?id='+id, data: {}, method: 'GET', success: function(res){ if(res.data.status == 0){ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ that.setData({ "addressEdit": res.data.info, }) } }, fail:function(){ wx.showToast({ title: '服務器網絡錯誤!', icon: 'loading', duration: 1500 }) } }) },為了更好理解，貼個圖
最下面有一個保存按鈕，當點擊編輯的時候，觸發editClick:function(event),這個event是當前觸發事件的對象，
var id = event.currentTarget.dataset.editid; 就是獲取當前事件對象的dataset中的editid的值，這里id是當前地址的id
url: 'https://shop.com/home/shipping/edit?id='+id
Wx.request 的url，將id值放在url上，作為GET參數，傳遞到服務器。
data: {},是需要額外傳遞的數據
method: 'GET', 是數據傳遞方式 默認是“GET”，保持大寫
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
這里的data就是POST給服務器端的數據 以{name:value}的形式傳送
success:function()是請求狀態成功觸發是事件，也就是200的時候，注意，請求成功不是操作成功，請求只是這個程序到服務器端這條線的通的。
fail:function()就是網絡請求不成功，觸發的事件。
這里的一段代碼是和PHP后端程序有關系的，具體流程是這樣的，
1.GET通過數據到https://shop.com/home/Shipping/edit這個接口，用過THINKPHP的就會知道是HOME模塊下的Shipping控制下的edit方法
2.后端PHP代碼如下：
控制器 ShippingController.class.php
public function edit($id){ $res = D('Shipping')->find($id); $this->success($res,'',true);}也就是說將這條數據取出來，沒什么好說的。
that.setData({ "addressEdit": res.data.info, }) }這里請求成功以后，調用小程序 setData方法，將服務器端返回的信息放到addressEdit[]中，然后在前端頁面調用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}將數據展示出來，這就是修改時候的操作。
接下來是提交表單的操作
Js代碼如下
addSubmit:function(e){ if(e.detail.value.mobile.length==0||e.detail.value.name.length==0 ||e.detail.value.address.length==0){ wx.showToast({ title: '收貨人所有信息不得為空!', icon: 'loading', duration: 1500 }) }else if(e.detail.value.mobile.length != 11){ wx.showToast({ title: '請輸入11位手機號碼!', icon: 'loading', duration: 1500 }) }else{ wx.request({ url: 'https://shop.yunapply.com/home/shipping/save', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address}, 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 }) setTimeout(function(){ wx.navigateTo({ url:'../address/index' }) },1000) } }, fail:function(){ wx.showToast({ title: '服務器網絡錯誤!', icon: 'loading', duration: 1500 }) } }) } }在前端的FORM表單中，當點擊formtype=“submit”這個按鈕的時候，觸發addSubmit事件，前面的if都是JS驗證，防止用戶不填寫信息。
1.其他的request請求差不多，找幾個不一樣的
url: 'https://shop.yunapply.com/home/shipping/save',
調用服務器端的save方法
header: { "Content-Type": "application/x-www-form-urlencoded" },由于POST和GET傳送數據的方式不一樣，POST的header必須是
"Content-Type": "application/x-www-form-urlencoded"
GET的header可以是 'Accept': 'application/json'
data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},這里是需要POST到服務器端的數據
Save方法代碼
public function save(){ //$user_id $user_id = 2; if (IS_POST){ $shipping = D('Shipping'); if (!$shipping->create()){ $this->error($shipping->getError(),'',true); }else{ if (is_numeric($_POST['id'])){ if ($shipping->editAddress($_POST['id'])){ $this->success('地址修改成功','',true); }else{ $this->error('地址修改失敗','',true); } }else{ if ($shipping->addAddress($user_id)){ $this->success('添加地址成功','',true); }else{ $this->error('添加地址失敗','',true); } } } }}感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
