微信小程序基础详解(3)

介绍:

昨天学习了全局配置和页面配置与目录结构,今天就开始学习模板语法之数据绑定,运算,及其列表渲染和条件渲染,当然还有比较常见的事件

模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

1.数据绑定

常见写法:WXML中写

<view> {{ message }} </view>

js文件中写入

Page({
  data: {
    message: 'Hello MINA!'
 }
})

组件属性(需要在双引号之内)

**WXML中写**

<view id="item-{{id}}"> </view>

在js文件中写入

Page({
  data: {
    id: 0
  }
})

bool类型

.
不要直接写 checked=“false”,其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

运算

1. 三元运算

iew hidden="{{flag ? true : false}}"> Hidden </view>

2. 算数运算

在WXML中写

<view> {{a + b}} + {{c}} + d </view>

在js中写入

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
 }
})

3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

4. 字符串运算

在WXML中写入

<view>{{"hello" + name}}</view>

在js文件中写入

Page({
  data:{
    name: 'MINA'
 }
})

注意:花括号和引号之间如果有空格，将最终被解析成为字符串

列表渲染

1.wx:for

1. wx:for项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
   下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名

注意:

1. 当 wx:for 的值为字符串时，会将字符串解析成字符串数组
2. 花括号和引号之间如果有空格，将最终被解析成为字符串

2. wx:key 作用 ⽤来提⾼数组渲染的性能,用来绑定一个唯一的键值,防止重复

wx:key 绑定的值 有如下选择

string 类型，表⽰ 循环项中的唯⼀属性 如

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

block

介绍: 渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

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

条件渲染

1. wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

 <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

2. hidden

<view hidden="{{condition}}"> True </view>

注意：

1. 如果需要非常频繁地切换，则使用 hidden较好；如果在运行时条件很少改变，则使用 if 较好。
2. 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

小程序事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明即可。

事件分类:

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开(类似于单击事件)
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

注意:

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，

1. 绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2. 事件传值 通过标签⾃定义属性的⽅式 和 value

<input bindinput="handleInput" data-item="100" /> 

3 事件触发时获取数据

handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 . 

总结:

今天学习的知识还是小程序的基础,但相比于昨天,今天学习的知识还是偏难一点的,今天主要学习了数据绑定,运算,及其列表渲染和条件渲染,事件触发,小程序的有一个比较大的优点就是他的几乎所有知识官方文档里都比较详细的说明了,大家有兴趣的话可以参考一下链接
https://developers.weixin.qq.com/miniprogram/dev/framework/

然后我把今天的注意点都总结在这里,大家不要忘了注意事项,具体哪个问题请看上文

注意

1. 当 wx:for 的值为字符串时，会将字符串解析成字符串数组
2. 花括号和引号之间如果有空格，将最终被解析成为字符串
3. 如果需要非常频繁地切换，则使用 hidden较好；如果在运行时条件很少改变，则使用 if 较好。
4. 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
5. 绑定事件时不能带参数 不能带括号 以下为错误写法
6. 事件传值 通过标签⾃定义属性的⽅式 和 value
7. 事件触发时获取数据

最后作者创作不易,如果文章对你有帮助记得留下你的点赞和关注,感谢各位了