在小程序中使用wxs模块

一. 背景

1. 在小程序 wxml 中的数据渲染，可以通过双花括号的形式，花括号里面只可以进行简单的算术运算或者使用三元表达式：

   <view> {{ count }} </view>
   
   <view> {{ count ? 1 : 0 }} </view>
   

2. 假如需要对绑定的数据进行处理，在 wxml 进行数据渲染的时候，类比于vue可以使用 methods 的方法或者使用 computed 来处理数据，但是 wxml 并不支持这种写法。所以引入了 wxs 语法。

二. WXS语法

1.模块

• wxs 代码可以写在 .wxs 文件内或者 标签内；
• 每一个 .wxs 文件内或者 标签都是一个独立的模块；
• 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

重要：在 wxs 模块中编写js代码，但它不同于js，变量只能使用 var 来定义。

参考文档wxs语法参考

2.使用标签形式：

在 wxml 文件里面直接使用wxs标签：

<wxs module="m1">  // -- module是wxs模块的名称，导出时候在m1对象里面
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{ m1.message }} </view>

3. 使用 .wxs 文件形式：

在 example.wxs 文件中：

var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;

在 wxml 文件中引入 .wxs 文件并使用：

<wxs module="m1" src="../example.wxs">  // -- src是引入路劲，只能是相对路径

<view> {{ m1.getMax([1, 2, 3, 4, 5, 1, 2, 3, 4]) }} </view>  // --  使用 wxs 模块中的方法