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

站长资源 2024/11/28 佚名

76 1538 76

DDR爱好者之家 Design By 杰米

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

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="/UploadFiles/2021-04-02/address-icon.png">

前端页面主要展示一个表单和已有收货人信息
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="/UploadFiles/2021-04-02/address-icon.png">

控制属性 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"htmlcode">

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="/UploadFiles/2021-04-02/address-icon.png">

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"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"htmlcode">

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);
        }
      }
    }
  }
}


感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

                                
                                
                                    微信小程序,微信小程序,增、删、改、查,微信小程序,实现常规操作增删改查 
                                DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

搜索

关键字搜索

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

JavaScript简单生成 N~M 之间随机数的方法

jQuery动态生成表格及右键菜单功能示例

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

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

JavaScript简单生成 N~M 之间随机数的方法

jQuery动态生成表格及右键菜单功能示例

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

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

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