官方文档:

WXS 语法参考 (opens new window)

  使用 WXML 过后,我们发现:WXML 并不能像 HTML 一样,在页面中调用.js 文件中定义好的函数。

<view>
  <block wx:for="{{books}}" wx:key="id">
    <view>price: {{"$" + item.price}}</view>
    <!-- <view>price: {{formatPrice(item.price)}}</view> -->
  </block>
</view>
Page({
  data: {
    books: [
      // ……
    ]
  }
  // formatPrice(price) {
  //   return '¥' + price
  // }
})
原因

  因为小程序采用的是双线程模型,在渲染层(WXML 和 WXSS)是不能调用逻辑层(JS 脚本)的方法的。

# 一、WXS 简介

# 1、认知

  在小程序中我们可以使用 WXS 脚本作为类似于 vue 中的“计算属性”的角色。

特性

隔离性

  WXS 的运行环境和其他 JavaScript 代码是隔离的:

WXS 中不能调用其他 JavaScript 文件中定义的函数

WXS 中不能调用小程序提供的 API

高效性

  • 在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
  • 在 android 设备上二者运行效率无差异
<view>
  <block wx:for="{{books}}" wx:key="id">
    <view>price: {{"$" + item.price}}</view>
    <view>price: {{format.formatPrice(item.price)}}</view>
  </block>
</view>

<wxs module="format">
  formatPrice(price) {
    return '¥' + price
  }
  module.exports {
    formatPrice: formatPrice
  }
</wxs>

# 2、WXS 语法

① 数据类型

  目前 WXS 语言支持的数据类型有:

number、string、boolean、object、function、array、date、regex

② 基础语法

  支持 var 定义变量、普通 function 函数等 ES5 语法

注意:WXS 不支持 let、const、解构赋值、在展开运算符、箭头函数、对象属性简写等

③ 模块化

  WXS 的模块化遵循 CommonJS 规范

  • module 对象
  • require()对象
  • module.exports 对象

# 3、应用示例

数量格式化
  • utils / format.wxs
function formatCount(count) {
  count = Number(count)
  if (count >= 100000000) {
    return (count / 100000000).toFixed(1) + '亿'
  } else if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  } else {
    return count
  }
}

module.exports = {
  formatCount: formatCount
}
时间格式化
  • utils / format.wxs
// function padLeft(time) {
//   if ((time + '').length >= 2) return time
//   return '0' + time
// }

function padLeft(time) {
  time = time + ''
  return ('00' + time).slice(time.length)
}

function formatTime(time) {
  const minute = Math.floor(time / 60)
  const second = Math.floor(time) % 60

  return padLeft(minute) + ':' + padLeft(second)
}

module.exports = {
  formatTime: formatTime
}

# 二、WXS 使用

# 1、wxs 标签

内嵌 wxs 脚本

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

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

  module.exports = {
    toUpper: toUpper
  }
</wxs>

# 2、.wxs 文件

外联 wxs 脚本

<!--wxml-->
<view>{{m2.toUpper(username)}}</view>

<wxs module="m2" src="/utils/tools.wxs"></wxs>
  • utils / tools.wxs
function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}
更新于 : 7/8/2024, 10:21:14 AM