1. 前言

wxs文件和 js 经常有人搞混,这里简单做个梳理

2. 是什么 what

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

• wxs 和 js 关系 完全不同的 2 种语言

1. wxs 有自己的数据类型
   number 数值  string 字符串  boolean布尔 object对象
   function 函数 array 数组 date 日期 regexp正则
2. wxs 不支持类似 es6以上的语法形式
   不支持 let const 解构赋值 展开运算符 箭头函数 对象属性简写
   支持 var function
3. wxs 遵循commonJS规范
   module 对象
   require() 函数
   module.exports 对象

• wxs 特点

1. 和js语法类似但完全不是一个语言
2. wxs函数不能作为组件的回调
   <button bindtap="m1.toUpper">错误</button>
3. 隔离性
   wxs的运行环境和 js代码是隔离的
   wxs 不能调用js中定义的函数
   wxs 不能调用小程序提供的 API
4. 性能好
   iOS设备 快2-20 倍
   android 设备 运行无差异

3. 应用场景

1.wxml中无法调用在页面中定义的函数 但是 wxml 中可以调用wxs中定义的函数

2. 因此小程序 中 wxs 典型应用场景就是 '过滤器'

4.  wxs 使用--- 内嵌

1. 直接在 wxml文件 写 wxs标签
2. 添加 module属性:用来指定当前 wxs 模块名称 方便在 wxml 中访问模块中的成员
3. 核心代码

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

4. 页面使用
   使用的 对象变量 就是 module属性的值

<view class="title">内嵌 wxs</view>
    <view>
    <!-- 调试器看 数据 还是小写的 -->
        {{m1.toUpper(username)}}
    </view>
   <!-- 错误写法 -->
   <button bindtap="m1.toUpper">错误</button>

5.   wxs 使用--- 外联

1. 目录 /utils/tools.wxs
2. 简洁代码

// 不支持箭头函数
function toLower(str){
    return str.toLowerCase()
}
module.exports = {
    // 不支持对象简写
    toLower:toLower
}

3. 页面使用

<view class="title">外联wxs</view>
    <view>
        {{m2.toLower(username)}}
    </view>
<wxs module="m2" src="/utils/tools.wxs"> </wxs>

6. 补 0 函数

1. 其实补 0  用 str.padStart(2,0) API省事
2. 当然还有个  padEnd

//在这个wxs文件中实现一个数字过滤器,并导出 
function filter(number){
  // 3  --->  3.0   // 如果是整数, 则小数位补0
  // 3.6 ---> 3.6
  if (number % 1 == 0){
    number = number + ".0"
  }
  return number;
}
// 导出过滤函数
module.exports = filter;

参考资料

wxs官方文档

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉