耀极客论坛

 找回密码
 立即注册
查看: 606|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 00:21:39 | 显示全部楼层 |阅读模式
  wxs相当于一个独立模块,相当于一个独立出来的module对象,通过module.exports向外暴露,在文件中引入即可使用,下面这篇文章主要给大家介绍了关于微信小程序中wxs文件的一些妙用,需要的朋友可以参考下

前言
  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文件妙用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:34 , Processed in 0.064497 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表