小程序 wxs 摘要

Question

腾讯说：WXS 与 JavaScript 是不同的语言，有自己的语法^[1]

然后我又看到：以上方法的具体使用请参考 ES5 标准^[2]

特征

• WXS 是可以在视图层（webview）中运行的JS
• WXS 无法直接修改业务数据，仅能设置当前组件的 class 和 style，或者对数据进行格式化。要修改逻辑层的数据，需要通过 callMethod，传递参数给逻辑层
• WXS 是被限制过的 JavaScript，可以进行一些简单的逻辑运算
• WXS 可以监听 touch 事件，处理滚动、拖动交互故

适用场景

• 用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等
• 数据格式处理，比如文本、日期格式化，或者国际化

通过 WXS 可以模拟实现 Vue 框架的过滤器。如下是一个通过wxs实现首字母大写的示例：

<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>

参考

1. WXS 语法参考 | 微信开放文档
2. 基础类库 | 微信开放文档
3. 谜之wxs，uni-app如何用它大幅提升性能 - 崔红保的文章 - 知乎
4. 如何评价微信新推出的WXS语言？ - 鲁小夫的回答 - 知乎