什么是WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。某些情况下，我们需要处理wxml中的数据（类似Vue中的过滤器），这个时候就需要用到WXS了。

• WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行；
• WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序 提供的API； 
• 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备 上二者运行效率 无差异；

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。(但是基本是一致的)

WXS的写法

写在标签中

写在以.wxs结尾的文件中

每一个 .wxs 文件和 标签都是一个单独的模块。

• 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
• 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现；

module 属性

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

WXS语法文档

完整实例

<!-- 1.方式一: 标签 -->
<wxs module="format">
  function formatPrice(price) {
    return "¥" + price
  }
  // 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
  module.exports = {
    formatPrice: formatPrice
  }
</wxs>
<!-- 2.方式二: 独立的文件, 通过src引入 -->
<wxs module="format" src="@/format.wxs"></wxs>

//format.wxs
function formatCount(count) {
  count = Number(count)
  if (count >= 100000000) {
    return (count / 100000000).toFixed(1) + "亿"
  } else if (count >= 10000) {
    return (count / 10000).toFixed(1) + "万"
  } else {
    return count
  }
}
// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
module.exports = {
  formatCount: formatCount
}

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

注意：

• <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
• <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。