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