微信小程式之增、刪、改、查操作的程式碼實現
- 不言原創
- 2018-06-23 15:39:586912瀏覽
這篇文章主要介紹了微信小程序增、刪、改、查操作實例詳解的相關資料,這裡附有實例代碼，需要的朋友可以參考下
微信小程序增、刪、改、查操作實例詳解
1.以收貨地址的增刪改查為例
2.檔案目錄
js檔案是邏輯控制，主要是它發送請求和接收數據，
json 用於此頁面局部配置並且覆蓋全域app .json配置，
wxss用於頁面的樣式設置，
wxml就是頁面，相當於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="请输入收货人姓名" />
</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表單中都要有一個提交按鈕，
3993c6f6226c20b67508b2f5faca1f97登錄120d611986108da972f06c8ab0c8bab5，這個按鈕就是用來開啟提交事件的。
至於循環，拆開解
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表单中都要有一个提交按钮，
cbc47cc7c46af5112c7354a7ad9ae6ad注册65281c5ac262bf6d81768915a4a77ac0，这个按钮就是用来开启提交事件的。
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);
}
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是微信小程式之增、刪、改、查操作的程式碼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！