场景:例如我们在平常开发中会遇到后端返回一些时间、日期、金额等需要我们进行格式化处理的数据,这时候我们就需要在计算属性中写方法到xml中进行使用

首先支付宝小程序到目前为止是还没有计算属性和监听方法的,那么我们要是想实现上面的方法都需要用到SJS和import-sjs了

支付宝提供了import-sjs标签那么具体如何使用

<import-sjs from="/utils/appUtil.sjs" name="appUtil" />
其中from标识路径,name代表自定义名称 这个名称在后面使用的时候会用到,from这里需要注意的是一定要引入sjs

那么什么是sjs呢

SJS(safe/subset javascript)是小程序一套自定义脚本语言,可以在 AXML 中使用其构建页面结构。
SJS 是 JavaScript 语言的子集,与 JavaScript 是不同的语言,其语法并不与 JavaScript 一致,请勿将其等同于 JavaScript。

注意:

sjs 中只支持使用 import、export 管理模块依赖。
sjs 只能定义在 .sjs 文件中。然后在 axml 中使用 <import-sjs> 标签引入。
sjs 可以调用其他 sjs 文件中定义的函数。
sjs 是 JavaScript 语言的子集,请勿将其等同于 JavaScript。
sjs 的运行环境和其他 JavaScript 代码是隔离的, sjs 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的 API。
sjs 函数不能作为组件事件回调。
sjs 不依赖于基础库版本,可以在所有版本小程序中运行。
 

const filterTime = (num) => {
  num = num.toString().split(".");  // 分隔小数点
  var arr = num[0].split("").reverse();  // 转换成字符数组并且倒序排列
  var res = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (i % 3 === 0 && i !== 0) {
      res.push(",");   // 添加分隔符
    }
    res.push(arr[i]);
  }
  res.reverse(); // 再次倒序成为正确的顺序
  if (num[1]) {  // 如果有小数的话添加小数部分
    res = res.join("").concat("." + num[1]);
  } else {
    res = res.join("");
  }
  return res;
}
export default {
  filterTime,
}

我这里封装了一个对金额进行千分位截取且保留两位小数的方法,那么这里需要注意到export的时候一定要记得写default 不然是无法引入的,那么接下来就看一下是如何在{{}}中使用的

<view >
  <import-sjs from="/utils/appUtil.sjs" name="appUtil" />
  <view class="myQuat_logged">
    <view class="title">
      {{myQuotaData.title?myQuotaData.title:'休息休息'}}
      <view class="quota_explain" onTap="onShowTips">
        <image mode="scaleToFill" src="/static/images/home/quota_explain.png" />
      </view>
    </view>
    <view class="content">
      <view class="content_exter">
        {{myQuotaData.creditLimit ?appUtil.filterTime(myQuotaData.creditLimit ) :'200,000'}}
      </view>
    </view>
    <view class="subTitle">
      <view>
     
      </view>
    </view>
    <view class="myquat_button">
      <button onTap="onShowTost" a:if="{{!buttonStatus}}">申请额度</button>
      <button class="cancel-btn" a:else onTap="onPhone" open-type="getAuthorize" onGetAuthorize="onGetAuthorize" onError="onAuthError" 
        scope='phoneNumber'>申请额度</button>
    </view>
  </view>
</view>