WXS是小程序的一套脚本语言

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

注意：

WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

WXS 函数不能作为组件的事件回调。

由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。

<!--wxml-->
<wxs module="m1">
var msg = "hello world";


module.exports.message = msg;
</wxs>


<view> {{m1.message}} </view>

适用场景:

用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等。

纯粹的逻辑计算，比如文本、日期格式化，通过 WXS 可以模拟实现 Vue 框架的过滤器。

<wxs module="m1">
  // 首字母大写
  var capitalize = function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
  module.exports = {
    capitalize: capitalize
  }
</wxs>
<view class="content">
  <view class="text-area">
    <!-- title 为当前页面 data 中定义的初始数据 -->
    <text class="title">{{m1.capitalize(title)}}</text>
  </view>
</view>

如果页面要实现拖拽效果，因为需要频繁的修改样式，所以性能会很差，这个时候我们可以是wxs来进行优化。