微信小程序wxs

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

  • 打开文档一看,「由于运行环境的差异,在 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>
  • 上面那个经典的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>