目录
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
较好。