这篇文章主要介绍了微信小程序 增、删、改、查操作实例详解的相关资料,这里附有实例代码，需要的朋友可以参考下
微信小程序 增、删、改、查操作实例详解
1.以收货地址的增删改查为例
2.文件目录
js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部 配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html
form bindsubmit= addSubmit view >前端页面主要展示一个表单和已有收货人信息
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表单中都要有一个提交按钮，
注册，这个按钮就是用来开启提交事件的。
至于循环，拆开解
d.小程序给我们一个封装好的方法onLoad: function()，当页面加载的时候，调用这个方法。
var app = getApp() Page({ data:{}, onLoad: function() { var that = this; //收货地址首页 wx.request({ //缺少用户唯一标识，现在的在服务器的控制器里有一个假id = 2 url: #39;https://shop.yunapply.com/home/shipping/index #39;, method: #39;GET #39;, data: {}, header: { #39;Accept #39;: #39;application/json #39; success: function(res) { that.setData({ addressInfo : res.data.info, console.log(res.data.info); fail:function(){ wx.showToast({ title: #39;服务器网络错误! #39;, icon: #39;loading #39;, 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: #39;服务器网络错误! #39;, icon: #39;loading #39;, 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( #39;Shipping #39;)- getAddress($use_id); if ($res == false){ $this- error( #39;暂无收货地址 #39;, #39; #39;,true); }else{ $this- success($res, #39; #39;,true); }查看Shipping模型中的getAddress()方法
/** * 获取收货地址信息 * @param $id 当前用户id * @return 属于用户的所有地址 public function getAddress($id) $address_list = $this- where(array( #39;user_id #39;= $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 >控制属性 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: #39;服务器网络错误! #39;, icon: #39;loading #39;, duration: 1500 }点击前端删除按钮的时候，触发deleteClick事件，可以传入一个参数，代表事件对象。
event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值
然后通过GET方式传入url，在服务器端删除功能如下
public function delAddress($id) $res = D( #39;Shipping #39;)- where(array( #39;id #39;= $id))- delete(); if ($res){ $this- success( #39;删除成功 #39;, #39; #39;,true); }else{ $this- error( #39;删除失败 #39;, #39; #39;,true); }根据返回的JSON值就可以提示删除成功与否
增、改
之前觉得增加和修改会和表单提交一样简单，但是做了一些还是觉得不一样，好好在写一遍。
首先查看前台表单
form bindsubmit= addSubmit view >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表单中都要有一个提交按钮，
注册，这个按钮就是用来开启提交事件的。
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: #39;服务器网络错误! #39;, icon: #39;loading #39;, 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( #39;Shipping #39;)- find($id); $this- success($res, #39; #39;,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: #39;https://shop.yunapply.com/home/shipping/save #39;, 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: #39;服务器网络错误! #39;, icon: #39;loading #39;, duration: 1500 }在前端的FORM表单中，当点击formtype=“submit”这个按钮的时候，触发addSubmit事件，前面的if都是JS验证，防止用户不填写信息。
1.其他的request请求差不多，找几个不一样的
url: #39;https://shop.yunapply.com/home/shipping/save #39;,调用服务器端的save方法
header: { Content-Type : application/x-www-form-urlencoded },由于POST和GET传送数据的方式不一样，POST的header必须是
Content-Type : application/x-www-form-urlencodedGET的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( #39;Shipping #39;); if (!$shipping- create()){ $this- error($shipping- getError(), #39; #39;,true); }else{ if (is_numeric($_POST[ #39;id #39;])){ if ($shipping- editAddress($_POST[ #39;id #39;])){ $this- success( #39;地址修改成功 #39;, #39; #39;,true); }else{ $this- error( #39;地址修改失败 #39;, #39; #39;,true); }else{ if ($shipping- addAddress($user_id)){ $this- success( #39;添加地址成功 #39;, #39; #39;,true); }else{ $this- error( #39;添加地址失败 #39;, #39; #39;,true); }以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序 向左滑动删除功能的实现
微信小程序button组件的使用介绍
以上就是微信小程序之增、删、改、查操作的代码实现的详细内容，更多请关注php中文网其它相关文章！
微信app下载
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！
浙公网安备33010502012046号