Parlons du module wxs dans l'applet WeChat et présentons comment l'utiliser.

Cet article vous fera comprendre le module wxs dans l'applet WeChat et vous présentera l'utilisation de wxs. J'espère qu'il sera utile à tout le monde !

Écrit auparavant, quelques réflexions :

Je développe des mini-programmes WeChat depuis un certain temps. Je dois dire que l'API et les divers composants packagés des mini-programmes WeChat sont en effet très puissants, dans une large mesure. Cela fait gagner du temps aux développeurs, mais pour moi, je préfère écrire quelque chose moi-même. Tout est développé dans les composants et les API packagés par WeChat. Au fil du temps, je ne peux réaliser des opérations que comme un travailleur qualifié.

Bien que les petits programmes soient également encapsulés dans une seule couche, il y a toujours une différence entre utiliser des programmes prêts à l'emploi et les écrire vous-même. Par exemple, s'appuyer entièrement sur l'emballage officiel de WeChat et sur l'auto-développement sur la base de mini-programmes natifs, c'est comme la différence entre décorer une pièce à couverture rigide et une pièce brute. Cela dépend entièrement de l'emballage de WeChat. Il vous suffit de déplacer les meubles dans la couverture rigide. room. C'est super, on peut dire que c'est une construction rapide. Bien sûr, je ne rejette pas l'API packagée par WeChat. Après tout, dans une certaine mesure, leurs performances sont meilleures, peu importe le moment. Je ne perdrai pas ma capacité à développer à partir de zéro. Après tout, le front-end n'est pas que de petits programmes.

Texte :

Récemment, il est obligatoire d'avoir un curseur sur une page. Vous pouvez faire glisser le curseur vers n'importe quelle position sur la page avec votre doigt, et lorsque vous le relâchez, le curseur peut automatiquement absorber le bord.

Étant donné que les éléments DOM ne peuvent pas être directement manipulés dans les mini-programmes, le style ne peut pas être défini directement via js. Si vous souhaitez que le curseur réponde rapidement au glissement de votre doigt, localiser la position de l'élément via les données de la page équivaut à. setData. au niveau de la milliseconde, une réponse setData nécessite deux communications entre la couche logique et la couche de rendu et un rendu, et la communication prend relativement du temps. De plus, le rendu setData bloquera également l'exécution d'autres scripts SetData à cette fréquence peut facilement provoquer un décalage, cette solution n'est donc pas réalisable.

Dans l'applet WeChat, il existe un conteneur de vue officiel appelé moving-view. Cela devrait pouvoir résoudre les besoins. Cependant, comme mentionné ci-dessus, lorsque la différence de performances n'est pas grande, je préfère l'écrire moi-même. sert d'alternative. Usage de WXS

en d'autres mots, WXS est spécialement utilisé pour les pages WXML. il est indiqué dans la documentation WeChat que wxs est un langage de script pour les petits programmes et possède sa propre syntaxe, la plupart de la syntaxe n'est pas très différente de js. Si vous êtes intéressé, vous pouvez lire la documentation vous-même. L'applet WeChat propose deux méthodes d'appel. Je n'entrerai pas dans les détails ici. Collez simplement le code directement

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: &#39;translate(&#39;+x+&#39;px&#39;+&#39;,&#39;+y+&#39;px)&#39;,
    })
  },
//当props的monitor数据发生变化的时候触发该方法，会自动传入monitor当前值，一些业务逻辑可以在此处处理
  chooseShow: function (monitor) {
    console.log(&#39;监听到更新，monitor=&#39;,monitor);
  }
}

Effet final : (Les Nuggets ne semblent pas prendre en charge. vidéo, car c'est Zhihu. Elle a été déplacée directement, elle n'a donc pas été convertie en gif. Si vous souhaitez regarder la vidéo, vous pouvez consulter l'article de Zhihu )

. L'utilisation de base de wxs est probablement la suivante, car je suis le même. C'est la première fois que j'utilise wxs. S'il y a des lacunes ou des erreurs, n'hésitez pas à me corriger.

【Recommandations d'apprentissage associées :

Tutoriel de développement de mini-programmes

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!