• 售前

  • 售后

热门帖子
入门百科

微信小步调中wxs文件的一些妙用分享

[复制链接]
青丝暮雪780 显示全部楼层 发表于 2022-1-8 06:11:06 |阅读模式 打印 上一主题 下一主题
目录


  • 媒介
  • 应用

    • 过滤器
    • 拖拽
    • 文件之中相互传参
    • wxs传参到js逻辑层
    • js逻辑层传参到wxs文件
    • wxs中获取dataset(wxs中获取wxml数据)
    • 留意点

  • 总结

媒介

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文件妙用内容请搜索脚本之家从前的文章或继续欣赏下面的相干文章希望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作