小程序中获取原始数据到模版渲染

在日常的小程序开发中，你有没有遇到过这种情况：后台给你返回的数据需要你再组装计算一下才能在页面中显示。

数据格式：

const list = [
    { id:0, name:'苹果', price:12, number:1 },
    { id:2, name:'西瓜', price:11, number:5 },
    { id:1, name:'香蕉', price:8, number:13 },
    { id:2, name:'猕猴桃', price:22, number:10 },
]

然后想通过价格和数量的乘积(总价)来给列表项分配个状态，假设状态的规则如下：

const total = number * price
let status = ''
if (total <= 50) {
    console.log(1)
    status = '小型订单'
} else if (total < 100) {
    console.log(2)
    status = '中型订单'
} else if (total < 200) {
    console.log(3)
    status = '大型订单'
} else {
    console.log(4)
    status = '超大型订单'
}

注：这种多重else if的方式很傻，只为做演示用，您可以自己做优化。

wxml模版中：订单状态要怎么获取呢？

<view class="list" wx:for="{{list}}">
  <view class="name">{{item.name}}</view>
  <view class="number">{{item.number}}*{{item.price}}</view>
  <view class="total">总价：{{item.number*item.price}}</view>
  <view class="status">订单状态：？？？</view>
</view>

以上面一个小小的案例场景，引出了如下我们对此类问题的解决方式。

获取数据之后对数据初始化

在我们从服务端获取到数据的之后，就对数据就行初始化，通过计算来给数据添加我们想要展示的数据项。

Page({
    onLoad() {
        this._getData()
    },
    _getData() {
        // ApiMethods.getData 封装的接口方法
        ApiMethods.getData().then(res => {
            this._normalize(res.data)
        })
    },
    _normalize(list) {
        // list 为上述数据结构
        list = list.map(item => {
            const total = item.price * item.number
            let status = ''
            if (total <= 50) {
                status = '小型订单'
            } else if (total < 100) {
                status = '中型订单'
            } else if (total < 200) {
                status = '大型订单'
            } else {
                status = '超大型订单'
            }
            item.status = status
            return item
        })
        this.setData({ list })
    }
})

最终得到的数据结构：

const list = [
    { id:0, name:'苹果', price:12, number:1, status: '小型订单' },
    { id:2, name:'西瓜', price:11, number:5, status: '中型订单' },
    { id:1, name:'香蕉', price:8, number:13, status: '大型型订单' },
    { id:2, name:'猕猴桃', price:22, number:10, status: '超大型订单' },
]

利用wxs对数据进行处理

通过wxs文件对传入的参数进行处理，直接返回要在页面中显示的数据。wxs的详细说明 developers.weixin.qq.com/miniprogram…

创建wxs文件

// utils.wxs (es6语法类似let const不能在wxs中使用,注意下一下，会报错)
function setStatus(item) {
  var total = item.price * item.number
  var status = ''
  if (total <= 50) {
    console.log(1)
    status = '小型订单'
  } else if (total < 100) {
    console.log(2)
    status = '中型订单'
  } else if (total < 200) {
    console.log(3)
    status = '大型订单'
  } else {
    console.log(4)
    status = '超大型订单'
  }
  return status
}


module.exports = {
  setStatus: setStatus
};

在wxml中引用wxs文件并使用：

// ../../utils/utils.wxs 文件路径
<wxs src="../../utils/utils.wxs" module="tools" />
<view class="list" wx:for="{{list}}">
  <view class="name">{{item.name}}</view>
  <view class="number">{{item.number}}*{{item.price}}</view>
  <view class="total">总价：{{item.number*item.price}}</view>
  <view class="status">订单状态：{{tools.setStatus(item)}}</view>
</view>

这样利用wxs文件导出的模块方法，就能轻松的解决想要在模版中处理数据的问题了。 wxs的功能很强大的，用好了能大大的提高的你的开发效率。

创建组件对数据进行处理

还有一种方式就是利用组件的机制，将数据传递给组件，组件内部进行计算来处理数据。

// 创建一个组件status 组件逻辑
Component({
  properties: {
    item: {
      type: Object,
      value: () => {}
    }
  },
  data: {
    status: ''
  },
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached() {
      this._normalize()
    }
  },
  methods: {
    _normalize() {
      const { item } = this.properties
      if(!item) return
      
      const total = item.price * item.number
      let status = ''
      if (total <= 50) {
        status = '小型订单'
      } else if (total < 100) {
        status = '中型订单'
      } else if (total < 200) {
        status = '大型订单'
      } else {
        status = '超大型订单'
      }
      this.setData({ status })
    }
  }

在页面中引用组件，首先在json文件中注册一下

{
  "usingComponents": {
    // 组件路径
    "status": "/components/status"
  }
}

在页面中使用

<view class="list" wx:for="{{list}}">
  <view class="name">{{item.name}}</view>
  <view class="number">{{item.number}}*{{item.price}}</view>
  <view class="total">总价：{{item.number*item.price}}</view>
  <view class="status">订单状态：<status item="{{item}}" /></view>
</view>

给组件status传递一个item即可。

结语

显然这三种方式都能解决问题，但用组件来解决有点"屈才了"，创建的成本也挺高的。还是推荐使用wxs和在获取原始数据后处理数据的方式。看到这里，如果文章能帮助您，希望给一个小小的赞，谢谢大家！