Code-Implementierung von Vorgängen zum Hinzufügen, Löschen, Ändern und Überprüfen von WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich relevante Informationen zu den detaillierten Betriebsbeispielen zum Hinzufügen, Löschen, Ändern und Überprüfen des WeChat-Applets vorgestellt. Hier finden Sie den Beispielcode.

WeChat Applet Detaillierte Erläuterung zum Hinzufügen, Löschen, Ändern und Überprüfen von Vorgangsbeispielen

1 Nehmen Sie das Hinzufügen, Löschen, Ändern und Überprüfen der Lieferadresse als Beispiel

2

1. js-Datei ist eine logische Steuerung, hauptsächlich sendet sie Anfragen und empfängt Daten

2. json Wird für die lokale Konfiguration dieser Seite verwendet und deckt die globale App-.json-Konfiguration ab.

3. wxss wird für die Einstellung des Seitenstils verwendet,

4. wxml die Seite, äquivalent zu 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>

Auf der Frontend-Seite werden hauptsächlich ein Formular und vorhandene Empfängerinformationen angezeigt

1. Mehrere wichtige Punkte müssen verstanden werden

a.Formular muss ein Submit-Ereignis binden. Im Miniprogramm lautet das Attribut bindsubmit,

bindsubmit=“formSubmit“ Der Attributwert hier ist formSubmit, und die Benennung kann wie folgt lauten: Jeder Wert der Spezifikation entspricht onsubmit="formSubmit()" im vorherigen HTML. ist ein Funktionsname. Das formSubmit-Funktionsereignis wird ausgelöst. Diese Funktion ist in js geschrieben.

b. Andere Attribute ähneln dem vorherigen HTML. Beachten Sie, dass das Formular name="value" haben muss und die Back-End-Verarbeitung dieselbe ist wie zuvor kann $_POST[ 'Benutzername'] zum Empfangen verwenden.

c. Da das Miniprogramm keine Schaltfläche zum Senden von Eingaben hat, muss es in jedem Formular eine Schaltfläche zum Senden geben,

3993c6f6226c20b67508b2f5faca1f97Registrieren64de3afdb5bf671dcd1ff51dd62c8c41注册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中文网！

相关推荐：

微信小程序 向左滑动删除功能的实现

微信小程序button组件的使用介绍

Das obige ist der detaillierte Inhalt vonCode-Implementierung von Vorgängen zum Hinzufügen, Löschen, Ändern und Überprüfen von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!