WeChat 미니 프로그램의 추가, 삭제, 수정 및 동작 확인을 위한 코드 구현

이 글은 위챗 미니 프로그램의 추가, 삭제, 수정, 확인 동작 예시에 대한 자세한 설명을 중심으로 소개하고 있습니다. 필요한 친구들은 참고하시면 됩니다

WeChat 미니 프로그램의 동작 수정 및 확인 예제에 대한 자세한 설명

1. 배송 주소 추가, 삭제, 수정 및 확인을 예로 들어보세요

2. 파일 디렉터리

1. js 파일은 다음과 같습니다. 논리적 컨트롤, 주로 요청을 보내고 데이터를 받습니다.

2. json 이 페이지의 로컬 구성에 사용되며 전역 app.json 구성을 재정의합니다.

3. wxss는 페이지의 스타일 설정에 사용됩니다.

4. 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="../../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>

에 해당하는 페이지입니다. 양식 및 기존 수취인 정보

1. 몇 가지 핵심 사항을 이해해야 합니다. a.Form 양식은 제출 이벤트에 바인딩되어야 합니다. 미니 프로그램에서 속성은 다음과 같습니다. 이전 HTML의

onsubmit="formSubmit()"과 동일합니다.

는 함수 이름입니다. 제출되면 formSubmit 함수 이벤트가 트리거됩니다.

b. 다른 속성은 이전 HTML과 유사합니다. 양식에는 name="value"가 있어야 하며 백엔드 처리는 이전과 동일합니다. 예를 들어, name="username" PHP는 $_POST를 사용할 수 있습니다. ['사용자 이름']을(를) 수신합니다. c. 미니 프로그램에는 입력 제출 버튼이 없으므로 각 양식에 제출 버튼이 있어야 합니다. 등록 이 버튼은 활성화하는 데 사용됩니다. 제출 이벤트.

루프는 분해하여 해결하세요.

d. 애플릿은 캡슐화된 onLoad 메서드를 제공합니다. 페이지가 로드되면 이 메서드가 호출됩니다.

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

       })

      }

  })

 }

})

Check

현재 사용자가 이미 가지고 있는 배송 주소를 가져오는 데 사용되는 배송 주소의 홈페이지

var that = this;

이러려는 이유를 모르겠습니다. 어쩌면 이 충돌을 피하기 위한 것일 수도 있습니다. 또는 의미가 불분명한 경우 현재 개체를 변수 that

wx.request({})에 할당하여 https 요청을 시작

url: 'https://shop.com/home/shipping/ index', 요청된 요청 URL 인터페이스

메서드: 'GET', 요청 메서드, 기본값은 GET입니다. POST 시

data: {}, 요청된 데이터 전송

header: {}, 전송된 헤더 정보,

GET 메소드의 헤더 정보는 'Accept': 'application/json'

POST 메소드의 헤더 정보는 "Content-Type": "application/x-www-form-urlencoded"

성공:function() 요청 성공 시 호출되는 메소드

Fail:function() 요청 실패 시 호출되는 메소드

success: function(res) {

    that.setData({

      "addressInfo": res.data.info,

    })

   },

res는 호출 성공 후 서버에서 반환하는 데이터,

that.setData({"addressInfo": res.data.info,}) 키 이름은 addressInfo입니다. 필요한 것은 모두 반환된 데이터입니다. res 데이터 객체의 info 객체 정보

fail:function(){

       wx.showToast({

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

        icon: 'loading',

        duration: 1500

       })

      }

Network request failure call

showToast 메소드는 JS의 경고와 유사합니다. 팝업 상자, 제목은 팝업에 표시되는 정보입니다. 상자이고 아이콘은 팝업 상자의 아이콘 상태입니다. 현재 로드 및 성공이라는 두 가지 상태만 있습니다. 기간은 팝업 상자가 화면에 표시되는 시간입니다.

a.url은 요청한 URL입니다. 예를 들어 프런트엔드에서는 POST 형식에서 action='index.php'를 사용했습니다. 여기서 Index.php는 상대 경로이고 미니에서 요청한 URL입니다. 프로그램은 절대 네트워크 경로여야 합니다.

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

, GET 방식의 HOME 모듈 아래 배송 관리에서 인덱스 방식을 요청

c 얻은 값을 데이터에 추가합니다

HOME 모듈 아래 배송 제어 아래의 인덱스 메소드를 살펴보세요

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

}

배송 모델의 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을 데이터에 추가하고{} 키 값을 addressInfo

로 설정합니다. 그런 다음 다음 단계는 다음과 같습니다. 이 정보를 프런트엔드 페이지에 표시하세요

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

wx:for 제어 속성은 JS의 addressInfo 배열인 배열을 바인딩합니다. 기본적으로 배열에 있는 현재 항목의 아래 첨자 변수 이름은 기본적으로 다음과 같습니다. index이며 배열에 있는 현재 항목의 변수 이름은 기본적으로 item입니다. 현재 데이터의 주소, 수취인, 전화번호 및 정보는 {{item.address}}, {{item.name}}, {{item.mobile}}, {{item.id}}를 기반으로 얻을 수 있습니다. id

가 루프되면 모든 주소 정보는 TP 템플릿의 foreach

delete

과 동일한 형식에 따라 표시될 수 있습니다.

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

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组件的使用介绍

위 내용은 WeChat 미니 프로그램의 추가, 삭제, 수정 및 동작 확인을 위한 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!