微信小程序wxs

1. 其实一般业务，用WXML + JS，就已经足够了，但到现在更新了这么多个版本，文档上依然存在这东西就证明肯定有存在价值的。

2. 打开文档一看，「由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。」，就这句话有点吸引，好像看不出用它的任何优势了，那既然也能快上2~20倍，那就继续往下看看吧。

简单分享下我今天总结的用法

1. 使用方式有两种

• 第一种

// 在 wxml 里直接使用
<wxs module="name">
  var message = "hello" 
  module.export.message = message
</wxs>
<view>{{name.message}}</view>

• 第二种

// 新建一个wxs文件，例如：test.wxs, 里面的代码和上面一样
// 在想使用的wxml里使用 （引入必须使用相对路径）
<wxs src="./test.wxs" module="name"></wxs> 
<view>{{name.message}}</view>

2. 好吧，可能你们会问，到底有什么用，写个hello，我还不如写在data里。是的，但后面有趣的事情就来了。 大家都知道，在小程序里，是不支持 {{ fn("hello") }}, 在调用函数时候不支持传入arguments，但用wxs就做到了，下面举个例子。

<wxs module="name">
   function reverseTo(str){
     return str.split('').reverse().join('')
   }
   module.exports = { reverseTo: reverseTo } 
<wxs>

<view> {{reverseTo('hello')}} </view>
>> 'olleh‘

• 上面那个经典的Vue例子，实现了。
• 其实说到这，很多正在做项目的同学们就会知道有地方要重构了，例如，以前我们要处理一个返回的时间，一般会在接口数据返回过来，然后处理一遍，现在感觉只要写一个formatTime的wxs就好了，然后直接在wxml里 {{ name.formatTime(item.time) }} 就好了。

3. wxs 怎么调用事件。

// 简单例子
<wxs module="moduleName">
  function wxsClick(){
    console.log("hello")
  }
  module.exports = { wxsClick:wxsClick }
</wxs>
<view bindtap="{{moduleName.wxsClick}}">点击我</view>