WeChat 미니 프로그램의 추가, 삭제, 수정 및 작업 확인을 위한 예제 코드에 대한 자세한 설명

이 글에서는 위챗 애플릿의 추가, 삭제, 수정, 확인 등의 세부적인 동작 예시에 대한 내용을 주로 소개하고 있습니다. 필요한 친구들이 참고할 수 있도록 하겠습니다.

위챗 애플릿 추가, 삭제, 수정, 확인 작업 예시

1. 배송지 추가, 삭제, 수정, 확인을 예로 들어

2.

1. js 파일은 주로 요청을 보내고 데이터를 받는 논리적 제어입니다. 이 페이지의 로컬 구성에 사용되며 전역 앱 .json 구성을 다룹니다.

2. wxss는 페이지 스타일 설정에 사용되며,

3. wxml은 html에 해당하는 페이지

4. 收货人信息 姓名 电话 地址 送货时间 收货地址信息 <view> <view> <image></image> <view> <view><text>收货地址{{item.address}}</text><text>1km</text></view> <view>收货人{{item.name}}</view> <view>收货人电话{{item.mobile}}</view> <view>删除</view> <view>编辑</view> </view> </view> </view> 保存

   프론트 엔드 페이지에는 주로 양식과 기존 수취인 정보가 표시됩니다

1. 몇 가지 핵심 사항을 이해해야 합니다

.

a.Form 양식은 제출 이벤트에 바인딩되어야 합니다. 미니 프로그램에서 속성은 binsubmit입니다.

bindsubmit=”formSubmit”

여기서 속성 값은 formSubmit입니다. 사양을 준수하는 모든 값으로 이름을 지정할 수 있습니다. 이는 이전 HTML의

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

은 제출되면 formSubmit 함수 이벤트가 트리거됩니다. 이 함수는 js로 작성되었습니다. 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

       })

      }

  })

 }

})

현재 사용자의 기존 배송주소를 가져오는 데 사용되는

배송주소 홈페이지를 확인하세요.

var that = this;

이유는 모르겠습니다. 이 경우입니다. 충돌이나 불명확한 의미를 피하기 위해 현재 개체를

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"

Success:function() request 성공적으로 호출되는 메소드

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

success: function(res) {

    that.setData({

      "addressInfo": res.data.info,

    })

   },

res는 호출 성공 후 서버에서 반환되는 데이터입니다.

that.setData({"addressInfo": res.data.info, }) 현재 페이지의 데이터 객체에 데이터를 추가합니다. 키 이름은 addressInfo입니다. 필요한 것은 반환된 데이터입니다. res 데이터 개체

fail:function(){

       wx.showToast({

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

        icon: 'loading',

        duration: 1500

       })

      }

네트워크 요청이 실패할 때 호출되는 메서드

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

}

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

<view>

<image></image>

<view>

<view><text>收货地址{{item.address}}</text><text>1km</text></view>

<view>收货人{{item.name}}</view>

<view>收货人电话{{item.mobile}}</view>

<view>删除</view>

<view>编辑</view>

</view>

</view>

</view>

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

增、改

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

首先查看前台表单

收货人信息 姓名 电话 地址 收货地址{{item.address}}1km 收货人{{item.name}} 收货人电话{{item.mobile}}   删除 编辑  

保存

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

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

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