常用小程序组件
1、组件介绍
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。
2、swiper组件
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
案例：使用swiper展示轮播图
逻辑层定义数据
data: { background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2", "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d", "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431" ] },
图片采用image组件进行展示，其支持对图片进行缩放、裁剪处理。关于image组件的信息，可以访问文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
实际在wxml中展示
<view> <swiper indicator-dots indicator-color="rgba(52, 155, 252,1)" autoplay> <swiper-item wx:for="{{background}}" wx:key="index"> <image src="{{item}}" style="width: 100%; height: 100%;"></image> </swiper-item> </swiper> </view>
在设计图片的时候，一定要和设计人员对接好图片的合适尺寸比例。
3、表单组件
小程序项目中但凡是涉及到表单的地方，都需要使用表单组件。表单组件的作用就是用于组成表单的。
注意点：
- 这里面表单组件部分的标签继续沿用html的标签，与之前完全同名
- 组件标签的部分属性也与之前html属性一致，但是更多的是不一致的
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
<!-- 表单 --> <!-- 移动端登录表单 --> <view class="login_form"> <image src="/assets/icon/home-seleted.png"/> <input type="text" placeholder="用户名"/> <input type="password" placeholder="密码"/> <button type="primary">登录</button> <view class="login_button" hover-class="active"> view登录 </view> </view>
wxss
/* pages/list/list.wxss */ input{ border-bottom:1px solid gray; height: 120rpx; width: 600rpx; } .login_form{ width: 750rpx; display: flex; flex-direction: column; align-items: center; } button{ margin-top: 30rpx; } image{ width: 120rpx; height: 120rpx; } .login_button{ margin-top: 30rpx; background-color: cadetblue; color: white; width: 430rpx; height: 100rpx; border-radius: 10rpx; text-align: center; line-height: 100rpx; font-weight: bold; } .active{ /* 透明度 */ opacity: 0.7; }
按钮button组件有一个非常实用的属性open-type，后续可以通过该属性赋予按钮高级的功能（微信开放能力），例如：
- 获取用户信息的时候
- 唤起其他App的时候
- 不是任意app都可以唤起，只能唤起来源app
- 获取用户手机号
- …
<!-- button open-type属性的多种功能 --> <button type="default" open-type="chooseAvatar" bindchooseavatar="getAvatar">测试按钮</button>
