微信小程序WXS特征及适用场景
2021-07-26 10:42:32

记一下小程序的wxs相关知识

WXS（WeiXin Script）是微信创造的一套脚本语言，它的官方说法是：“WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致”。

WXS具备如下特征:

• 是可以在视图层（webview）中运行的 JS

• 无法修改业务数据，仅能设置当前组件的class和style

• 是被限制过的 JavaScript，可以进行一些简单的逻辑运算

• 可以监听 touch 事件，处理滚动、拖动交互

适用场景:

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

• 纯粹的逻辑计算，比如文本、日期格式化，通过 WXS 可以模拟实现 Vue 框架的过滤器, 如下是一个通过 wxs 便捷实现首字母大写的示例

1. <wxs module="m1">

2. // 首字母大写

3. var capitalize = function(value) {

4. if (!value) return ''

5. value = value.toString()

6. return value.charAt(0).toUpperCase() + value.slice(1)

7. }

8. module.exports = {

9. capitalize: capitalize

10. }

11. </wxs>

12. <view class="content">

13. <view class="text-area">

14. <!-- title 为当前页面 data 中定义的初始数据 -->

15. <text class="title">{{m1.capitalize(title)}}</text>

16. </view>

17. </view>