wxs学习笔记

wxs

wxs 其实就是微信小程序的js ，但其不支持es6的语法，在wxs中也不可以直接调用Page/Component中定义的函数的，在某些情况，例如我们希望通过函数来处理WXML中数据(类似Vue中过滤器) 这个时候就使用WXS了（时间戳格式化，数字转化为固定格式）

1 简单使用：

<wxs module="xxf2"> // module属性必须要有 相当于给这个wxs起一个名字
 // js代码 只能写es5语法
 var foo = 'hello world'
 var name = 'xxf2'
 var sum = function(num1,num2){
  return num1 + num2
 }
 
 module.exports = {
  foo:foo, // 不能简写成 foo (不支持es6)

  name:name,

  sum:sum

 }

</wxs>
<!-- 为啥拿不到数据 是因为wxs定义的数据默认是私有是，要想拿到数据要暴露出来 -->

<view>{{xxf2.name}}</view> 
<view>{{xxf2.sum(10,20)}}</view>

2 抽离 ：

把wxs抽离成一个单独的文件，在xxf2.wxs 中的代码为

 var foo = 'hello world'

 var name = 'xxf2'

 var sum = function(num1,num2){

  return num1 + num2

 }

 module.exports = {

  foo:foo, 

  name:name,

  sum:sum

 }

在对应要使用wxml 页面使用时

<wxs src="/wxs/xxf2.wxs" module="xxf2"></wxs> 

<view>{{xxf2.name}}</view> 

<view>{{xxf2.sum(10,20)}}</view>

3wxs 的实际运用 案例

1新建对应 wxs 文件

代码：

var formatprice = function(price){

  return price.toFixed(2)

}

module.exports={

 formatprice:formatprice

}

在对应需要用到的wxml页面引入

<view>{{price}}</view>

<view>对price保留两位小数</view>

<view>{{format.formatprice(price)}}</view>

<wxs src="/wxs/format.wxs" module="format"></wxs>

]