目录
1.小程序常用组件
1.1 view
1.3 block
1.4 text
2.数据绑定
3.数据渲染
4.列表渲染
5.条件渲染
1.小程序常用组件
1.1 view
<view>是布局容器 相当于div 我们通常习惯给页面包裹一个根组件，但是小程序和vue不一样，vue要求我们只能有一个根组件，而小程序可以有多个根组件，页面不会报错，看个人习惯编写页面即可。
1.2 navigator
<navigator>是用于创建页面跳转链接的组件，它类似于 HTML 中的 <a> 标签。
<navigator url="/pages/renderdata/renderdata">一、渲染渲染响应式数据</navigator>navigator常用属性汇总：
| url： | 必选属性，指定要跳转的页面路径。路径可以是绝对路径或相对路径。 |
| open-type： | 可选属性，指定跳转链接的类型，常用的包括：
|
| hover-class： | 可选属性，指定点击时的样式类。点击时会在 |
| hover-stop-propagation： | 可选属性，如果设置为 |
| 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 较好。
