微信小程序中wxs文件的一些妙用分享

简单350

目录

• 前言
  
• 应用
  
  
  
  • 过滤器
    
  • 拖拽
    
  • 文件之中相互传参
    
  • wxs传参到js逻辑层
    
  • js逻辑层传参到wxs文件
    
  • wxs中获取dataset(wxs中获取wxml数据）
    
  • 注意点
    
  
  
• 总结
  

前言

wxs文件是小程序中的逻辑文件，它和wxml结合使用。
不同于js， wxs可以直接作用到视图层，而不需要进行视图层和逻辑层的setData数据交互；
因为这个特性，wxs非常适合应用于优化小程序的频繁交互操作中；

应用


过滤器

在IOS环境中wxs的运行速度要远高于js，在android中两者表现相当。
使用wxs作为过滤器也可以一定幅度提升性能；让我们来看一个过滤器来了解其语法。
wxs文件:

1. var toDecimal2 = function (x) {
   
2.   var f = parseFloat(x);
   
3.   if (isNaN(f)) {
   
4.     return '0.00'
   
5.   }
   
6.   var f = Math.round(x * 100) / 100;
   
7.   var s = f.toString();
   
8.   var rs = s.indexOf('.');
   
9.   if (rs < 0) {
   
10.     rs = s.length;
    
11.     s += '.';
    
12.   }
    
13.   while (s.length <= rs + 2) {
    
14.     s += '0';
    
15.   }
    
16.   return s;
    
17. }
    
18. module.exports = toDecimal2

复制代码

上面的代码实现了数字保留两位小数的功能。
wxml文件：

1. <wxs src="./filter.wxs" module="filter"></wxs>
   
2. <text>{{filter(1)}}</text>

复制代码

基本语法：在视图文件中通过wxs标签引入，module值是自定义命名，之后在wxml中可以通过filter调用方法
上面的代码展示了 wxs的运行逻辑，让我们可以像函数一样调用wxs中的方法；
下面再看一下wxs针对wxml页面事件中的表现。

拖拽

使用交互时（拖拽、上下滑动、左右侧滑等）如果依靠js逻辑层，会需要大量、频繁的数据通信。卡顿是不可避免的；
使用wxs文件替代交互，不需要频繁使用setData导致实时大量的数据通信,从而节省性能。
下面展示一个拖拽例子
wxs文件：

1. function touchstart(event) {
   
2.   var touch = event.touches[0] || event.changedTouches[0]
   
3.   startX = touch.pageX
   
4.   startY = touch.pageY
   
5. }

复制代码

事件参数event和js中的事件event内容中touches和changedTouches属性一致

1. function touchmove(event, ins) {
   
2.   var touch = event.touches[0] || event.changedTouches[0]
   
3.   ins.selectComponent('.div').setStyle({
   
4.     left: startX - touch.pageX + 'px',
   
5.     top: startY - touch.pageY  + 'px'
   
6.   })
   
7. }

复制代码

ins(第二个参数)为触发事件的视图层wxml上下文。可以查找页面所有元素并设置style,class(足够完成交互效果)
注意：在参数event中同样有一个上下文实例instance；event中的实例instance作用范围是触发事件的元素内，而事件的ins参数作用范围是触发事件的组件内。

1. module.exports = {
   
2.   touchstart: touchstart,
   
3.   touchmove: touchmove,
   
4. }

复制代码

最后将方法抛出去，给wxml文件引用。
wxml文件

1. <wxs module="action" src="./movable.wxs"></wxs>
   
2. <view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>

复制代码

上面的例子，解释了事件的基本交互用法。

文件之中相互传参

在事件交互中，少不了需要各个文件之中传递参数。 下面是比较常用的几种

wxs传参到js逻辑层

wxs文件中：

1. var dragStart = function (e, ins) {
   
2.         ins.callMethod('callback','sldkfj')
   
3. }

复制代码

js文件中：

1. callback(e){
   
2.         console.log(e)
   
3. }
   
4. // sldkfj

复制代码

使用callMethod方法，可以执行js中的callback方法。也可以实现传参；

• ！！！callMethod不支持传回调函数*
  

js逻辑层传参到wxs文件

js文件中：

1. handler(e){
   
2.         this.setData({a:1})
   
3. }

复制代码

wxml文件：

1. <wxs module="action" src="./movable.wxs"></wxs>
   
2. <view change:prop="{{action.change}}" prop="{{a}}"></view>

复制代码

wxs文件中：

1. change(newValue,oldValue){}

复制代码

js文件中的参数传递到wxs需要通过wxml文件中转。
js文件触发handler事件，改变a的值之后，最新的a传递到wxml中。
wxml中prop改变会触发wxs中的change事件。change中则会接收到最新prop值

wxs中获取dataset(wxs中获取wxml数据）

wxs中代码

1. var dragStart = function (e) {
   
2.   var index = e.currentTarget.dataset.index;
   
3.   var index = e.instance.getDataset().index;
   
4. }

复制代码

上面有提到e.instance是当前触发事件的元素实例。
所以e.instance.getDataset()获取的是当前触发事件的dataset数据集

注意点

wxs和js为不同的两个脚本语言。但是语法和es5基本相同，确又不支持es6语法； getState 在多元素交互中非常实用，欢迎探索。
不知道是否是支持的语法可以跳转官网文档； wxs运算符、语句、基础类库、数据类型

总结

到此这篇关于微信小程序中wxs文件的一些妙用的文章就介绍到这了,更多相关微信小程序wxs文件妙用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！