官方文档：

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
}