微信小程序中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利用div背景,做一个竖线的效果。
Nov 22 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS交换变量的方法
Jan 21 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
实例Python处理XML文件的方法
2015/08/31 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
春节活动策划方案
2014/01/24 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
投标担保书范文
2014/04/02 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
师范生求职信
2014/06/14 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
让生命充满爱观后感
2015/06/08 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
《司马光》教学反思
2016/02/22 职场文书