小程序应用篇：数据机制及优化方案

前言

setData(object,callback)

// js
this.setData({
  message:{
    name:'大前端跨端开发指南',
    fn:()=>{},
    setProps:new Set()
  }
})
  //wxml 
 <children message="{{ message }}"  />

****

• ****

• ********

****

this.setData({
  name: 'alien',
})
this.setData({
  age:18
})

this.setData({
  name: 'alien',
  age:18
})

const list = [ {
  'id' : '1',
  'giftName' : '约斯夫家庭校园多功能创可贴卡通女少女可爱超弹防水透气弹力小面积开放性创伤创口贴 超弹防水透气型 100贴/盒',
  'giftImage' : 'https://img14.360buyimg.com/n1/jfs/t1/117043/23/16493/438028/5f50a682E96819e0d/a3678e5c4fb5a3cf.jpg',
  'price' : '19.90',
  status: 1
}, {
  'id' : '2',
  'giftName' : '【MaincareBio】医用外科口罩一次性无菌三层透气成人挂耳式防细菌病毒飞沫防护医用口罩 儿童医用外科口罩50只【10只/包*5包】',
  'giftImage' : 'https://img14.360buyimg.com/n1/jfs/t1/133614/39/16312/128620/5fb3a1b8E02fec0c6/0b7d82a132932f35.jpg',
  'price' : '39.90',
  status: 1
}, {
  'id' : '3',
  'giftName' : '乐樊一次性医用外科口罩医生专用成人通用三层医疗口罩透气单片防护 医用外科口罩100只蓝色【非独立包装/2包】',
  'giftImage' : 'https://img14.360buyimg.com/n1/jfs/t1/151889/33/15018/129441/6008e066Ee813ef0d/1f1a8218fa30a05f.jpg',
  'price' : '31.90',
  status: 1
}, {
  'id' : '4',
  'giftName' : '俏东方 一次性医用口罩白色 轻薄透气 三层防护含熔喷过滤成人男女适用冬季防护面罩 50只医用口罩白色整包(工厂特惠)',
  'giftImage' : 'https://img14.360buyimg.com/n1/jfs/t1/164271/11/7365/212791/6032be25E162107e3/df794675c5095edf.jpg',
  'price' : '9.90',
  status: 2
}, {
  'id' : '5',
  'giftName' : '【7仓隔日达】咔贝爱(KABEIAI)一次性医用防护口罩防尘防雾霾防颗粒物 三层防护透气医用口罩 医用口罩50只（1包）',
  'giftImage' : 'https://img14.360buyimg.com/n1/jfs/t1/156216/4/9112/168310/601e5d2aE4ad9ee3b/65a25f358d136a20.jpg',
  'price' : '19.90',
  status: 0
}]

function requestData(){
  return new Promise(reslove=>{
    reslove(list)
  })
}

Page({
  data:{
    dataList:[]
  },
  onLoad(){
    this.getInitDataSource()
  },
  onReady() {
  },
  async getInitDataSource(){
    const dataList = await requestData() 
    this.setData({
      dataList
    })
  }
})

<view>
  <block wx:for="{{ dataList }}"  >
    <item dataItem="{{ item }}"  />
  </block>
</view>

Component({
  properties: {
    dataItem:{
      type:Object
    }
  },
  lifetimes: {
    ready(){
      const { status } = this.properties.dataItem
      let color = '#ccc'
      if(status === 0){
        color = 'pink'
      }else if(status === 1){
        color = 'rgb(193, 192, 255)'
      }
      this.setData({
        color
      })
    }
  },
  data:{
    color:''
  },
})

<view class="item" >
  <image src="{{dataItem.giftImage}}" class="item-image" />
  <text class="item-name" style="color:{{color}}"  >{{ dataItem.giftName }}</text>
</view>

****

async getInitDataSource(){
  const dataList = await requestData() 
  this.setData({
    /*  预处理状态，把每一个 item 加入 color 属性 */  
    dataList:dataList.map(item=>{
      const { status } = item
      let color = '#ccc'
      if(status === 0){
        color = 'pink'
      }else if(status === 1){
        color = 'rgb(193, 192, 255)'
      }
      item.color = color
      return item
    })
  })
}

<view class="item" >
  <image src="{{dataItem.giftImage}}" class="item-image" />
  <text class="item-name" style="color:{{dataItem.color}}"  >{{ dataItem.giftName }}</text>
</view>

<wxs module="module" >
  function handleStatusColor(status){
    var color = '#ccc';
    if(status === 0){
      color = 'pink';
    }else if(status === 1){
      color = 'rgb(193, 192, 255)';
    };
    return color;
  };
module.exports = {
  handleStatusColor:handleStatusColor,
};
</wxs>
  <view class="item" >
  <image src="{{dataItem.giftImage}}" class="item-image" />
  <text class="item-name" style="color:{{module.handleStatusColor(dataItem.status)}}"  >{{ dataItem.giftName }}</text>
  </view>

• ``

async onLoad(){
  /* 获取初始化数据 */
  const data = await this.getInitCacheData()
  this.cacheData = data
},

Component({
  lifetimes:{
    ready(){
      /* 立即执行的防抖函数,时间为 500 毫秒 */
      this.handleScroll = immediateDebounce(this.handleScroll.bind(this),500)
    }
  },
  methods:{
    handleScroll(){
      /* 修改状态 */
      this.setData({...})
    }
  },
})

Component({
  data:{
    sourceData:{
      name:'《大前端跨端开发指南》',
      author:'alien'
    },
    sourceList:['React','React Native','小程序']
  },
  methods:{
    handleDataChange(){
      this.setData({
        'sourceData.name':"《React进阶实践指南》"
      })
    }
  },
})

handleListChange(index,value){
  this.setData({
    `sourceList[${index}]`:value
   })
}

async onLoad(){
  /* 获取初始化数据 */
  const data = await this.getInitDataSource()
  /* 分离数据, renderData 用于数据渲染，businessData 数据不用渲染，用于处理业务逻辑 */
  const { renderData,businessData } = this.separateData(data)
  /* 渲染数据绑定在 this.data 用于渲染 */
  this.setData({
    renderData
  })
  /* 非渲染数据绑定 */
  this.businessData = businessData
},

Page({
  data:{
    templateList:[],
  },
  async onLoad(){
    /* 请求初始化参数 */
    const { moduleList } = await requestData()  
    /* 渲染分组，每五个模版分成一组 */
    const templateList = this.group(moduleList,5)
    this.updateTemplateData(templateList)
  },
  /* 将渲染模版进行分组 */
  group(array, subGroupLength) {
    let index = 0;
    const newArray = [];
    while (index < array.length) {
      newArray.push(array.slice(index, (index += subGroupLength)));
    }
    return newArray;
  },
  /* 更新模版数据 */
  updateTemplateData(array, index = 0) {
    if (Array.isArray(array)) {
      this.setData(
        {
          [`templateList[${index}]`]: array[index],
        },
        () => {
          if (index + 1 < array.length) {
            setTimeout(()=>{
              this.updateTemplateData(array, index + 1);
            },100)
          }
        }
      );
    }
  },
})

``

<block wx:for="{{pageList}}" wx:for-item="pageItem">
  <view class="item-container" wx:for="{{pageItem}}">
    <!-- 渲染组件 -->
  </view>
</block>

``

/* 清空购物车 */
clearShoppingCart(){
  /* 隐藏弹窗 */
  this.setData({
    modelShow:false
  })
  setTimeout(()=>{
    /* 改变 item 的购物车的数量 */
    this.setData(()=>{
      cartList:this.data.cartList.map(item=>{
        item.count = 0
        return item
      })
    })
  },200)
},