小程序 wxs 摘要

  • Z时代
  • 2024-01-10
  • 分类：综合

腾讯说：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语言？ – 鲁小夫的回答 – 知乎

以上是 小程序 wxs 摘要 的全部内容， 来源链接： utcz.com/z/264550.html

回到顶部