微信小程序中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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
DISCUZ 分页代码
2007/01/02 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
React组件refs的使用详解
2018/02/09 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python 文件处理注意事项总结
2017/04/10 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
即兴演讲稿
2014/01/04 职场文书
个人银行贷款担保书
2014/04/01 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
辅导员学期工作总结
2015/08/14 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android