微信小程序中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等比例缩小图片尺寸的实例
Feb 27 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
原生javascript实现分页效果
Apr 21 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JavaScript实现各种排序的代码详解
Aug 28 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python在图片中添加文字的两种方法
2017/04/29 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
化学教师自荐信范文
2013/12/28 职场文书
销售人员自我评价
2014/02/01 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
卖房协议书
2014/04/11 职场文书
和解协议书
2014/04/16 职场文书
团代会闭幕词
2015/01/28 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers