初试微信小程序(事件简介)

最新推荐文章于 2024-12-12 22:41:29 发布

原创最新推荐文章于 2024-12-12 22:41:29 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

14 篇文章

订阅专栏

本文分享了微信小程序开发过程中的实用技巧与常见问题解决方案，包括配置细节、单标签闭合、箭头函数使用、事件处理及冒泡事件类型等，帮助开发者避免陷阱，提升开发效率。

在使用微信小程序的时候最后一个配置不要添加逗号,不然会失效
刚加入一个公司, 公司就让我在三天之内实现一个cnode的中文社区,

还是好好记录一下微信的一些坑吧;

单标签需要闭合使用,不然会报错

注意箭头函数的使用, 他this的指向会指向最近一个层级的对象;

在使用 wx.request() 等函数的时, 如果使用箭头函数,需要先在这之前改变this的指向
如 const that=this ,

view 组件的公共属性
公共属性

<view
        class="pressBtn"   
        id="num"
        style="color:#fbfbfb"
        hidden     //这个属性用来隐藏这个view
        data-name="num"   //自定义的属性 以data开头
        catch/bind:tap="onNumTap"  //添加属性
        >{{num}}</view>

wx:if 与 v-if 对应, hidden 与v-show 进行对应;
在标签中使用 {{ }} 即是对应 vue 中 v-bind :

bind 的就是vue 中 v-on 事件的监听; @

在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；
建议不太清晰的时候直接使用currentTarget即可
currentTarget里面的 dataset是没有数据的。这个是为了方便我们添加我们自定义的属性

小程序中的冒泡事件：

类型触发条件
touchstart 手指触摸动作开始
touchend 手指触摸动作结束

touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗

tap 手指触摸后马上离开(使用最多)
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

在这里插入图片描述
水平为X, 竖直为Y

pageX 绝对定位, 联想css 中的定位, (不考虑滚动条的)
clientX , 相对定位, 与滚动条有关
https://www.cnblogs.com/jicheng/p/5945057.html

详解:https://blog.youkuaiyun.com/Q176782/article/details/52135746

使用多次遍历的时候最好使用 block 包裹
在wxml中是不会解析的,但是又可以方便嵌套

<view bindtap="passQuery" data-index="1">点击事件传参</view>

js中：

passQuery: function(e){
    // 传递的参数
    let query = e.currentTarget.dataset['index'];
}