小程序如何使用wxs计算获取到的数据

什么是wxs

WXS是小程序的一种脚本语言，与JavaScript语言不同，它具有模板CSS、XML和JavaScript的特点。WXS提供了少量的基本运算符以及条件语句、函数调用等基本语法，可以实现一些简单的逻辑和数据处理操作。WXS不支持 DOM 操作，也不能操作原生 JavaScript 对象。

如何使用wxs计算获取到的数据

1. 通过wxs模块获取数据

在小程序中，我们可以通过wxs模块来获取数据，然后通过wxs函数去计算这些数据，最后将结果返回给前端视图层。下面是一个获取当前时间并格式化输出的例子：

// utils.wxs
var formatDateTime = function(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  return [year, month, day].map(formatNumber).join('/')
}
var formatNumber = function(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatDateTime: formatDateTime
}

<!-- index.wxml -->
<wxs src="utils.wxs" module="utils"></wxs>
<view>{{utils.formatDateTime(new Date())}}</view>

该例子中，我们在utils.wxs文件中定义了一个formatDateTime函数，该函数接受一个Date对象参数date，然后按照“年/月/日”的格式返回一个字符串。在index.wxml中，我们通过<wxs>标签引入这个工具模块，并调用formatDateTime方法。输出的结果类似于：2022/03/16。

2. 在wxml中使用wxs函数

我们还可以在wxml文件中使用内置wxs函数进行计算。下面是一个通过wxs函数计算体重指数（BMI）的例子：

<view>体重：</view>
<text class="input" bindinput="onHeightInput"></text>
<view>身高：</view>
<text class="input" bindinput="onWeightInput"></text>
<view>BMI指数：{{bmi}}</view>
<wxs module="calc">
  var bmi = function (height, weight) {
    var h = height / 100 
    return weight / (h * h)
  }
  module.exports = {
    bmi: bmi
  }
</wxs>
<script>
  Page({
    data: {
      height: 0,
      weight: 0,
      bmi: 0
    },
    onHeightInput: function(e) {
      var value = e.detail.value
      this.setData({height: value})
      this.computeBMI()
    },
    onWeightInput: function(e) {
      var value = e.detail.value
      this.setData({weight: value})
      this.computeBMI()
    },
    computeBMI: function() {
      var calc = require('./calc.wxs')
      var bmi = calc.bmi(this.data.height, this.data.weight)
      this.setData({bmi: bmi})
    }
  })
</script>

在该例子中，通过<wxs>标签定义了一个bmi方法计算BMI指数，然后将它作为模块暴露出来。在script块中，我们将该模块引入，然后在onHeightInput和onWeightInput方法中分别获取输入框的值，调用setData方法更新变量height和weight的值，最后调用computeBMI方法计算并更新bmi的值。

总结

这篇文章简单介绍了小程序中如何使用wxs语言计算获取到的数据。通过wxs模块和wxs函数，我们可以实现一些简单的逻辑和数据处理操作，从而提升小程序的开发效率和用户体验。