Vue や React から WeChat Mini Program に移ってきたとき、「テンプレートにメソッドを書けないのはなぜ？」と戸惑う人が多い。Mini Program では {{ }} 内で JavaScript の関数呼び出しが禁止されており、代わりに WXS（WeiXin Script）という独自スクリプト言語を使う必要がある。

WXS の基本構文

WXS は CommonJS に似たモジュールシステムを採用する。関数を外部に公開するには module.exports を使う。

インライン記述

<wxs module="fmt">
function yen(price) {
  return '¥' + price.toLocaleString()
}
module.exports = { yen: yen }
</wxs>

<text>{{fmt.yen(item.price)}}</text>

外部ファイル化

utils/filters.wxs

function capitalize(str) {
  if (!str) return ''
  return str[0].toUpperCase() + str.slice(1)
}
function ellipsis(str, len) {
  return str.length > len ? str.slice(0, len) + '…' : str
}
module.exports = {
  capitalize: capitalize,
  ellipsis: ellipsis
}

上記ファイルを WXML から読み込む：

<wxs src="../../utils/filters.wxs" module="f"/>
<view>{{f.capitalize(title)}}</view>
<view>{{f.ellipsis(desc, 20)}}</view>

WXS の制限事項

• ES6 以降の構文（アロー関数、テンプレートリテラル、let/const 等）は使用不可
• 非同期処理（Promise、setTimeout 等）は利用できない
• DOM/BOM API は存在しない
• 他の WXS ファイルを require で読み込めるが、相対パスのみサポート

実践例：日付フォーマット

次の WXS はタイムスタンプを「MM/DD HH:mm」形式に変換する。

// date.wxs
function pad(n) {
  return n < 10 ? '0' + n : n
}

function format(ts) {
  var d = getDate(ts)
  var M = pad(d.getMonth() + 1)
  var D = pad(d.getDate())
  var h = pad(d.getHours())
  var m = pad(d.getMinutes())
  return M + '/' + D + ' ' + h + ':' + m
}

module.exports = { format: format }

WXML 側での利用：

<wxs src="./date.wxs" module="dt"/>
<view wx:for="{{logs}}" wx:key="id">
  {{dt.format(item.timestamp)}}
</view>

まとめ

Mini Program のテンプレートでは JavaScript の関数を直接呼べないため、ロジックを WXS に切り出して {{ }} 内で利用する。Vue/React とは異なるが、WXS を使えば複雑な表示ロジックもテンプレートに閉じて実装できる。