小程序中的WXS脚本

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

什么是WXS

wxs 是小程序中独有的一套脚本语言，结合 wxml，可以构建出页面的结构

WXS 的应用场景

.wxml 文件中无法调用页面 .js 文件中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数，因此，小程序中的 wxs 的典型应用场景就是 过滤器（在渲染数据之前，对数据进行一种包装的处理）。通过过滤器的处理，最终把数据渲染到页面上

WXS 和 JavaScript 的关系

虽然 wxs 的语法类似于 JavaScript ，但是 wxs 和 JavaScript 是完全不同的俩种语言

• wxs 有自己的数据类型
  • number 数值类型
  • string 字符串类型
  • boolen 布尔类型
  • object 对象类型
  • function 函数类型
  • array 数组类型
  • date 日期类型
  • regexp 正则表达式
• wxs 不支持类似于 ES6 及以上的语法形式
  • 不支持：let、const、结构赋值、展开运算符、箭头函数、对象属性简写等等
  • 支持：var定义变量、普通 function 函数等类似于 ES5 的语法
• wxs 遵循 CommonJS 规范
  • module 对象
  • require 函数
  • module.rcports 对象

内嵌 wxs 脚本

• wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 JavaScript 代码可以编写在 html 文件中的 scrips 标签内一样
• wxml 文件中的每个 <wxs> </wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在 wxml 中访问模块中的成员

页面结构（.wxml 文件）

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
    module.exports.toUpper = function(str){
        return str.toUpperCase()
    }
</wxs>

定义外联的 wxs 脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 JavaScript 代码可以编写在以 .js 为后缀名的文件中一样

• 外联 wxs 脚本的创建

  • 创建一个以 .wxs 为后缀的文件
  • 在文件内声明一些方法或属性，
  • 用 module.exports 的方式向外共享这些方法或属性

  function toLower(str){
      return str.toLowerCase()
  }
  
  module.exports = {
      toLower: toLower
  }
  

• 外联 wxs 脚本的使用

  在 wxml 中引入外联的 wxs 脚本时，必须为 wxs 标签添加 module 和 src 属性

  • module 用来指定模块的名称
  • src 用来指定要引入的脚本的路径，且必须是相对路径

  //调用 m2 模块中的方法
  <view>{{m2.toLower(country)}}</view>
  
  //引用外联 tools.wxs 脚本，并命名为m2
  <wxs src="../../utils/tools.wxs" module="m2"></wxs>
  

  ---

  wxs 的特点

  • 与 JavaScript 不同

    为了降低 wxs 的学习成本， wxs 语言在设计时借鉴了 JavaScript 的语法，但是本质上， wxs 和 JavaScript是完全不同的俩种语言

  • 不能作为组件的事件回调

    wxs 典型的应用场景就是过滤器，经常配合 Mustache 语法进行使用

    <view>{{m2.toLower(country)}}</view>
    

    在wxs中定义的函数不能作为组件的事件回调函数

    <button bindtap="m2.toLower(country)"> 跳转 </button>
    

  • 隔离性

    隔离性：wxs 的运行环境和其他 JavaScript 代码是隔离的

    • wxs 不能调用 js 中定义的函数
    • wxs 不能调用小程序提供的API

  • 性能好

    在iOS设备上，小程序内的 wxs 会比 JavaScript 代码快 2~20倍 在Android设备上，二者运行效率无差异