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,

Registrieren< ;, diese Schaltfläche wird verwendet, um das Einreichungsereignis zu öffnen.

Was die Schleife betrifft, zerlegen und lösen Sie sie

d Das Applet gibt uns eine gekapselte Methode onLoad: function(). Wenn die Seite geladen wird, wird diese Methode aufgerufen.

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

       })

      }

  })

 }

})

Überprüfen

Homepage der Lieferadresse, wird verwendet, um die bestehende Lieferadresse des aktuellen Benutzers abzurufen

var that = this;

Ich weiß nicht, warum dies getan wird, um diesen Konflikt oder die unklare Semantik zu vermeiden. Das aktuelle Objekt wird der Variablen zugewiesen

wx.request({}) initiiert eine https-Anfrage

URL: 'https://shop.com/home/shipping/index', die angeforderte URL-Schnittstelle

Methode: ' GET', die Anforderungsmethode, der Standardwert ist GET. Beim POST müssen Sie

data: {}, die angeforderten gesendeten Daten

header: {}, die gesendeten Headerinformationen, < deklarieren 🎜>

Die Header-Informationen der GET-Methode lauten: 'Accept': 'application/json'

Die Header-Informationen der POST-Methode lauten: "Content-Type": "application/x-www-form " -urlencoded"

success:function() Die Methode, die aufgerufen wird, wenn die Anfrage erfolgreich ist

Fail:function() Die Methode, die aufgerufen wird, wenn die Anfrage fehlschlägt

success: function(res) {

    that.setData({

      "addressInfo": res.data.info,

    })

   },

res sind die vom Server zurückgegebenen Daten, nachdem der Aufruf erfolgreich war.

that.setData({"addressInfo": res.data.info,}) fügt Daten hinzu Das Datenobjekt der aktuellen Seite ist addressInfo, der Schlüsselwert sind die zurückgegebenen Daten. Was ich benötige, sind alle Informationen des Infoobjekts des res-Datenobjekts >

Methode, die aufgerufen wird, wenn die Netzwerkanforderung fehlschlägt

showToast ähnelt der Warnung in JS. Das Popup-Feld ist der Titel und die im Popup-Feld angezeigten Informationen Der Symbolstatus des Popup-Fensters. Derzeit gibt es nur zwei Zustände: Laden und Erfolg. Die Dauer ist die Zeit, die das Popup-Fenster auf dem Bildschirm angezeigt wird.

a.url ist die von Ihnen angeforderte URL. Im Frontend wurde beispielsweise action='index.php' im POST-Formular verwendet. Index.php ist hier ein relativer Pfad und die URL Der vom Miniprogramm angeforderte Pfad muss ein absoluter Netzwerkpfad sein.

b.'https://shop.yunapply.com/home/shipping/index'

, fordern Sie die Indexmethode unter Versandkontrolle im HOME-Modul im GET-Modus an

c. Addieren Sie den erhaltenen Wert zu den Daten

Siehe die Indexmethode unter Versandkontrolle im HOME-Modul

fail:function(){

       wx.showToast({

        title: '服务器网络错误!',

        icon: 'loading',

        duration: 1500

       })

      }

Versand anzeigen Die getAddress ()-Methode im Modell

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

}

gibt entsprechende JSON-Daten zurück, basierend darauf, ob der Benutzer eine Adresse hat

JSON-Daten in diesem Beispiel Ja

/**
 * 获取收货地址信息
 * @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;
}

Nachdem die Anfrage erfolgreich war, fügen Sie JSON zu data{} hinzu und setzen Sie den Schlüsselwert auf addressInfo

Dann ist der nächste Schritt Diese Informationen werden auf der Front-End-Seite angezeigt

{"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":""}

Das Steuerattribut wx:for bindet ein Array, das das AddressInfo-Array in JS ist ist das aktuelle Element. Der Name der tiefgestellten Variable ist standardmäßig index und der Variablenname des aktuellen Elements im Array ist standardmäßig item. Die Adresse, der Empfänger, die Telefonnummer und Informationen zu den aktuellen Daten können anhand der IDs {{item.address}}, {{item.name}}, {{item.mobile}} und {{item.id}} abgerufen werden

Nach der Schleife können alle Adressinformationen entsprechend dem Format angezeigt werden, das foreach

delete

in der TP-Vorlage entspricht

在前台模板的循环数据里可以看到这样一条标签

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表单中都要有一个提交按钮，

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

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!