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


Posted in Javascript onFebruary 18, 2022

前言

wxs文件是小程序中的逻辑文件,它和wxml结合使用。

不同于js, wxs可以直接作用到视图层,而不需要进行视图层和逻辑层的setData数据交互;

因为这个特性,wxs非常适合应用于优化小程序的频繁交互操作中;

应用

过滤器

在IOS环境中wxs的运行速度要远高于js,在android中两者表现相当。

使用wxs作为过滤器也可以一定幅度提升性能;让我们来看一个过滤器来了解其语法。

wxs文件:

var toDecimal2 = function (x) {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return '0.00'
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
}
module.exports = toDecimal2

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

wxml文件:

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

基本语法:在视图文件中通过wxs标签引入,module值是自定义命名,之后在wxml中可以通过filter调用方法

上面的代码展示了 wxs的运行逻辑,让我们可以像函数一样调用wxs中的方法;

下面再看一下wxs针对wxml页面事件中的表现。

拖拽

使用交互时(拖拽、上下滑动、左右侧滑等)如果依靠js逻辑层,会需要大量、频繁的数据通信。卡顿是不可避免的;

使用wxs文件替代交互,不需要频繁使用setData导致实时大量的数据通信,从而节省性能。

下面展示一个拖拽例子

wxs文件:

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

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

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

ins(第二个参数)为触发事件的视图层wxml上下文。可以查找页面所有元素并设置style,class(足够完成交互效果)

注意:在参数event中同样有一个上下文实例instance;event中的实例instance作用范围是触发事件的元素内,而事件的ins参数作用范围是触发事件的组件内。

module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}

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

wxml文件

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

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

文件之中相互传参

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

wxs传参到js逻辑层

wxs文件中:

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

js文件中:

callback(e){
	console.log(e)
}
// sldkfj

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

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

js逻辑层传参到wxs文件

js文件中:

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

wxml文件:

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

wxs文件中:

change(newValue,oldValue){}

js文件中的参数传递到wxs需要通过wxml文件中转。

js文件触发handler事件,改变a的值之后,最新的a传递到wxml中。

wxml中prop改变会触发wxs中的change事件。change中则会接收到最新prop值

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

wxs中代码

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

上面有提到e.instance是当前触发事件的元素实例。

所以e.instance.getDataset()获取的是当前触发事件的dataset数据集

注意点

wxs和js为不同的两个脚本语言。但是语法和es5基本相同,确又不支持es6语法; getState 在多元素交互中非常实用,欢迎探索。

不知道是否是支持的语法可以跳转官网文档; wxs运算符、语句、基础类库、数据类型

总结

到此这篇关于微信小程序中wxs文件的一些妙用的文章就介绍到这了,更多相关微信小程序wxs文件妙用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
微信JS接口大全
Aug 25 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
JavaScript的Set数据结构详解
Feb 18 #Javascript
JS封装cavans多种滤镜组件
HTML+JS实现在线朗读器
Feb 15 #Javascript
js中Map和Set的用法及区别实例详解
Feb 15 #Javascript
canvas实现贪食蛇的实践
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
You might like
一个MYSQL操作类
2006/11/16 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP取进制余数函数代码
2012/01/19 PHP
PHP实现下载功能的代码
2012/09/29 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
理解javascript正则表达式
2016/03/08 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python 字符串操作方法大全
2014/03/11 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python实现微信小程序自动回复
2018/09/10 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
Java面试题:为什么要用Java
2012/05/11 面试题
潘婷洗发水广告词
2014/03/14 职场文书
安全责任书范本
2014/04/15 职场文书
党员转正大会主持词
2015/07/02 职场文书