微信小程序 计算属性 wxs

---

前言

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

这两天碰到一个需求, 在微信小程序里面把大于9999的的数字变成诸如12000转换成1.2w, 问题在于有多种情况会改变这个12000的原值, 如果使用setData来转换视图层的数据会比较麻烦,且易出错, 这种问题如果放到vue下调用计算方法即可解决, 思考:微信是否也有同样的操作呢?

一、使用wxs

<wxs module="numToString"> // 这里声明
  var numToString = function (num) {
  var str = ''
  if (num > 10000) {
  str = (num /10000).toPrecision(2)+"万+"
  } else {
  str = num
  }
  return str;
  }
  module.exports.numToString = numToString;
</wxs>
<view class="baseInfo">
	<van-tab title="作品 {{numToString.numToString(vNum)}}" title-style="font-size:32rpx">
		...
	</van-tab>
</view>

二、使用情景

1. 页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

2.数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

三、遇到的坑

wxs内不允许使用let 及 const 声明 只能用 var