微信小程序—基础语法

小程序基础语法

一、状态绑定

<view>{{msg}}</view> //变量使用双大括号包裹 
<view id="item"></view> //标签的属性使用双引号包裹
// 双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号
<template is="mytemplate" data="{{ a: 1, b: 2 }}"></template> //绑定对象,不需要对象的花括号 

二、列表渲染

1、普通列表渲染

<view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">
    {{index}}: {{item}}
</view>

2、给index和item取别名

// 给index和item取别名
<view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">
    {{myIndex}}: {{myItem}}
</view>

3、渲染多节点代码块

// 渲染多节点代码块
<block wx:for="{{[1, 2, 3]}}">
    <view> {{index}}: </view>
    <view> {{item}} </view>
</block>

4、遍历字符串

// 遍历字符串
<view wx:for="array">
    {{item}}
</view>

5、绑定key,当组件重排后根据id可以复用组件和组件的状态

// 绑定key,当组件重排后根据id可以复用组件和组件的状态
// 当item是字符串或者数字可以使用*this代表item作为key
<block wx:for="{{[1, 2, 3]}}" wx:key="*this">
    <view> {{index}}: </view>
    <view> {{item}} </view>
</block>

三、动态创建和删除

// 同样也可以使用block来控制多节点代码块
<view wx:if="{{false}}">haha</view>
<view wx:elif="{{true}}">haha1</view>
<view wx:else="{{false}}">haha2</view>

四、动态隐藏和显示

// true为隐藏节点,false为显示节点
<view hidden="{{true}}">我是动态隐藏和显示的节点</view>

五、模板

// 声明一个模板
<template name="mytemplate">
<view>
    {{a}}: {{b}}
    </view>
</template>

// 使用此模板 obj: { a: 1, b: 2 }
<template is="mytemplate" data="{{...obj}}"></template>

六、事件绑定

1、使用bindtap:

// 使用bindtap绑定事件
<view bindtap="fn" data-my-data="222"></view>

2、事件对象:

// 事件对象
myFn: function(event) {
    console.log(event);
    // 使用data开头的自定义属性,将保存再event.currentTarget.dataset中
}

3、事件分类:

  • 冒泡事件:

    touchstart: 开始触摸
    touchmove: 触摸移动
    touchcancel :触摸打断
    touchend :触摸离开
    tap :瞬间触摸
    longpress :超过350ms的触摸
    transitionend: 过渡结束

    animationstart:动画开始

    animationiteration :动画执行一遍后触发

    animationend: 动画结束触发

  • 非冒泡事件

    除了上述事件以外都是非冒泡事件

4、绑定事件:

  • 可以使用 bindcatch 绑定:

    bindtap或者bind:tap ==> 不阻止冒泡

    catchtap或者catch:tap ==> 阻止冒泡


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:微信小程序—基础语法

文章字数:816

本文作者:Spicy boy

发布时间:2020-06-22, 00:55:32

最后更新:2021-03-08, 17:41:58

原始链接:http://www.spicyboy.cn/2020/06/22/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏