真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序增、刪、改、查操作實例詳解

微信小程序 增、刪、改、查操作實例詳解

成都創(chuàng)新互聯(lián)公司業(yè)務(wù)包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、電子商務(wù)型網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司(多語言)、成都商城網(wǎng)站開發(fā)、按需制作網(wǎng)站、全網(wǎng)營銷推廣等。效率優(yōu)先，品質(zhì)保證，用心服務(wù)是我們的核心價值觀，我們將繼續(xù)以良好的信譽為基礎(chǔ)，秉承穩(wěn)固與發(fā)展、求實與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)！

1.以收貨地址的增刪改查為例

2.文件目錄

 微信小程序 增、刪、改、查操作實例詳解

  1. js文件是邏輯控制，主要是它發(fā)送請求和接收數(shù)據(jù)，
  2. json 用于此頁面局部 配置并且覆蓋全局app.json配置，
  3. wxss用于頁面的樣式設(shè)置，
  4. wxml就是頁面，相當(dāng)于html




收貨人信息





姓名







電話







地址











送貨時間







收貨地址信息









收貨地址{{item.address}}1km

收貨人{{item.name}}

收貨人電話{{item.mobile}}

刪除

編輯

前端頁面主要展示一個表單和已有收貨人信息

1.其中幾個關(guān)鍵點需要理解

a.Form表單，需要綁定一個submit事件，在小程序中，屬性為bindsubmit,

bindsubmit=”formSubmit”   這里的屬性值formSubmit，命名可以為符合規(guī)范的任意值，相當(dāng)于以前html中的  onsubmit=”formSubmit()”,是一個函數(shù)名，當(dāng)提交的時候觸發(fā)formSubmit這個函數(shù)事件，這個函數(shù)寫在js中。

b.其他的屬性和之前的HTML差不多，注意的是，表單一定要有name=“value”，后端處理和以前一樣，比如name=”username” PHP可以用 $_POST[‘username']來接收。

c.由于小程序沒有input submit這個按鈕，所以在每個form表單中都要有一個提交按鈕，

，這個按鈕就是用來開啟提交事件的。

至于循環(huán)，拆開解

d.小程序給我們一個封裝好的方法onLoad: function()，當(dāng)頁面加載的時候，調(diào)用這個方法。

var app = getApp()

Page({

data:{},

 onLoad: function() {

  var that = this;

  //收貨地址首頁

  wx.request({

   //缺少用戶唯一標(biāo)識，現(xiàn)在的在服務(wù)器的控制器里有一個假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: '服務(wù)器網(wǎng)絡(luò)錯誤!',

        icon: 'loading',

        duration: 1500

       })

      }

  })

 }

})

查

收貨地址的首頁，用于拉取當(dāng)前用戶已有的收貨地址

var that = this;

不知道為什么要這樣做，可能是為了避免this 沖突或者語意不明確，將當(dāng)前的對象，賦值給變量that

 wx.request({})發(fā)起https請求

url: 'https://shop.com/home/shipping/index',所需要請求的網(wǎng)址接口

 method: 'GET',請求的方式，默認是GET，當(dāng)時POST的時候，必須聲明

data: {},發(fā)送的請求的數(shù)據(jù)

header: {},發(fā)送的頭信息，

GET方式的頭信息為：'Accept': 'application/json'

POST方式的頭信息為："Content-Type": "application/x-www-form-urlencoded"  

 success:function() 請求成功調(diào)用的方法

 Fail:function()  請求失敗調(diào)用的方法

success: function(res) {

    that.setData({

      "addressInfo": res.data.info,

    })

   },

res為調(diào)用成功以后服務(wù)器端返回的數(shù)據(jù)，

that.setData({"addressInfo": res.data.info,})  添加數(shù)據(jù)到當(dāng)前頁面的data對象，鍵名為addressInfo,鍵值是返回的數(shù)據(jù)，我需要的是res的data對象的info對象的所有信息

fail:function(){

       wx.showToast({

        title: '服務(wù)器網(wǎng)絡(luò)錯誤!',

        icon: 'loading',

        duration: 1500

       })

      }

網(wǎng)絡(luò)請求失敗調(diào)用的方法

showToast類似于JS中的alert，彈出框，title  是彈出框的顯示的信息，icon是彈出框的圖標(biāo)狀態(tài)，目前只有l(wèi)oading 和success這兩個狀態(tài)。duration是彈出框在屏幕上顯示的時間。

a.url是你請求的網(wǎng)址，比如以前在前端，POST表單中action=‘index.php'，這里的index.php是相對路徑，而小程序請求的網(wǎng)址必須是網(wǎng)絡(luò)絕對路徑。

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 當(dāng)前用戶id
 * @return 屬于用戶的所有地址
 */
public function getAddress($id)
{
  $address_list = $this->where(array('user_id'=>$id))->select();
  if ($address_list == false){
    return false;
  }
  return $address_list;
}

這樣就根據(jù)用戶是否有地址還返回相應(yīng)的JSON數(shù)據(jù)

本例子的JSON數(shù)據(jù)是

{"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{}中，并設(shè)置鍵值為addressInfo

 那么接下來就是將這些信息展示在前端頁面上









收貨地址{{item.address}}1km

收貨人{{item.name}}

收貨人電話{{item.mobile}}

刪除

編輯

控制屬性 wx:for 綁定一個數(shù)組，就是JS中的addressInfo這個數(shù)組，默認數(shù)組的當(dāng)前項的下標(biāo)變量名默認為index，數(shù)組當(dāng)前項的變量名默認為item 。可以根據(jù){{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}獲取到當(dāng)前數(shù)據(jù)的地址、收貨人、電話和該條信息的id

 循環(huán)之后就可以按照格式展示所有地址信息了，相當(dāng)于TP模板中的foreach

刪

在前臺模板的循環(huán)數(shù)據(jù)里可以看到這樣一條標(biāo)簽

event.currentTarget.dataset.deleteid;表示事件對象的目標(biāo)的data-*的值

bindtap屬性是微信在模板頁中綁定點擊事件，deleteClick為觸發(fā)時間的方法名

在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

     })

     //刪除之后應(yīng)該有一個刷新頁面的效果，等和其他頁面刷新跳轉(zhuǎn)一起做

    }

   },

   fail:function(){

       wx.showToast({

        title: '服務(wù)器網(wǎng)絡(luò)錯誤!',

        icon: 'loading',

        duration: 1500

       })

      }

  })

 }

點擊前端刪除按鈕的時候，觸發(fā)deleteClick事件，可以傳入一個參數(shù)，代表事件對象。

event.currentTarget.dataset.deleteid;表示事件對象的目標(biāo)的data-*的值

然后通過GET方式傳入url，在服務(wù)器端刪除功能如下

public function delAddress($id)
{
  $res = D('Shipping')->where(array('id'=>$id))->delete();
  if ($res){
    $this->success('刪除成功','',true);
  }else{
    $this->error('刪除失敗','',true);
  }
}

根據(jù)返回的JSON值就可以提示刪除成功與否

增、改

之前覺得增加和修改會和表單提交一樣簡單，但是做了一些還是覺得不一樣，好好在寫一遍。

首先查看前臺表單





收貨人信息







姓名







電話







地址

















收貨地址{{item.address}}1km

收貨人{{item.name}}

收貨人電話{{item.mobile}}

  刪除

編輯

a.Form表單，需要綁定一個submit事件，在小程序中，屬性為bindsubmit,

bindsubmit=”formSubmit”   這里的屬性值formSubmit，命名可以為符合規(guī)范的任意值，相當(dāng)于以前html中的  onsubmit=”formSubmit()”,是一個函數(shù)名，當(dāng)提交的時候觸發(fā)formSubmit這個函數(shù)事件，這個函數(shù)寫在js中。

b.其他的屬性和之前的HTML差不多，注意的是，表單一定要有name=“value”，后端處理和以前一樣，比如name=”username” PHP可以用 $_POST[‘username']來接收。

c.由于小程序沒有input submit這個按鈕，所以在每個form表單中都要有一個提交按鈕，

，這個按鈕就是用來開啟提交事件的。

d.由于添加地址和編輯地址都是在一個頁面的，所以我需要在每個表單中，加一個默認值變量，當(dāng)點擊修改的時候，默認值就顯示在輸入框中。

e.表單中有一個編輯，綁定了事件editClick，當(dāng)點擊這個按鈕的時候，就會進入編輯模式

添加和修改的放在一個函數(shù)里面，但是修改數(shù)據(jù)的顯示是另外一個函數(shù)

先說修改，點點擊編輯的時候，觸發(fā)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: '服務(wù)器網(wǎng)絡(luò)錯誤!',

        icon: 'loading',

        duration: 1500

       })

      }

  })

 },

為了更好理解，貼個圖

微信小程序 增、刪、改、查操作實例詳解

 最下面有一個保存按鈕，當(dāng)點擊編輯的時候，觸發(fā)editClick:function(event),這個event是當(dāng)前觸發(fā)事件的對象，

var id = event.currentTarget.dataset.editid;  就是獲取當(dāng)前事件對象的dataset中的editid的值，這里id是當(dāng)前地址的id

url: 'https://shop.com/home/shipping/edit?id='+id

Wx.request  的url，將id值放在url上，作為GET參數(shù)，傳遞到服務(wù)器。

data: {},是需要額外傳遞的數(shù)據(jù)

method: 'GET', 是數(shù)據(jù)傳遞方式  默認是“GET”，保持大寫

data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

這里的data就是POST給服務(wù)器端的數(shù)據(jù) 以{name:value}的形式傳送

success:function()是請求狀態(tài)成功觸發(fā)是事件，也就是200的時候，注意，請求成功不是操作成功，請求只是這個程序到服務(wù)器端這條線的通的。

fail:function()就是網(wǎng)絡(luò)請求不成功，觸發(fā)的事件。

這里的一段代碼是和PHP后端程序有關(guān)系的，具體流程是這樣的，

1.GET通過數(shù)據(jù)到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);
}

也就是說將這條數(shù)據(jù)取出來，沒什么好說的。

 that.setData({

       "addressEdit": res.data.info,

     })

    }

這里請求成功以后，調(diào)用小程序 setData方法，將服務(wù)器端返回的信息放到addressEdit[]中，然后在前端頁面調(diào)用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}將數(shù)據(jù)展示出來，這就是修改時候的操作。

接下來是提交表單的操作

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: '服務(wù)器網(wǎng)絡(luò)錯誤!',

        icon: 'loading',

        duration: 1500

       })

      }  

     })

  }

 }

在前端的FORM表單中，當(dāng)點擊formtype=“submit”這個按鈕的時候，觸發(fā)addSubmit事件，前面的if都是JS驗證，防止用戶不填寫信息。

1.其他的request請求差不多，找?guī)讉€不一樣的

url: 'https://shop.yunapply.com/home/shipping/save',

調(diào)用服務(wù)器端的save方法

  header: { 

    "Content-Type": "application/x-www-form-urlencoded" 

   },

由于POST和GET傳送數(shù)據(jù)的方式不一樣，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到服務(wù)器端的數(shù)據(jù)

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！


標(biāo)題名稱：微信小程序增、刪、改、查操作實例詳解
地址分享：http://weahome.cn/article/ijgped.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部