微信小程序wxs 脚本语言

Posted 2020-12-09 aaabingbing

微信小程序 —— wxs 脚本语言

为什么要使用 wxs？

wxs 的作用就是减少在 wxml 页面上的语句，比如 wx:if 判断语句，如果过多的情况下就会造成 wxml 页面很乱，可读性不好，在 ios 设备上小程序内的 wxs 会比 javascript 代码快 2-20 倍

wxs 文件有什么用？

在 wxs 文件中写一些方法，通过 module.exports 暴露出去，这样就可以被别的 wxs 文件或<wxs>标签引入

wxs 使用注意：

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
3. wxs 的运行环境和其他 JavaScript 代码是隔离的，wxs 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API。
4. wxs 函数不饿能作为组件的事件回调。
5. 由于运行环境的差异，在 IOS 设备上小程序内的 wxs 会比 JavaScript 代码快 2-20 倍，在 android 设备上二者运行效率无差异

wxs 的引用方式

• 标签引入：<wxs src="wxs文件路径" module="方法名">
• require 引入：var tools = require(‘wxs文件相对路径‘)

示例代码

在 wxml 中使用 toFixed 方法

新建一个 filters.wxs

var filters = {
  toFix: function (value, value1) {
    if (typeof value == ‘undefined‘) {
      return value
    } else {
      return value.toFixed(value1)
    }
  },
  toStr: function (value) {
    return value.toString()
  },
  toNum: function (value) {
    return value.toNumber()
  },
}

module.exports = {
  toFix: filters.toFix,
  toStr: filters.toStr,
  toNum: filters.toNum, //暴露接口调用
}

页面引入并使用

<wxs module="filters" src="../../utils/filter.wxs"></wxs>
<text class="ptfanxian">{{filters.toFix(test,2)}}</text> // test调用toFixed方法保留两位小数