WXS

基础部分

wxs是什么
weixin script，是小程序的一套脚本语言，结合wxml，可以构建出页面的结构。
wxs与JavaScript语言不同，他有自己的语法，并不和JavaScript一致（单基本上一致）。

为什么要设计wxs语言呢？
因为在wxml中不能直接调用Page/Component中定义的函数
但是在某些情况下，我们希望使用函数来处理wxml中的数据（类似于Vue中的过滤器），这个时候就要用到wxs了。
比如我们想要一个数字保留小数点后边两位，wxml中不能直接调用函数，得借助wxs才行。

wxs使用的限制和特点：

• wxs的运行环境和其他JavaScript代码是隔离的，wxs中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API
• wxs中的函数不能作为组件的事件回调
• 由于运行环境的差异，在ios设备上，小程序内的wxs比JavaScript代码快2-20倍，在Android设备上两者运行效率无差异。

wxs的两种写法
写法一：直接镶嵌在wxml中
wxs.wxml文件：

<!-- wxs的第一种写法，借助wxs标签直接写在wxml标签中 -->
<wxs module="info">
var name = "dududu";
function add(num1, num2){
  return num1 + num2;
}
// 要导出
module.exports = {
  name: name,
  add: add
}
</wxs>

<view>{{info.name}}</view>
<view>{{info.add(10,20)}}</view>

写法二：将wxs代码单独抽取出一个文件来，并用wxs标签导入
在根目录下创建 wxs/message.wxs文件

var message = "hello world";

function fullName(firstName, lastName){
  return firstName + " " + lastName;
}

// 别忘了导出来
module.exports = {
  message: message,
  fullName: fullName
}

在wxs.wxml中导入并展示

<!-- 写法二：导入的写法 -->
<wxs src="./../../wxs/message.wxs" module="message" />
<view>{{message.message}}</view>
<view>{{message.fullName("hu", "dudu")}}</view>

注意
要有module，指明是哪个WXS

WXS在实际中的用处

应用一：价格格式化
应用二：时间格式化

format.wxs文件：

// 价格格式化
function priceFormat(price, number){
  var number = number || 2;
  var f_price = parseFloat(price);
  return f_price.toFixed(number);
}

// 时间格式化
function dateFormat(timestamp, format){
  // xxxxxx
}

module.exports = {
  priceFormat: priceFormat,
  dateFormat: dateFormat,
}

wxml中使用：

<wxs src="./../../wxs/format.wxs" module="format" />
<view>{{format.priceFormat(20.4325, 2)}}</view>
<view>{{format.dateFormat(1570595723)}}</view>