小程序常用组件

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-view
    1.必须要设置固定的高度或宽度
    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>

<!--
  image
    1.自带宽度和高度，默认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({
  // 页面初始数据，称为数据仓库data
  data:{
    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('单击普通按钮')
  }
})