微信小程序学习9--小程序的脚本语言wxs

WXS

WXS是小程序专门设计的一种脚本语言，可以用在WXML文件中实现逻辑处理，类似于JavaScript。

需要通过module.exports暴露出去，才能被页面应用到。

模块化导入导出

直接在页面中使用：

<view>
  <view>{{m1.showInfo()}}</view>
  <view>{{m1.num}}</view>
</view>

<wxs module='m1'>
  // 这里可以实现业务处理
  console.log('hello wxs')

  // 支持模块导出
  module.exports.showInfo = function () {
    return 'hello'
  }
  module.exports.num = 123
</wxs>

文件导入导出

单独的文件形式，

// test.wxs
module.exports.add = function (a, b) {
  return a + b
}

引入到页面的结构当中wxml：

<view>
  <view>{{m2.add(1, 2)}}</view>
</view>

<!-- 引入独立的 wxs 文件 -->
<wxs module='m2' src='./test.wxs'></wxs>

应用场景

WXS 一般是结合 WXML 使用的，一般用来格式化展示数据，类似于 Vue 中过滤器的功能。

<!-- 将 now 时间戳传入 date.format 方法 -->
<view class="now">{{date.formatDate(now)}}</view>

<!-- 模块 date 暴露了 format 方法 -->
<wxs module="date" src="../../wxs/date.wxs"></wxs>

Page({
  // 获取当前时间（时间戳）
  data: {
      now: Date.now()
  }
})

// date.wxs
module.exports.formatDate = function (timestamp) {
  // wxs 中通过 getDate 函数获得时间对象
  var d = getDate(timestamp);
  // 返回值会在 wxml 中被渲染展示
  return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' d.getDate() + '日';
}