WXS 相关知识点补充

1、认识 WXS 的作用

WXS（WeiXin Script）是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。官方解释：WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致（不过基本一致）。

为什么要设计 WXS 语言：在 WXML 中是不能直接调用 Page/Component 中定义的函数的，但是某些情况，我们可以希望使用函数来处理 WXML 中的数据（类似于Vue中的过滤器），这个时候就使用 WXS 了。

WXS 使用的限制和特点：（1）WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API。（2）WXS函数不能作为组件的事件回调。（3）由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2~20 倍。在 android 设备上二者运行效率无差异。

2、WXS 的基本使用

在 WXML 中是不能直接调用 Page/Component 中定义的函数的，但是某些情况，我们可以希望使用函数来处理 WXML 中的数据（类似于Vue中的过滤器），这个时候就使用 WXS 了。

<!--home.wxml文件中的代码-->
<view>{{25.6666666.toFixed(2)}}</view>   <!--错误的写法-->
<view>{{25.6666666}}</view>              <!--错误的写法-->

<!--wxs/info.wxs文件中的代码（没有wxs标签，写在wxml文件中才需要wxs标签）-->
<wxs module="info">        <!--wxs变迁中写的是JavaScript代码-->
    var message = "Hello World";
    var name = "erha";
    var sum = function(numl,num2){
        return numl + num2;
    }
    module.export = {      <!--commonjs的模块化导出的写法-->
        message:message,
        name:name,
        sum:sum,
    }
</wxs>

<!--home.wxml文件中的代码-->
<!--定义在单独的wxs文件中，再使用<wxs>标签进行导入-->
<wxs src="../../wxs/info.wxs"module="info"/>    <!--注意这里不能写绝对路径-->

<view>{{info.message)}</view>        <!--页面显示：Hello World-->
<view>{{info.name}}</view>           <!--页面显示：erha-->
<view>{{info.sum(20,30)}}</view>     <!--页面显示：50-->

3、WXS 的应用练习

在 WXML 中是不能直接调用 Page/Component 中定义的函数的，但是某些情况，我们可以希望使用函数来处理 WXML 中的数据（类似于Vue中的过滤器），这个时候就使用 WXS 了，比如让一个小数保留两位小数，或格式化服务器返回的时间戳。

<!--wxs/format.wxs文件中的代码-->
function priceFormat(price, number){    <!--保留两位小数-->
    var number = number || 2; 
    return price.toFixed(nymber);
}
module.exports = {
    priceFormat:priceFormat,
}

<!--home.js中的代码-->
Page({
    data:{
        price:25.66666;
    }
})

<!--home.wxml中的代码-->
<wxs srC="../../wxs/format.wxs" module="format"/>
<view>{{format.priceFormat(price)}}</view>    <!--显示25.67-->