微信小程序 增、刪、改、查操作實(shí)例詳解
微信小程序 增、刪、改、查操作實(shí)例詳解
1.以收貨地址的增刪改查為例
2.文件目錄
- js文件是邏輯控制，主要是它發(fā)送請(qǐng)求和接收數(shù)據(jù)，
- json 用于此頁(yè)面局部 配置并且覆蓋全局app.json配置，
- wxss用于頁(yè)面的樣式設(shè)置，
- wxml就是頁(yè)面，相當(dāng)于html
<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="請(qǐng)輸入收貨人姓名" />
</view>
<view class="flex flex-align-center flex-pack-justify">
<text>電話</text>
<input class="flex-1" name="mobile" type="number" maxlength="11" placeholder="請(qǐng)輸入手機(jī)號(hào)" />
</view>
<view class="flex flex-align-center flex-pack-justify">
<text>地址</text>
<input class="flex-1" name="address" type="text" maxlength="11" placeholder="請(qǐng)輸入地址" />
</view>
</view>
</view>
<view class="delivery-time flex flex-align-center flex-pack-justify">
<text>送貨時(shí)間</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">收貨人{(lán){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>
前端頁(yè)面主要展示一個(gè)表單和已有收貨人信息
1.其中幾個(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ù)寫在js中。
b.其他的屬性和之前的HTML差不多，注意的是，表單一定要有name=“value”，后端處理和以前一樣，比如name=”username” PHP可以用 $_POST[‘username']來接收。
c.由于小程序沒有input submit這個(gè)按鈕，所以在每個(gè)form表單中都要有一個(gè)提交按鈕，
<button formType="submit">注冊(cè)</button>，這個(gè)按鈕就是用來開啟提交事件的。
至于循環(huán)，拆開解
d.小程序給我們一個(gè)封裝好的方法onLoad: function()，當(dāng)頁(yè)面加載的時(shí)候，調(diào)用這個(gè)方法。
var app = getApp()
Page({
data:{},
onLoad: function() {
var that = this;
//收貨地址首頁(yè)
wx.request({
//缺少用戶唯一標(biāo)識(shí)，現(xiàn)在的在服務(wù)器的控制器里有一個(gè)假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: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
})
}
})
查
收貨地址的首頁(yè)，用于拉取當(dāng)前用戶已有的收貨地址
var that = this;
不知道為什么要這樣做，可能是為了避免this 沖突或者語(yǔ)意不明確，將當(dāng)前的對(duì)象，賦值給變量that
wx.request({})發(fā)起https請(qǐng)求
url: 'https://shop.com/home/shipping/index',所需要請(qǐng)求的網(wǎng)址接口
method: 'GET',請(qǐng)求的方式，默認(rèn)是GET，當(dāng)時(shí)POST的時(shí)候，必須聲明
data: {},發(fā)送的請(qǐng)求的數(shù)據(jù)
header: {},發(fā)送的頭信息，
GET方式的頭信息為：'Accept': 'application/json'
POST方式的頭信息為："Content-Type": "application/x-www-form-urlencoded"
success:function() 請(qǐng)求成功調(diào)用的方法
Fail:function() 請(qǐng)求失敗調(diào)用的方法
success: function(res) {
that.setData({
"addressInfo": res.data.info,
})
},
res為調(diào)用成功以后服務(wù)器端返回的數(shù)據(jù)，
that.setData({"addressInfo": res.data.info,}) 添加數(shù)據(jù)到當(dāng)前頁(yè)面的data對(duì)象，鍵名為addressInfo,鍵值是返回的數(shù)據(jù)，我需要的是res的data對(duì)象的info對(duì)象的所有信息
fail:function(){
wx.showToast({
title: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
網(wǎng)絡(luò)請(qǐng)求失敗調(diào)用的方法
showToast類似于JS中的alert，彈出框，title 是彈出框的顯示的信息，icon是彈出框的圖標(biāo)狀態(tài)，目前只有l(wèi)oading 和success這兩個(gè)狀態(tài)。duration是彈出框在屏幕上顯示的時(shí)間。
a.url是你請(qǐng)求的網(wǎng)址，比如以前在前端，POST表單中action=‘index.php'，這里的index.php是相對(duì)路徑，而小程序請(qǐng)求的網(wǎng)址必須是網(wǎng)絡(luò)絕對(duì)路徑。
b.'https://shop.yunapply.com/home/shipping/index',以GET方式請(qǐng)求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('暫無(wú)收貨地址','',true);
}else{
$this->success($res,'',true);
}
}
查看Shipping模型中的getAddress()方法
/**
* 獲取收貨地址信息
* @param $id 當(dāng)前用戶id
* @return 屬于用戶的所有地址
*/
public function getAddress($id)
{
$address_list = $this->where(array('user_id'=>$id))->select();
if ($address_list == false){
return false;
}
return $address_list;
}
這樣就根據(jù)用戶是否有地址還返回相應(yīng)的JSON數(shù)據(jù)
本例子的JSON數(shù)據(jù)是
{"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":""}
請(qǐng)求成功以后就將JSON添加到data{}中，并設(shè)置鍵值為addressInfo
那么接下來就是將這些信息展示在前端頁(yè)面上
<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">收貨人{(lán){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 綁定一個(gè)數(shù)組，就是JS中的addressInfo這個(gè)數(shù)組，默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item ?？梢愿鶕?jù){{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}獲取到當(dāng)前數(shù)據(jù)的地址、收貨人、電話和該條信息的id
循環(huán)之后就可以按照格式展示所有地址信息了，相當(dāng)于TP模板中的foreach
刪
在前臺(tái)模板的循環(huán)數(shù)據(jù)里可以看到這樣一條標(biāo)簽
event.currentTarget.dataset.deleteid;表示事件對(duì)象的目標(biāo)的data-*的值
bindtap屬性是微信在模板頁(yè)中綁定點(diǎn)擊事件，deleteClick為觸發(fā)時(shí)間的方法名
在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
})
//刪除之后應(yīng)該有一個(gè)刷新頁(yè)面的效果，等和其他頁(yè)面刷新跳轉(zhuǎn)一起做
}
},
fail:function(){
wx.showToast({
title: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
})
}
點(diǎn)擊前端刪除按鈕的時(shí)候，觸發(fā)deleteClick事件，可以傳入一個(gè)參數(shù)，代表事件對(duì)象。
event.currentTarget.dataset.deleteid;表示事件對(duì)象的目標(biāo)的data-*的值
然后通過GET方式傳入url，在服務(wù)器端刪除功能如下
public function delAddress($id)
{
$res = D('Shipping')->where(array('id'=>$id))->delete();
if ($res){
$this->success('刪除成功','',true);
}else{
$this->error('刪除失敗','',true);
}
}
根據(jù)返回的JSON值就可以提示刪除成功與否
增、改
之前覺得增加和修改會(huì)和表單提交一樣簡(jiǎn)單，但是做了一些還是覺得不一樣，好好在寫一遍。
首先查看前臺(tái)表單
<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="請(qǐng)輸入收貨人姓名" />
</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="請(qǐng)輸入手機(jī)號(hào)" />
</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="請(qǐng)輸入地址" />
</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">收貨人{(lán){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表單，需要綁定一個(gè)submit事件，在小程序中，屬性為bindsubmit,
bindsubmit=”formSubmit” 這里的屬性值formSubmit，命名可以為符合規(guī)范的任意值，相當(dāng)于以前html中的 onsubmit=”formSubmit()”,是一個(gè)函數(shù)名，當(dāng)提交的時(shí)候觸發(fā)formSubmit這個(gè)函數(shù)事件，這個(gè)函數(shù)寫在js中。
b.其他的屬性和之前的HTML差不多，注意的是，表單一定要有name=“value”，后端處理和以前一樣，比如name=”username” PHP可以用 $_POST[‘username']來接收。
c.由于小程序沒有input submit這個(gè)按鈕，所以在每個(gè)form表單中都要有一個(gè)提交按鈕，
<button formType="submit">注冊(cè)</button>，這個(gè)按鈕就是用來開啟提交事件的。
d.由于添加地址和編輯地址都是在一個(gè)頁(yè)面的，所以我需要在每個(gè)表單中，加一個(gè)默認(rèn)值變量，當(dāng)點(diǎn)擊修改的時(shí)候，默認(rèn)值就顯示在輸入框中。
e.表單中有一個(gè)編輯，綁定了事件editClick，當(dāng)點(diǎn)擊這個(gè)按鈕的時(shí)候，就會(huì)進(jìn)入編輯模式
添加和修改的放在一個(gè)函數(shù)里面，但是修改數(shù)據(jù)的顯示是另外一個(gè)函數(shù)
先說修改，點(diǎn)點(diǎn)擊編輯的時(shí)候，觸發(fā)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: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
})
},
為了更好理解，貼個(gè)圖
最下面有一個(gè)保存按鈕，當(dāng)點(diǎn)擊編輯的時(shí)候，觸發(fā)editClick:function(event),這個(gè)event是當(dāng)前觸發(fā)事件的對(duì)象，
var id = event.currentTarget.dataset.editid; 就是獲取當(dāng)前事件對(duì)象的dataset中的editid的值，這里id是當(dāng)前地址的id
url: 'https://shop.com/home/shipping/edit?id='+id
Wx.request 的url，將id值放在url上，作為GET參數(shù)，傳遞到服務(wù)器。
data: {},是需要額外傳遞的數(shù)據(jù)
method: 'GET', 是數(shù)據(jù)傳遞方式 默認(rèn)是“GET”，保持大寫
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
這里的data就是POST給服務(wù)器端的數(shù)據(jù) 以{name:value}的形式傳送
success:function()是請(qǐng)求狀態(tài)成功觸發(fā)是事件，也就是200的時(shí)候，注意，請(qǐng)求成功不是操作成功，請(qǐng)求只是這個(gè)程序到服務(wù)器端這條線的通的。
fail:function()就是網(wǎng)絡(luò)請(qǐng)求不成功，觸發(fā)的事件。
這里的一段代碼是和PHP后端程序有關(guān)系的，具體流程是這樣的，
1.GET通過數(shù)據(jù)到https://shop.com/home/Shipping/edit這個(gè)接口，用過THINKPHP的就會(huì)知道是HOME模塊下的Shipping控制下的edit方法
2.后端PHP代碼如下：
控制器 ShippingController.class.php
public function edit($id)
{
$res = D('Shipping')->find($id);
$this->success($res,'',true);
}
也就是說將這條數(shù)據(jù)取出來，沒什么好說的。
that.setData({
"addressEdit": res.data.info,
})
}
這里請(qǐng)求成功以后，調(diào)用小程序 setData方法，將服務(wù)器端返回的信息放到addressEdit[]中，然后在前端頁(yè)面調(diào)用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}將數(shù)據(jù)展示出來，這就是修改時(shí)候的操作。
接下來是提交表單的操作
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: '請(qǐng)輸入11位手機(jī)號(hào)碼!',
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: '服務(wù)器網(wǎng)絡(luò)錯(cuò)誤!',
icon: 'loading',
duration: 1500
})
}
})
}
}
在前端的FORM表單中，當(dāng)點(diǎn)擊formtype=“submit”這個(gè)按鈕的時(shí)候，觸發(fā)addSubmit事件，前面的if都是JS驗(yàn)證，防止用戶不填寫信息。
1.其他的request請(qǐng)求差不多，找?guī)讉€(gè)不一樣的
url: 'https://shop.yunapply.com/home/shipping/save',
調(diào)用服務(wù)器端的save方法
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'
data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},
這里是需要POST到服務(wù)器端的數(shù)據(jù)
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);
}
}
}
}
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- 詳解微信小程序開發(fā)(項(xiàng)目從零開始)
- 微信小程序 刪除項(xiàng)目工程實(shí)現(xiàn)步驟
- 微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)（包括后端）
- 基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
- 微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
- 簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)
- 微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
- 微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-目錄結(jié)構(gòu)介紹
- 微信小程序開發(fā)（二）圖片上傳+服務(wù)端接收詳解
- 微信小程序 實(shí)戰(zhàn)小程序?qū)嵗?/a>
- 微信小程序?qū)W習(xí)總結(jié)（一）項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
相關(guān)文章
這篇文章主要介紹了微信小程序 Image組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
umi插件開發(fā)仿dumi項(xiàng)目加載markdown文件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項(xiàng)目加載markdown文件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
使用JavaScript練習(xí)動(dòng)畫最好的方式封面過渡
這篇文章主要為大家介紹了使用JavaScript練習(xí)動(dòng)畫最好的方式封面過渡實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了JavaScript?history?對(duì)象詳解，history?對(duì)象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因?yàn)?history?是?window?的屬性，所以每個(gè)?window?都有自己的?history?對(duì)象，更多詳細(xì)內(nèi)容請(qǐng)參考下面文章內(nèi)容2021-11-11
自動(dòng)檢查并替換文本框內(nèi)的字符...2006-06-06
JavaScript中使用toLocaleString數(shù)字格式化處理詳解
這篇文章主要為大家介紹了JavaScript中使用toLocaleString數(shù)字格式化處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS前端同源策略和跨域及防抖節(jié)流詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序富文本渲染引擎的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
微信小程序 頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解的相關(guān)資料,這里附有實(shí)例代碼幫助到家學(xué)習(xí)理解，需要的朋友可以參考下2017-01-01