详解微信小程序中增、删、改、查操作实例代码

作者：weidnermennenga_153 | 来源：互联网 | 2017-05-11 02:02

这篇文章主要介绍了微信小程序增、删、改、查操作实例详解的相关资料,这里附有实例代码，需要的朋友可以参考下

微信小程序增、删、改、查操作实例详解

1.以收货地址的增删改查为例

2.文件目录

js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html




收货人信息





姓名







电话







地址











送货时间







收货地址信息









收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

删除

编辑

前端页面主要展示一个表单和已有收货人信息

1.其中几个关键点需要理解

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 Onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username&＃39;]来接收。

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: &＃39;https://shop.com/home/shipping/index&＃39;,所需要请求的网址接口

method: &＃39;GET&＃39;,请求的方式，默认是GET，当时POST的时候，必须声明

data: {},发送的请求的数据

header: {},发送的头信息，

GET方式的头信息为：&＃39;Accept&＃39;: &＃39;application/json&＃39;

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&＃39;，这里的index.php是相对路径，而小程序请求的网址必须是网络绝对路径。

b.&＃39;https://shop.yunapply.com/home/shipping/index&＃39;,以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

那么接下来就是将这些信息展示在前端页面上









收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

删除

编辑

控制属性 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: &＃39;https://shop.yunapply.com/home/shipping/delAddress?id=&＃39;+id,

   data: {},

   method: &＃39;GET&＃39;,

   success: function(res){

    if(res.data.status == 0){

     wx.showToast({

      title: res.data.info,

      icon: &＃39;loading&＃39;,

      duration: 1500

     })

    }else{

     wx.showToast({

      title: res.data.info,

      icon: &＃39;success&＃39;,

      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值就可以提示删除成功与否

增、改

之前觉得增加和修改会和表单提交一样简单，但是做了一些还是觉得不一样，好好在写一遍。

首先查看前台表单




收货人信息







姓名







电话







地址

















收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

  删除

编辑

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

c.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

，这个按钮就是用来开启提交事件的。

d.由于添加地址和编辑地址都是在一个页面的，所以我需要在每个表单中，加一个默认值变量，当点击修改的时候，默认值就显示在输入框中。

e.表单中有一个编辑，绑定了事件editClick，当点击这个按钮的时候，就会进入编辑模式

添加和修改的放在一个函数里面，但是修改数据的显示是另外一个函数

先说修改，点点击编辑的时候，触发editClick事件

JS如下：

editClick:function(event){

  var that = this;

  var id = event.currentTarget.dataset.editid;

  wx.request({

   url: &＃39;https://shop.yunapply.com/home/shipping/edit?id=&＃39;+id,

   data: {},

   method: &＃39;GET&＃39;,

   success: function(res){

    if(res.data.status == 0){

     wx.showToast({

      title: res.data.info,

      icon: &＃39;loading&＃39;,

      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: &＃39;https://shop.com/home/shipping/edit?id=&＃39;+id

Wx.request 的url，将id值放在url上，作为GET参数，传递到服务器。

data: {},是需要额外传递的数据

method: &＃39;GET&＃39;, 是数据传递方式默认是“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: &＃39;收货人所有信息不得为空!&＃39;,

    icon: &＃39;loading&＃39;,

    duration: 1500

   })

  }else if(e.detail.value.mobile.length != 11){

    wx.showToast({

    title: &＃39;请输入11位手机号码!&＃39;,

    icon: &＃39;loading&＃39;,

    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: &＃39;loading&＃39;,

          duration: 1500

         })

       }else{

         wx.showToast({

          title: res.data.info,

          icon: &＃39;success&＃39;,

          duration: 1000

         })

         setTimeout(function(){

          wx.navigateTo({

           url:&＃39;../address/index&＃39;

          })

         },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-urlencoded"

GET的header可以是 &＃39;Accept&＃39;: &＃39;application/json&＃39;

 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社区其它相关文章！

推荐阅读

post
小程序的授权和登陆

小程序的授权和登陆 ... [详细]

蜡笔小新 2024-11-14 19:07:05
post
PHP 基础与数据库操作

本文介绍了 PHP 的基本概念、服务器与客户端的工作原理，以及 PHP 如何与数据库交互。同时，还涵盖了常见的数据库操作和安全性问题。 ... [详细]

蜡笔小新 2024-11-17 15:45:08
post
从CodeIgniter中提取图像处理组件

本指南旨在帮助开发者在未使用CodeIgniter框架的情况下，如何独立使用其强大的图像处理功能，包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]

蜡笔小新 2024-11-20 19:57:35
import
使用Echarts for Weixin 小程序实现中国地图及区域点击事件

本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图，并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]

蜡笔小新 2024-11-18 19:37:06
java
Cookie学习小结

Cookie学习小结 ... [详细]

蜡笔小新 2024-11-14 16:26:25
java
调试利器SSH隧道

在开发微信公众号或小程序的时候，由于微信平台规则的限制，部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发，因为这能快速的看到 ... [详细]

蜡笔小新 2024-11-21 11:15:53
java
实践指南：使用Express、Create React App与MongoDB搭建React开发环境

本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境，旨在为开发者提供一套完整的解决方案，包括环境搭建、数据模拟及前后端交互。 ... [详细]

蜡笔小新 2024-11-20 10:05:15
string
微信小程序开发指南：创建动态电影选座界面

本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件，提高用户体验。通过合理的布局和交互设计，使用户能够轻松选择心仪的座位。 ... [详细]

蜡笔小新 2024-11-19 15:36:11
string
JavaScript 实现图片文件转Base64编码的方法

本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串，适用于Web前端开发中图片上传前的预处理。 ... [详细]

蜡笔小新 2024-11-19 12:43:15
string
MySQL Administrator: 监控与管理工具

本文介绍了 MySQL Administrator 的主要功能，包括图形化监控 MySQL 服务器的实时状态、连接健康度、内存健康度以及如何创建自定义的健康图表。此外，还详细解释了状态变量和系统变量的管理。 ... [详细]

蜡笔小新 2024-11-18 08:20:16
java
阿里云 Aliplayer高级功能介绍(八)：安全播放

如何保障视频内容的安全，不被盗链、非法下载和传播，阿里云视频点播已经有一套完善的机 ... [详细]

蜡笔小新 2024-11-15 18:04:15
cookie
DVWA学习笔记系列：深入理解CSRF攻击机制

DVWA学习笔记系列：深入理解CSRF攻击机制 ... [详细]

蜡笔小新 2024-11-11 13:19:51
java
WordPress Duplicator 0.4.4 版本存在跨站脚本攻击漏洞分析

在对WordPress Duplicator插件0.4.4版本的安全评估中，发现其存在跨站脚本（XSS）攻击漏洞。此漏洞可能被利用进行恶意操作，建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的，使用时需自行承担风险。漏洞编号：HTB23162。 ... [详细]

蜡笔小新 2024-11-10 13:16:43
window
2022年2月微信小程序 app.json 配置详解：启用调试模式

本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式（debug），并通过实际案例展示其配置方法和应用场景。 ... [详细]

蜡笔小新 2024-11-14 08:21:10
window
微信小程序详解：概念、功能与优势

微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]

蜡笔小新 2024-11-12 19:35:21

weidnermennenga_153

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章