微信小程序组件的官网地址：
https://developers.weixin.qq.com/miniprogram/dev/component/
一、View
View代替了原来的 div标签
<view hover-class="none">
MW
</view>
二、text
1.文本标签
2.只能嵌套text
3.长按位置可以复制（只有该标签才有这个功能）
4.可以对空格 回车 进行编码
三、image
1.图片标签， image组件的默认宽度320px 高度240px
2.支持懒加载
mode的合法值
这个时候我们需要一个网址 这个网址可以把本地的图片上传到网上 变成网上的资源
https://images.ac.cn/
四、button
按钮
<!--pages/demo10/demo10.wxml-->
<!--
botton 标签
外观的属性
size 控制按钮的大小
default 默认大小
mimi 小尺寸
type 用来控制按钮的颜色
-->
<button>
默认按钮
</button>
<button size="mini">
mini按钮
</button>
<button type="primary">
primary按钮
</button>
<button type="warn">
warn按钮
</button>
<button type="warn" plain="{{true}}">
plain按钮
</button>
<button type="primary" loading="{{true}}">
primary按钮
</button>
<!--
值 说明 最低版本
contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 1.1.0
share 触发用户转发，使用前建议先阅读使用指引 1.2.0
getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0
getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0
launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
openSetting 打开授权设置页 2.0.7
feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
-->
<button open-type="contact">
客服
</button>
<button open-type="share">
转发
</button>
<button open-type="getPhoneNumber">
用户手机号
</button>
<button open-type="getUserInfo">
用户信息
</button>
<button open-type="launchApp">
打开APP
</button>
<button open-type="openSetting">
权限
</button>
<button open-type="feedback">
意见箱
</button>
五、swiper
swiper 主要用于轮播图
<!-- pages/demo07/demo07.wxml -->
<!-- <text>pages/demo07/demo07.wxml</text> -->
<!-- 1 轮播图外层容器swiper
2 每一个轮播项swiper-item
3 swiper标签存在默认样式
1 width 100%
2 height 150px image存在默认宽度和高度320*240
3 swiper高度无法实现由内容撑开
4 先找出来原图的宽度和高度等比例给swiper定宽度和高度
原图的宽度和高度 1125*352 px
swiper宽度/swiper高度=原图的宽度/原图的高度
swiper高度=swiper宽度*原图的高度/原图的宽度
height：100vw*352/1125 -->
<swiper autoplay interval="1000" circular indicator-dots>
<swiper-item>
<image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg" />
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/tfs/TB1TlyjF4v1gK0jSZFFXXb0sXXa-1130-500.jpg_q100.jpg_.webp" />
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/tps/i4/TB17BCWCWL7gK0jSZFBSutZZpXa.jpg" />
</swiper-item>
<swiper-item>
<image mode="widthFix" src="//img.alicdn.com/imgextra/i3/89/O1CN01cyED001CWnqkua1aF_!!89-0-luban.jpg_q100.jpg_.webp" />
</swiper-item>
</swiper>
六、navigator
导航组件 类似超链接
<!--pages/demo08/demo08.wxml-->
<!-- sample.wxml -->
<!--
导航组件 navigator
0 块级元素默认会换行可以直接加宽度和高度
1 ur1要跳转的页面路径绝对路径相对路径
2 target 要跳转到当前的小程序还是其他的小程序的页面
self默认值自己小程序的页面
miniProgram其他的小程序的页面
3 open-type跳转的方式
1navigate默认值保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
2redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。
3switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面
4reLaunch 关闭所有页面，打开到应用内的某个页面
-->
<navigator url="/pages/demo07/demo07" >
轮播图页面
</navigator>
<navigator open-type="switchTab" url="/pages/index/index" >
switchTab直接跳转到tabbar页面
</navigator>
七、rich-text
富文本标签
八、ircon
图标标签
<!--pages/demo11/demo11.wxml-->
<icon type="success" size="50">
</icon>
<icon type="success_no_circle">
</icon>
<icon type="success_no_circle" color="red">
</icon>
<icon type="info">
</icon>
<icon type="warn">
</icon>
<icon type="waiting">
</icon>
<icon type="cancel">
</icon>
<icon type="download">
</icon>
<icon type="search">
</icon>
<icon type="clear">
</icon>
九、radio
单选标签
<radio-group bindchange="handleChange">
<radio value="man" color="red">
男
</radio>
<radio value="woman">
女
</radio>
</radio-group>
<view>
你选中的是：{{gender}}
</view>
十、checkbox
复选框
<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id" >
{{item.name}}
</checkbox>
</checkbox-group>
<view>
选中的值：{{checkedList}}
</view>
</view>
```bash
// pages/demo14/demo14.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{
id:0,
name:"苹果",
value:"apple"
},
{
id:1,
name:"香蕉",
value:"banana"
},
{
id:2,
name:"葡萄",
value:"grape"
},
],
checkedList:[]
},
handleItemChange(e){
//获取被选中的复选框的值
const checkedList=e.detail.value;
//进行赋值
this.setData({
checkedList
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
