【小程序语法】小程序脚本语言 - WXS

作者：$贤蛋大眼萌，一名很普通但不想普通的程序媛$

语录：$多一些不为什么的坚持$

本文章收录于专栏：小程序从0到放飞自我

PS: $眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台--牛客网$

求知无坦途，学问无捷径。$一步一个脚印，你走过的路，每一步都算数。$ 每一次进步都是对自己努力的肯定。如果读了文章有收获，不如一起来学习，一起进步吧。传送门刷题神器

⚙️ 什么是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 属性是当前 标签的模块名。在单个 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 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

注意：

• 模块只能在定义模块的 WXML 文件中被访问到。使用 或 时， 模块不会被引入到对应的 WXML 文件中。