微信小程序前端开发-电商购物小程序-异步获取数据，动态绑定数据

最新推荐文章于 2023-10-24 13:47:57 发布

JuGLe_

最新推荐文章于 2023-10-24 13:47:57 发布

阅读量253

点赞数 2

分类专栏：大二文章标签：小程序微信小程序 javascript 前端学习经验分享

本文链接：https://blog.csdn.net/JuGLe_/article/details/132782411

版权

大二专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、介绍背景

微信小程序是一种可以在微信平台上运行的应用程序，与传统的APP相比，它不需要用户进行下载和安装，可以直接使用。微信小程序具有轻量级、快速、跨平台等特点，适合开发一些简单的应用。比如本次实践的电商购物小程序。

我在本周深入学习了微信小程序的页面结构和布局。小程序的页面由不同的组件组成，例如按钮、文本框和图片等。我学习了如何使用这些组件，并了解了它们的属性和事件。微信小程序的页面结构主要由WXML和WXSS组成，WXML用于编写页面的结构，而WXSS用于编写页面的样式。通过学习，我了解了如何使用WXML和WXSS来构建小程序的页面，并通过调整样式使页面更加美观。

在本篇文章我将主要介绍微信小程序中异步获取数据，动态绑定数据。

二、什么是异步获取数据

异步获取数据是指在程序执行过程中，不需要等待数据返回就能继续执行后续代码的一种方式。通常情况下，数据的获取是通过网络请求或者其他耗时操作来完成的。

三、什么是动态绑定数据

动态绑定数据是指在程序运行时，将数据与界面元素或变量进行关联，实现数据的实时更新和同步显示的一种技术。这种绑定方式可以使得数据的变化能够自动反映在相应的界面元素或变量上，而无需手动进行更新操作。

通过动态绑定数据我们可以：
1.实现数据双向绑定：使界面元素值与数据变量值保持同步。数据变量变化时，界面元素同时更新；用户改变界面元素，数据变量也自动更新。

2.简化界面的更新逻辑:简化手动更新界面代码量，逻辑更为清晰简洁。仅用将数据绑定界面元素即可自动更新。

3.提高开发效率：动态绑定数据可以提高开发效率，减少开发人员的工作量。

4.增强用户体验：动态绑定数据可以提升用户体验，使得界面的变化更加实时和流畅。用户在操作界面元素时，可以立即看到界面的变化，而不需要等待手动更新界面的过程。

动态绑定数据通常用于前端开发中，用于实现数据驱动的界面更新。常见的场景包括：

数据绑定到界面元素：将数据绑定到HTML标签的属性或内容，当数据发生变化时，界面元素会自动更新。
数据绑定到变量：将数据绑定到JavaScript变量，当数据发生变化时，变量的值也会自动更新。

四、本次实践学习的运用-异步获取数据

在getList()函数中，使用了微信小程序的wx.request()方法发送异步请求获取购物车列表数据。

getList() {
    wx.request({
      url: 'http://xxxx.xxx.x.xx/cart/list',
      data: {
        token:'xxxxxxxxxx......'
      },
      success: (res)=> {
        var list = res.data.list.map(function (item){
            item.price = (item.price / 100).toFixed(2);
            item.checked = false;
            return item;
        })
        
        this.setData({
          list:res.data.list
        })

      }
    })
  }

这段代码的作用是发送请求获取购物车列表数据，并对返回的数据进行处理后更新到页面中。本函数用于发送网络请求并获取数据。在函数中，使用了wx.request方法来发起网络请求。

其中wx.request是一个异步请求，它会在后台发送请求并不会阻塞代码的执行。当请求完成后，会执行success回调函数来处理返回的数据。这样可以确保在请求完成前，代码可以继续执行其他操作，而不需要等待请求的结果。

异步获取数据的好处是可以提高程序的响应速度和用户体验。在请求发送的同时，程序可以继续执行其他操作，而不需要等待请求的结果返回。当请求完成后，再对返回的数据进行处理和更新页面。这样可以避免程序的阻塞和卡顿，提高了程序的性能和用户体验。

五、本次实践学习的运用-动态绑定数据

请求成功后，通过setData()方法将返回的数据更新到页面的data中的list属性中，实现了动态绑定数据。

动态绑定数据：
- 在data中定义了list、idList、checked和totalMoney等属性，用于存储动态的数据。
- 在getList函数中，通过wx.request异步获取购物车列表数据，然后将数据赋值给data中的list属性，实现了动态绑定数据的功能。

在selectOne、selectAll、reduceQuantity和increaseQuantity等函数中，通过setData方法更新list属性的值，实现了动态绑定数据的功能。

// pages/cart/cart.js
Page({
  data: {
    checked:false,
      list: [],
      idList:[],
      totalMoney:'0.00'
  },

  onShow() {
    this.getList();
  },
  getTotalMoney(){
      var idList=this.data.idList;
      var goodsList=this.data.list.filter(function(item){
          return idList.includes(item.cartId);
      })
      var sum = 0;
      goodsList.forEach(function(item){
          var money=(item.price)*item.buyNum;
          sum=sum+money;
      })
      sum=sum.toFixed(2);
      this.setData({
        totalMoney:sum
      })
  },

  selectAll() {
      if(!this.data.checked){
          this.data.list.forEach(function (item){
              item.checked=true;
          })

          var idList=this.data.list.map(function(item){
              return item.cartId;
          })
          this.setData({
            checked:true,
            idList:idList,
            list: this.data.list
          })
      }else{
        this.data.list.forEach(function (item){
          item.checked=false;
      })
      this.setData({
        checked:false,
        idList:[],
        list: this.data.list
      })
    }
    this.getTotalMoney();
  },

    selectOne(ev){
       this.setData({
         idList:ev.detail.value
       })
       this.getTotalMoney();
       if(this.data.idList.length === this.data.list.length){
         this.setData({
           checked:true
         })
       }else{
         this.setData({
           checked:false
         })
       }
    },

  getList() {
    wx.request({
      url: 'http://xxxx.xxx.x.xx/cart/list',
      data: {
        token:'xxxxxxxxxx......'
      },
      success: (res)=> {
        var list = res.data.list.map(function (item){
            item.price = (item.price / 100).toFixed(2);
            item.checked = false;
            return item;
        })
        
        this.setData({
          list:res.data.list//将获取到的购物车列表数据赋值给list变量，从而实现购物车列表数据与页面元素的绑定。
        })

      }
    })
  },
  //用于减少商品数量的操作
  reduceQuantity(e){
    const cartId=e.currentTarget.dataset.cartid;//从事件对象中获取到商品的唯一标识 cartId。这个标识用于找到购物车中对应的商品。
    const item=this.data.list.find ((item)=> item.cartId === cartId);
    //方法在购物车列表 this.data.list 中查找到与 cartId 相匹配的商品对象，并将其赋值给 item 变量。
    if(item && item.buyNum > 1)
    {
      item.buyNum--;//根据商品数量的增加和减少，动态修改购物车列表中对应商品的数量，从而实现购物车数量的更新。
      this.setData({
        list:this.data.list,//将修改后的购物车列表数据重新赋值给list变量，从而实现购物车列表数据与页面元素的绑定。
      });
  
      this.getTotalMoney();
    }
  },
  //用于增加商品数量的操作
  increaseQuantity(e){
    const cartId=e.currentTarget.dataset.cartid;//
    const item=this.data.list.find ((item)=> item.cartId === cartId);
  
    if(item)
    {
      item.buyNum++;
      this.setData({
        list:this.data.list,
      });
  
      this.getTotalMoney();//调用getTotalMoney函数，计算选中商品的总金额，并将计算结果赋值给totalMoney变量，从而实现总金额的更新。
    }
  }

})

在以上代码用到动态绑定语句在后面有相应注释

checked、list、idList和totalMoney是数据绑定到界面元素的变量，而list是数据绑定到变量的变量。