站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

聊聊微信小程序中的wxs模块,介绍使用方法

时间:2021-12-19 [网络编程]作者:fabuyuan 浏览:12 次

本篇文章带大家了解一下微信小程序中的wxs模块,介绍一下wxs的使用,希望对大家有所帮助!

聊聊微信小程序中的wxs模块,介绍使用方法  2

写在前面,关于一些想法:

开发微信小程序已经有一段时间了,不得不说微信小程序的API以及各种封装好的组件确实很厉害,很大程度上节约了开发者的时间,但是对我来说,我是更倾向于自己写一些东西的,一切都在微信封装的组件、API内开发,久而久之只能实现如同熟练工的操作。

虽然说小程序也是一层的封装,但是拿现成的和自己写的总是有所不同的。举个例子,全依赖与微信网封装和在原生小程序基础上自我开发,就像是装修精装房和毛胚房的区别一样,完全依赖于微信的封装,你只需要往精装房内搬家具就好了,可谓是快速搭建,当然我也不排斥微信封装的API,毕竟在某些程度上,他们性能更加卓越,我只是希望,不管在什么时候,都不要丧失自己从零开发的能力,毕竟前端,不只有小程序。

正文:

最近有一个需求,在一个页面中有一个滑块,能够用手指拖动滑块到页面的任意位置,并且在松手的时候,滑块能够自动吸边。

由于在小程序中无法直接操作DOM元素,也就无法通过js直接设置style,如果想要滑块快速响应手指的滑动的话,通过页面的data去定位元素位置,无异于是毫秒级的setData,一次 setData 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染,通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行,这种频率的setData容易造成卡顿,因此这个方案是不可行的。

在微信小程序中,网有提供一个视图容器,叫做movable-view,这个应该是可以解决需求的,但是在上文中有提到,在性能差别不大的时候,我更倾向于自己写,这个作为一个备选方案。

聊聊微信小程序中的wxs模块,介绍使用方法  2

WXS的使用

聊聊微信小程序中的wxs模块,介绍使用方法  2

也就是说,wxs是专门用于wxml页面的,它实现的是在视图层调用函数的功能

聊聊微信小程序中的wxs模块,介绍使用方法  2

调用方式

虽然在微信文档中有说明,wxs是小程序的一套脚本语言,有自己的语法,但是大部分语法还是和js区别不大,有兴趣的可以自行翻看文档。微信小程序中提供了两种调用方式,这里不做过多赘述,直接贴代码

wxml:

<view class="main">
<view>主页</view>
<wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件,在wxs标签中自定义路径引入,IndexWxs为自定义的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到类似observe的监听作用,当prop中的data属性有更新的时候,会触发change:prop的方法
    prop="{{monitor}}" //data属性
    data-navHeight="{{navHeight}}" //可以使用data-自定义传入属性
    data-edge="{{edgeData}}" 
    catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要调用wxs的方法需使用{{  }}
    catch:touchmove="{{IndexWxs.touchMoveByBlock}}" 
    catch:touchend="{{IndexWxs.touchEndByBlock}}">
    </view>
</view>

\

wxs:

var x = 0,y = 0;
//viewData 使用小程序获取节点信息的方法,通过data-传入
var viewData = {
  height: 0,//滑块的宽高
  width: 0,
  windowHeight: 0,//屏幕的宽高
  windowWidth: 0
}
var eventInstance = null
module.exports = {
//触摸开始
  touchStartByBlock: function (event) {
    eventInstance = event;// event.instance为组件实例
    var setViewData = event.currentTarget.dataset//获取data-传入的值
    if (setViewData && setViewData.edge && setViewData.edge.windowHeight) {
      viewData = setViewData.edge
    }
    x = event.changedTouches[0].clientX - viewData.width/2//滑动过程中保持手指在模块中心位置
    y = event.changedTouches[0].clientY - viewData.height/2
  },

//触摸移动中,可以给x,y写一些边界值判断,防止滑块越界,此处不做展示
  touchMoveByBlock: function (event) {
    x = event.changedTouches[0].clientX - viewData.width/2
    y = event.changedTouches[0].clientY - viewData.height/2

    event.instance.setStyle({//使用setStyle设置的样式权重比wxml设置的样式高
      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串
    })
  },

//松开手指,触摸结束时
  touchEndByBlock: function (event) {
    //吸边处理,判断当前手指位置在屏幕的哪一边
    x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0;
    y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y
    event.instance.setStyle({
      transform: 'translate('+x+'px'+','+y+'px)',
    })
  },
//当props的monitor数据发生变化的时候触发该方法,会自动传入monitor当前值,一些业务逻辑可以在此处处理
  chooseShow: function (monitor) {
    console.log('监听到更新,monitor=',monitor);
  }
}

最终效果:(掘金好像不支持视频,由于是知乎直接搬运的,也就没有转成gif,想看视频的可以移步知乎文章<说说微信小程序wxs的使用>)

聊聊微信小程序中的wxs模块,介绍使用方法  2

wxs的基本使用大概就是这样,由于我也是第一次使用wxs,若有说的不足或错误之处欢迎补充指正。

【相关学习推荐:小程序开发教程】

以上就是聊聊微信小程序中的wxs模块,介绍使用方法的详细内容,更多请关注站长家园其它相关文章!

本文标签:  微信小程序wxs模块

转载请注明来源:聊聊微信小程序中的wxs模块,介绍使用方法

本文永久链接地址:https://www.adminjie.com/post/6615.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle中with的用法是什么

      oracle中with的用法是什么

      在oracle中,with语句可以实现子查询,用于创建一个公共临时表,提高语句执行的效率,语法为“withtempNameas(select....)s...

    • html中改变字体颜色和大小的代码是什么

      html中改变字体颜色和大小的代码是什么

      html中改变字体颜色和大小的代码是“<标签名style="color:颜色值;font-size:字体大小值;">字体内容</标签名>...

    • 记一个ThinkPHP框架的渗透实战

      记一个ThinkPHP框架的渗透实战

      下面thinkphp框架教程栏目将给大家分享一个ThinkPHP框架渗透实战,希望对需要的朋友有所帮助!信息收集找到一个网站http://x.x.x.x/下...

    • mysql锁表的原因是什么

      mysql锁表的原因是什么

      在mysql中,锁表的原因是一个程序执行了对表的insert、update或者delete操作还未commite时,另一个程序也对同一个表进行相同的操作,则此时...

    • css上下文选择器的类型有什么

      css上下文选择器的类型有什么

      css上下文选择器有四种类型:1、后代选择器,可选择当前元素的所有后代元素;2、父子选择器,可选择当前元素的所有子元素;3、同级相邻选择器,可选择拥有共同父级且...

    热门文章