从零学习微信小程序(二)—— 常用组件
发布于 3 年前 作者 jinxia 2500 次浏览 来自 分享

📢 大家好,我是小丞同学,一名大二的前端爱好者
📢 这篇文章记录一下,小程序中常用的组件,刚开始学容易忘
📢 非常感谢你的阅读,不对的地方欢迎指正 🙏
📢 愿你忠于自己,热爱生活

官方详细文档 官方文档很多很详细,这里记的是视频里涉及的

1. view

类似于原来的div标签

特殊属性,看起来属性都与点击有关

2. text

⽂本标签
只能嵌套 text
__⻓按⽂字可以复制__(只有该标签有这个功能)
可以对`` 空格 `` 、`` 回⻋ ``等 进⾏编码

3. image

  1. 图片标签
  2. 默认宽高 320 * 240 px
  3. 支持懒加载

对于图片缩放有多种处理方式,有点多,记不住

由于微信小程序大小受限制,因此多考虑采用外链的方式使用图片

4. swiper

轮播图组件

可以通过配置来实现轮播图的功能

实现了一个简易轮播图效果,很简单

默认宽度为100%,默认高度为 150px

常用的配置属性,用来控制循环,衔接等

每一个轮播项采用swiper-item标签来包裹

5. navigator

导航组件,类似于 a 标签

open-type 有效值

这里要注意跳转的规则,有一些不能跳到 tabbar 页面,要注意!

6. rich-text

富文本标签,可以解析成对应标签

<rich-text nodes="{{html}}" bindtap="tap"></rich-text>

数据传递

data: {
    html: "123"
}

在data里新增字段来给富文本添加内容。

可以解析标签,但是我复制不出来,就试不了~~

7. button

配置属性非常多,还是直接看文档吧,文档

按钮演示

按钮的开放功能,可以有一些高操作

<button open-type="getUserInfo">获取用户信息</button>

8. icon

图标标签

<icon type="success" size="40" ></icon>

9. radio

单选标签,可以通过 color 属性来修改颜色

配合radio-group使用,实现单选功能

10. checkbox

复选框,可以通过 color属性来修改颜色,和单选按钮的使用方法差不多

7 回复

总结的很好 顶

支持,复习了一遍基础组件的知识

同小白,感觉看你写的文章可以当做一遍复习,挺高效,概括的很全面

用markdown写的很不错,自己也重新学习了一遍小组件的知识,赞!

WeUI很不错

很棒的总结!又学到不少了!

社区大佬真多 我算是学到了

回到顶部