一、视图容器组件

1、常见的视图容器组件

（1）、view

普通视图区域
类似于 HTML 中的 div ，是一个块级元素
常用来实现页面的布局效果

（2）、scroll-view

可滚动的视图区域
常用来实现滚动列表效果

（3）、swiper 和 swiper-item

轮播图容器组件和轮播图 item 组件

2、view 组件的基本使用

3、scroll-view 组件的基本使用

4、swiper 和 swiper-item 组件的基本使用

indicator-dots 属性：显示面板指示点
indicator-color 属性：指示点颜色
autoplay 属性：是否自动切换(默认五秒切换)
interval 属性：切换时间间隔（5000=5秒）
circular 属性：是否采用衔接滑动（最后一张滑至第一张，循环）

注意：swiper-item:nth-child(1) .item{......}注意m:n没有空格，.item小点前面有空格

二、基础内容组件---- text 和 rich-text 组件

1、通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：<text selectable>文本</text>

2、通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：

<rich-text nodes=<"h1 style='color: red;'>标题</h1>"></rich-text>（nodes 类似页面中的详情，点击跳转到详情页面。）

三、其他常用组件

1、button--按钮组件

通过 open-typen 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等等）

button属性汇总：

通过 type 指定按钮类型：default（默认）、primary（主色调）、warn（警告）
size 属性：default（默认大小）、mini（小尺寸）
plain 属性：镂空按钮

2、image--图片组件

image 组件默认宽度约 300px，高度约240px
<image scr="图片路径"></image>
scaleTofill (默认值)属性：缩放模式，不保存纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit 属性：缩放模式，保持纵横比缩放图片，使图片的长边完全显示出来。即可以将图片完整显示出来
aspectFill 属性：缩放模式，保持纵横比缩放图片，只能保证图片的短边能完全显示出来。
widthFix 属性：缩放模式，宽度不变，显示的图片（相框）高度自动变化，保持原图宽高比不变，即可以将图片完整显示出来
heightFix 属性：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变，即可以将图片完整显示出来

3、navigator--页面导航组件

这部分内容，在后续的学习中会用到，后续在详细讲述。

微信小程序开发的的基本组件相关推荐

微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序开发中调用button组件添加微信客服功能
个人比较喜欢这个解决方案,原因一是由腾讯官方运营,比较稳定.二是确实很方便啊,直接用微信回复就好了.核心代码就一行,如下 <button open-type="contact" ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...
微信小程序开发实例：猜成语游戏
文章目录一.案例描述二.设计思路 1.页面设计思路 2.逻辑层设计思路三.关键技术 1.用户选择内容实时显示在前端 2.setData给循环数组赋值 3.点击按钮删除用户当前选择 4.播放音乐 ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...

微信小程序开发的的基本组件