1.组件的定义

组件就是指微信定义的具有特殊功能的标签，在wxml中只能使用微信定义的标签。

2.常用组件

  <view>：用于页面布局的块级组件，类似于html中的div标签，默认不具有任何样式，独占一行<text>：用于页面布局的行级组件，类似于html中的span，默认不具有任何样式，不会独占一行<scroll-view>：可滚动的块级组件<swiper>：实现轮播的块级组件，其中只能放置swiper-item组件，否则会出现未定义的异常<icon>：图标<rich-text>：富文本<表单组件>：表单<navigator>：导航，类似于html中的标签<a><image>：图片<map>：地图

3.引入外部字体图标库

• 登录 iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn
• 找到需要的图标加入购物车 -> 添加至项目（无项目自己创建）-> 选择 Font-class -> 查看在线链接 -> 点击链接可以查看到代码
  
• 复制代码，并在小程序中创建一个 wcss文件，将代码粘贴至文件中
• 直接引用里面的图标

4.组件样式

WXSS（WeiXin Style Sheets）是微信定义的一套样式语言，用于描述WXML的组件样式，具有CSS大部份特性，同时对CSS进行了扩充的修改。
相同特性如：选择器与CSS相同，都有以下几种：

• 标签选择器：view{}
• 类选择器：.myView{}
• id选择器：#id{}
• 行级样式：在组件内属性直接写style属性
• 外部样式

扩展特性主要有以下两点：

• 尺寸单位：新增了rpx单位，能自适应不同分辨率的手机，px是传统意义上的像素值，不能很好的适应不同分辨率的手机。
• 样式导入：@import “外部样式文件”

全局样式与局部样式：定义在app.wxss中的样式为全局样式，作用于每一个页面。在页面的wxss文件中定义的样式为局部样式，仅作用于当前页面。全局样式与局部样式冲突时使用局部样式。

5.示例代码

WXML示例代码：

<!-- 两对大括号{{}}称为插值表达式，用来进行数据的展示 -->
<!-- <text style="height:2000rpx;display:block;background:#ccc">{{ msg }}</text> -->
<!--view和text
-->
<view class="hi" id="world" style="text-decoration:underline">块级标签</view>aaa
ccc
<text user-select="true">行级标签</text>bbb<!-- wxss的扩展 -->
<view class="myView">wxss扩展特征</view><!-- scroll-view1.必须要设置固定的高度或宽度2.内部元素必须超出高度或宽度3.必须定义滚动方向
-->
<scroll-view scroll-y="true" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower"><view>view1</view><view>view2</view><view>view3</view>
</scroll-view><!--swiper 只可放置swiper-item组件
-->
<swiper autoplay="true" indicator-dots="true" indicator-color="#fff"><swiper-item>view1</swiper-item><swiper-item>view2</swiper-item><swiper-item>view3</swiper-item>
</swiper><!--icon 显示内置图标
-->
<view class="myicon"><icon type="success" size="40" color="red"></icon><icon type="info"></icon><icon type="download"></icon><!--  引入外部的字体图标库 --><text class="iconfont icon-cart"></text><text class="iconfont icon-cart1"></text>
</view><!--rich-text 展示富文本代码
-->
<view class="myrichtext"><rich-text nodes="<h2 style='text-align:center;color:blue;'>abcd</h2>"></rich-text><rich-text nodes="{{ content }}"></rich-text>
</view><!--表单组件
-->
<form class="myfrom" bindsubmit="duSUbmit"><input name="username" placeholder="用户名称"></input><input name="pwd" password></input><radio-group name="sex" bindchange="chgSex"><radio checked="true" value="man">男</radio><radio value="gril">女</radio></radio-group><checkbox-group name="like" bindchange="chglike"><checkbox value="ps">爬山</checkbox><checkbox value="yy">游泳</checkbox><checkbox value="dlq">打蓝球</checkbox></checkbox-group><view><picker mode="date" value="{{ date }}" bindchange="binddatechg">选择日期</picker><text> {{date}} </text><picker mode="region" bindchange="bindRegion">选择地址：{{ region }}</picker><picker mode="selector" range="{{ countrys }}" bindchange="bindCountry">选择国家：{{ countrys[index] }}</picker></view><view><switch checked="true" name="open" bindchange="bindOpen"></switch></view><view><button form-type="submit" size="mini" type="primary">提交</button><button type="primary" bindtap="doButton" size="mini">普通按钮</button></view>
</form><!--导航组件1.默认只能跳转到非tabBar页面2.如果要跳转到tabBar页面，需要指定open-type为switchTab
-->
<navigator url="/pages/logs/logs">跳转到logs</navigator>
<navigator url="/pages/index/index" open-type="switchTab">跳转到index</navigator>
<!--  重定向时，当前页面会被卸载 -->
<navigator url="/pages/logs/logs" open-type="redirect">重定向到logs</navigator><!--image1.自带宽度和高度，默认width:320px,height:240px
-->
<view class="myimage"><image src="/images/我的1.png"></image><image src="https://p1.itc.cn/q_70/images03/20240101/5d01d5da227a4a2c90c1662146af625b.jpeg"></image><image src="/images/我的1.png" mode="scaleToFill"></image><image src="/images/我的1.png" mode="aspectFit"></image><image src="/images/我的1.png" mode="aspectFill"></image><image src="/images/我的1.png" mode="widthFix"></image><image src="/images/我的1.png" mode="heightFix"></image><image src="/images/我的1.png" mode="top"></image><image src="/images/我的1.png" mode="top right"></image><image src="/images/我的1.png" mode="top left"></image>
</view><!--map
-->
<map longitude="118" latitude="32"></map>

WXSS示例代码：

.myView,scroll-view,swiper,.myicon,.myrichtext,myfrom,navigator,myimage {margin-bottom: 30rpx;
}/*wxss中选择器与css相同标签选择器、类选择器、id选择器、行级样式、外部样式等
*/
view {color:red
}
.hi {background: #ccc;
}
#world {font-weight: bold;
}
/*wxss特征1.尺寸单位2.样式导入3.全局样式与局部样式4.不能指定本地图片，无法加载本地资源
*/
.myView {font-size: 40rpx;height: 400rpx;background: #ccc;background-image: url(https://bkimg.cdn.bcebos.com/pic/cefc1e178a82b9014a90e40fabc7be773912b31b41fe);background-size: 100%;
}
@import "../../styles/common.wxss";text {color: blue;
}scroll-view {height: 300rpx;border: 1px solid #f00;
}
scroll-view view {height: 200rpx;background: white;border: 1px solid white;
}swiper {height: 200rpx;color: white;
}
swiper swiper-item:first-child {background-color: red;
}
swiper swiper-item:nth-child(2) {background-color: blue;
}
swiper swiper-item:last-child {background-color: green;
}/* 引入图标字体库 */
@import "../../styles/iconfont.wxss";
.myicon text {font-size: 60rpx;color: green;
}.myfrom input {background-color: #ccc;height: 50rpx;width: 400rpx;border: 1px solid #f00;margin: 0 auto;
}.myimage image {width:150px;height:150px;border: 1px solid #f00;margin-right: 3px;
}

JS示例代码：

//获取小程序App实例
const app = getApp();
console.log(app);
console.log(app.user.name);
app.show();Page({// 页面初始数据，称为数据仓库datadata:{msg:'hello',arr:[1,2,3,4],user:{id:1001,name:'dog'},content:'<div><img src="../../images/我的1.png"></img></div>',date:'2000-09-01',countrys:['中国','日本','美国','英国']},/*** 生命周期回调函数-监听页面加载* 1.该函数只执行一次* 2.已加载的页面会被缓存，不会重复加载，提高性能*/onLoad:function(options){ // 参数options中包含了跳转到当前页面时，所携带的参数信息console.log('关于页面加载......',options)},/*** 生命周期回调函数-监听页面初次渲染完成* 该函数只执行一次*/onReady:function(){console.log('关于页面初次渲染完成.....')},/*** 生命周期回调函数-监听页面显示* 该函数可以多次执行，第一次执行时早于onReady*/onShow:function(){console.log('关于页面显示......')},/*** 生命周期回调函数-监听页面隐藏* 该函数可以多次执行*/onHide:function(){console.log('关于页面隐藏......')},/*** 生命周期回调函数-监听页面卸载*/onUnload:function(){console.log('关于页面卸载......')},/*** 监听用户下拉刷新事件*/onPullDownRefresh:function(){console.log('关于页面执行下拉刷新......')},/*** 监听用户上拉触底事件*/onReachBottom:function(){console.log('关于页面上拉触底事件发生......')},/*** 监听用户点击右上脚的转发* 只有监听了该事件后，点击右上脚的转发才能分享* 转发的标题、显示的图片和转发的具体页面都可以指定*/onShareAppMessage:function(options){console.log('关于页面执行了转发......',options);return {title:'分享标题',path:'/pages/about/about',imageUrl:'../../images/主页2.png'}},/*** 监听当前页面对应的tab点击操作*/onTabItemTap:function(item){console.log('关于页面的tab被点击了......',item)// this代表当前页面实例console.log(this);// 获取自定义的数据和方法console.log(this.user.name);this.show();// 获取数据仓库data中的数据console.log(this.data.msg);// 修改数据仓库data中的数据，使用this.data的方式修改是不会重新渲染页面的，即页面不会同步更新，会造成数据不一致// 应使用 this.setData 修改就会同步渲染页面，使数据同步，// this.data.msg = '您好'this.setData({msg:'您好', // 如果已存在，则修改info:'信息' // 如果不存在，则新增});},/*** 其他：自定义的变量和函数*/user:{name:'leo',sex:'男'},show(){console.log('执行了关于页面的show方法......')},scrolltoupper(e){ // 事件对象console.log('滚动到顶部',e);},scrolltolower(e){console.log('滚动到底部',e)},chgSex(e){console.log(e.detail.value) // 获取选中radio的值},chglike(e){console.log(e.detail.value) // 获取选中checkbox值},binddatechg(e){this.setData({date:e.detail.value})},bindRegion(e){this.setData({region:e.detail.value})},bindCountry(e){this.setData({index:e.detail.value})},bindOpen(e){console.log(e.detail.value)},duSUbmit(e){console.log(e.detail.value)},doButton(e){console.log('单击普通按钮')}
})