web学习笔记（七十四）

目录

1.小程序常用组件

1.1 view

1.2  navigator 

1.3 block

1.4 text

2.数据绑定

3.数据渲染 

4.列表渲染

5.条件渲染

wx:if 和 hidden的区别

---

1.小程序常用组件

1.1 view

 <view>是布局容器 相当于div 我们通常习惯给页面包裹一个根组件，但是小程序和vue不一样，vue要求我们只能有一个根组件，而小程序可以有多个根组件，页面不会报错，看个人习惯编写页面即可。

1.2  navigator 

<navigator>是用于创建页面跳转链接的组件，它类似于 HTML 中的 <a> 标签。

 <navigator url="/pages/renderdata/renderdata">一、渲染渲染响应式数据</navigator>

 navigator常用属性汇总：

url：	必选属性，指定要跳转的页面路径。路径可以是绝对路径或相对路径。
open-type：	可选属性，指定跳转链接的类型，常用的包括： navigate：保留当前页面，跳转到应用内的某个页面。 redirect：关闭当前页面，跳转到应用内的某个页面。 switchTab：跳转到 tabBar 页面，并关闭其他非 tabBar 页面。 navigateBack：关闭当前页面，返回上一页面或多级页面。
hover-class：	可选属性，指定点击时的样式类。点击时会在 <navigator> 上添加该样式类，用于视觉反馈。
hover-stop-propagation：	可选属性，如果设置为 true，点击 <navigator> 时阻止事件冒泡。
hover-start-time 和 hover-stay-time：	可选属性，设置点击后开始和保持的时间，用于控制点击时的反馈效果。

1.3 block

block标签是一个容器，包裹多个组件，又不会生成标签dom。

1.4 text

在小程序中，<text> 标签用于显示文本内容，类似于 HTML 中的 <span> 标签，

2.数据绑定

小程序中数据和方法需要声明在.js文件中，在小程序中每一个页面路由组件都对应一个page实例对象，我们在这个对象中设置响应式数据、事件、组件生命周期。
    data内的数据是页面的初始数据：响应式数据，修改数据组件自动更新。响应式原理和vue是一样的。

特点：
   1.响应式数据发生改变，组件不会立即更行，不是同步的。
   2.等一次事件循环结束后再将所有数据的变化进行一次组件更新，效率更高。
   3.小程序会合并更新；

// pages/renderdata/renderdata.js
Page({

  data: {
    count: 1, //这个数据后面赋什么值，初始值就是什么类型。
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});

3.数据渲染 

小程序再wxml页面进行数据的渲染，通过双大括号就可以渲染响应式数据。

<view class="render">
  <text>{{count}}</text>
</view>

属性也可以绑定一个变量或布尔值，此时也需要用双大括号进行包裹。否则系统会识别为一个字符串。

<view id='item-{{count}}'></view>
  <view sex='{{true}}'></view>

4.列表渲染

在小程序中我们通过wx:for来进行循环的操作，同时需要通过wx:key来绑定key，绑定值可以为所有或者是数据内的唯一标识，

（1）使用索引作为 key：

<view wx:for="{{items}}" wx:key="index"> <!-- items 是一个数组，每个项都会被渲染成一个 view --> </view>

在这个例子中，wx:key 绑定了 index，表示每个项的唯一标识是它在数组中的索引值。这种方式适合列表项顺序不会变化或者是静态数据的情况。

（2）使用唯一标识符作为 key(推荐使用)：

 <view wx:for="{{users}}" wx:key="name">
  <text>姓名：{{item.name}}</text>
  </view>

在这个例子中，假设 users 数组中的每个对象都有一个唯一的 name 属性，那么可以将 wx:key 设置为 name，确保每个项都有一个唯一的标识符作为 key。这种方式适合动态列表或者需要频繁更新和重排的情况。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，仅限于循环内部使用。 

如果当需要多层循环进行嵌套使用时，可以通过使用 wx:for-item 可以指定数组当前元素的变量名，通过使用 wx:for-index 可以指定数组当前下标的变量名。

  <view wx:for="{{users}}" wx:key="name">
  <text>姓名：{{item.name}}</text>
  <view  wx:for="{{users}}" wx:key="name" wx:for-index="i" wx:for-item="user">{{user.name}}</view>
  </view>

5.条件渲染

在小程序中通过wx:if和hidden来控制元素的显示和隐藏。wx:if等价于vue中的v-if，hidden等价于小程序中的v-show。

wx:if 和 hidden的区别

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。