介绍微信小程序中的wxs模块并展示如何使用（微信小程序中如何使用该模块，代码解释）

本文将帮助您了解微信小程序的wxs模块，并介绍如何使用wxs。 希望对您有帮助！

我之前写的一些想法：

我们开发微信小程序已经有一段时间了。 不得不说，微信小程序的API以及各种封装的组件非常强大。 这为开发人员节省了大量时间，但我更喜欢自己写东西。 一切都是在微信封装的组件和API中开发的。 日积月累，只有熟练工匠的操作才能实现。 。

小程序也是封装一层的，但是使用现成的程序和自己写一个总有区别。 比如，完全依赖微信官方包和基于原生小程序自主开发，就像装修一间精装房和装修一间简陋的房间的区别。 这完全取决于微信的封装。 只需将家具搬进精装房即可。 太神奇了，我想说这是一个快速构建。 当然，我们并不否认微信封装的API。 毕竟，从某种程度上来说，他们的表现是更好的。 我只是希望自己永远不要失去从零开始发展的能力。 毕竟，前端不仅仅是一个小程序。

文本：

最近我需要在我的页面上添加一个滑块。 您可以用手指将滑块拖动到页面上的任意位置，当您松开手指时，滑块会自动吸收边缘。

DOM元素无法在小程序中直接操作，因此无法直接通过js设置样式。 如果你想让滑块快速响应手指滑动，这与从页面数据中定位元素是一样的。 所以对于毫秒级的setData来说，setData响应需要逻辑层和渲染层的两次通信和一次渲染。 沟通需要相对较长的时间。 此外，setData 渲染还会阻止其他脚本的执行。 此解决方案是不可能的，因为以此频率运行 SetData 容易出现延迟。

微信小程序官方提供了一个视图容器，名为movable-view。 这应该可以解决您的需求，但正如我所说，如果性能差异不是很大，我更喜欢自己编写它作为替代方案。

如何使用WXS

也就是说，wxs是专门用于wxml页面的。是的，实现视图层调用函数的能力。

方法调用

微信文档中也提到，wxs是一个小程序，它是一种脚本语言，有自己的语法，虽然大部分都是。语法和js没有什么不同。 如果有兴趣可以自己阅读文档。 微信小程序有两种调用方式。 我不会在这里讨论太多细节。 直接贴代码。

wxml:

Homepage //新建index.wxs文件，导入wxs标签中的自定义使用路径。 IndexWxs是自定义模块名

\

wxs:

var x = 0,y = 0;//viewData是一个小程序获取节点信息并使用 var viewData = { height through data- : 0,//滑块宽度和高度 width: 0, windowHeight: 0,//宽度和屏幕高度 windowWidth : 0}vareventInstance = nullmodule.exports = {//触摸启动 touchStartByBlock: function (event) { eventInstance = event;//event.instance 是 var setViewDat a =event.currentTarget.dataset//data[k3 的组件实例] 获取传递的值 if (setViewData && setViewData.edge && setViewData.edge.windowHeight) { 视图数据 = 设置视图数据 . 角落} x =event.changedTouches[0].clientX - viewData.width/2//滑动时手指保持在模块中央 y =event.chang edTouches[0].clientY - viewData.height / 2 },//为了防止触摸移动时滑块越过边界，可以编写x、y边界值的判定。 此处未显示 touchMoveByBlock: function (event) { x =event.changedTouches[0].clientX - viewData.width/2 y =event.changedTouches[0].clientY - viewData 。 instance.setStyle({ //使用setStyle设置的样式权重为 Style high Translation: 'translate('+x+'px'+','+y+'px)'//setStyle 必须使用字符串 }) }, //触摸结束时松开手指 touchEndB yBlock: function (event) {//Sink边缘处理，判断当前手指位置在屏幕的哪一侧。 x = viewData.windowWidth/2 viewData.windowH 八-viewData.height viewData.windowHeight-viewData.height : yevent.instance.setStyle({translate('+x+'px'+','+y+' ? px)', }) },//当props的监听数据发生变化时触发该方法.monit 会自动通过。或当前值。 一些业务逻辑可以在这里处理。 selectShow: function (monitor) { console.log('Monitor for update,monitor=',monitor); }}

最终效果：（掘金好像不支持视频，因为是知乎直接搬的，没有转换成GIF，想看视频请看知乎的文章）

wxs的基本用法大概是这样的。 这是我第一次使用wxs，所以如果有什么不足或错误，请告诉我。

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

下载微信客户端

微信是一款可以通过手机网络发送语音消息、视频、照片、文字的移动通讯软件，支持 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 快速为你的微信小程序实现一个按钮组件（你的小程序中的按钮有哪些类型？）
• 微信小程序页面开发（微信小程序开发教程手册）
• 微信小程序购物车功能的实现（微信小程序开发购物车支付）
• 一个邮箱可以包含多个微信小程序（一个邮箱可以包含多个微信小程序账号）
• 如何使用小程序画布绘制二维码（如何使用小程序画布绘制二维码）

本文由主机参考刊发，转载请注明：介绍微信小程序中的wxs模块并展示如何使用（微信小程序中如何使用该模块，代码解释） https://zhujicankao.com/142822.html