微信小程序基础组件

官网的组件很多,为了方便学习整理了常用的几个组件

常见组件

view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox等

view容器

用来代替 html 中的 div 标签
属性：

属性	功能
hover-class	手指点击的动态样式
hover-stop-propagation	是否阻止父节点冒泡
hover-start-time	手指按住多少时间出现响应
hover-stay-time	手指离开多久出现响应

多用来处理样式细节

text文本

1. 文本标签
2. 只能嵌套text ， 在text里面只能嵌套text自己
3. 长安文字可以复制（只有text组件有这个功能）
4. 可以对空格、大于号、小于号、 回车等 进行 编码 。decode可以解析的有   < > & '    

属性名	类型	默认值	说明
selectable	Boolean	false	⽂本是否可选
decode	Boolean	false	是否解码

属性:

1. 长按文字复制: selectable
2. 对文本内容进行解码 : decode

<text selectable>text</text>
<view>---</view>

<text decode>带有解码 &nbsp;</text>
<view>---</view>

<text >没有解码 &nbsp;</text>

效果:

image图片

小程序在后期打包上线有大小要求，腾讯规定程序打包上线的大小不能超过2M，所以很多静态资源要放到网络上
一张图片的大小就要几M，所以建议要使用图片的时候统一使用外网的图片
图片标签存在默认宽高，默认宽度320px，高度240px

1. 图片统一使用外网图片
2. image组件默认宽度320px，高度240px
3. 支持懒加载

先准备一个网络图片，这里推荐使用薄荷图床
薄荷图床

在src属性中填写链接

<image src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>

设置wxss样式
设置mode属性

属性	作用
scaleToFill	不保持纵横比，使图片完全填满image组件空间
aspectFit	保持纵横比，完全显示图片长边
aspectFilt	保持纵横比，完全显示图片短边
widthFix	保持纵横比，指定宽度，高度自适应

<!-- mode属性 -->
<image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>

懒加载
小程序的图片组件 直接支持懒加载
要使用懒加载的时候，加上属性lazy-load就可以

懒加载判断机制：当图片出现在屏幕中的上下 三屏的高度之内的时候， 程序就会自己加载图片
懒加载的原理及实现

<!-- 懒加载 -->
<image lazy-load="" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>

swiper轮播图

swiper是微信内置的轮播图组件
怕不能单独使用,要搭配swiper-item 来使用

1. 轮播图的外层容器 swiper
2. 每一个轮播项 swiper-item
3. swiper标签存在默认样式
   1. width : 100%
   2. height : 150px
   3. image图片本身也存在默认宽高 320 \ 240
   4. swiper的高度无法由内容撑开
4. 手动算一下swiper的高度,先找出来原图的高度个宽度,然后等比例的给 swiper计算 宽度和高度
   比如: 原图的 宽度和高度 1125 * 352 px
   swiper 宽度 / swiper 高度 = 原图 宽度 / 原图 高度
   750rpx / swiper 高度 = 1125 / 352
   height : 750rpx * 352 / 1125

wxml

<swiper>
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
</swiper>

wxss

swiper{
  width: 100%;
  /* height: calc(750rpx * 352 / 1125); */
  height: 31.28vw;
}

image{
  width: 100%;
}

按照以上步骤, 能实现轮播图大小随着不同屏幕窗口的大小而改变

轮播图属性

1. autoplay 自动轮播 默认true
2. interval 自动轮播的时间间隔
3. circular 是否衔接轮播 默认true
4. indicator-dots 是否开启轮播按钮
5. indicator-color 轮播按钮未被选中颜色
6. indicator-active-color 轮播按钮被选中的颜色

<swiper autoplay interval="1000" circular indicator-dots indicator-color="red" indicator-active-color="#0094ff">   
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
  </swiper-item>
</swiper>

效果图

navigator导航

导航组件 类似超链接标签

属性名	默认值	功能
target	self	在哪个目标发生跳转
url		跳转链接
open-type	navigate	跳转方式

导航组件

1. 导航组件navigator 是块级元素, 默认会换行 , 可以直接加宽度和高度
2. url 要跳转的页面路径 绝对路径/相对路径 都可以
3. target 要跳转道当前的小程序,还是其他的小程序页面
   self 默认值 自己的小程序页面
   miniProgram 其他的小程序页面
4. open-type 跳转的方式
   1. navigate 默认值 左上角有返回按钮 保留当前页面,跳转到程序内的某个页面,但是不能跳转到tabbar页面
   2. redirect 左上角没有返回按钮,有回到首页按钮, 关闭当前页面,跳转到程序内的某个页面,但是不能跳转到tabbar页面
   3. switchTab 跳转到tabBar页面 , 并关闭其他所有非tabBar页面
   4. reLaunch 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯

 <navigator url="/pages/demo5/demo5">轮播图页面</navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">轮播图页面</navigator>

rich-text富文本

rich-text : 富文本标签
可以将字符串解析成对应标签，类似vue中 v-html 功能

1. nodes 功能

   1. 接收标签字符串
   2. 接收对象数组

2. nodes 属性

   1. name 标签名
   2. attrs 标签属 性
   3. children 子节点列表
   4. text 文本

看下方源码，使用对象数组实现标签比较麻烦，所以一般使用标签字符串比较多

wxml

<!-- 接收标签字符串 -->
<rich-text nodes="{{html}}"></rich-text> 

<!-- 接收对象数组 -->
<rich-text nodes="{{html1}}"></rich-text

js

// pages/demo7/demo7.js
Page({
  data: {
    //标签字符串
    html:'<div class="header-bd"><a class="placeholder"><span class="text iconfont icon-search">寻找宝贝店铺</span></a></div>',
  
    //对象数组
    html1:[
      {
        //设置标签 div
        name:"div",
        //设置 div 的标签属性
        attrs:{
          class:"my_div",
          style:"color:red;"
        },
        //为 div 标签设置子节点 p
        children:[
          {
            //子节点 p 标签
            name:"p",
            //p 标签的属性
            attrs:{},
            //为 p 设置 子节点 text
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]
  }
})

可以去官方文档查看支持的标签

button按钮

样式属性

button属性

1. size 按钮大小
   default 默认值
   mini ⼩尺⼨
2. type 按钮内文字样式
   default 灰色
   primary 绿色
   warn 红色
3. plain 按钮是否镂空，完全透明透明
4. disabled 是否禁⽤
5. loading 在前面有个加载状态的圈圈

<button>默认按钮</button>
<button size="mini">mini 小尺寸按钮</button>
<button type="primary">绿色样式</button>
<button type="warn">红色</button>
<button type="warn" plain>镂空</button>
<button type="warn" loading>加载</button>

效果图

open-type 的值

1. contact 打开客服会话功能，需要在小程序后台配置
   如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，
   可以从 bindcontact 回调中获得具体信息
2. share 转发当前小程序给 微信朋友
3. getPhoneNumber 获取⽤⼾⼿机号
   1. 绑定一个事件 bindgetphonenumber
   2. 在事件的回调函数中 通过参数获取信息
   3. 获取到的信息是加密过得信息
      需要用户自己搭建的小程序服务后台, 在后台服务器中进行解析 获取手 机号码
4. getUserInfo 获取当前用户的个人信息
   1. 绑定一个事件 bindgetuserinfo
   2. 在事件的回调函数中 通过参数获取信息
   3. 可以直接读取, 不存在加密字段
5. launchApp 在小程序当中 直接打开app
   1. 需要先在 app 中 通过app的某个链接 打开小程序
   2. 然后在小程序中 再通过这个功能 重新打开app 类似 拼多多砍价
      可以通过app-parameter属性设定向APP传的参数
6. openSetting 打开小程序 内置的授权页面
   1.授权页面中只会出现 用户曾经点击过得 权限
7. feedback 打开小程序内置的 意见反馈页面
   ⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

wxml

<button open-type="contact">contact 客服会话</button>
<button open-type="share">share 转发</button>
<!-- 绑定事件 bindgetphonenumber -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber 获取手机号</button>
<!-- 绑定事件 bindgetuserinfo-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo 获取用户信息</button>
<button open-type="launchApp">launchApp 打开app</button>
<button open-type="openSetting">openSetting 打开授权页</button>
<button open-type="feedback">feedback 意见反馈</button>

js

Page({
  //获取用户手机号码信息
  getPhoneNumber(e){
    console.log(e);
  },
  //获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})

contact 联系客服功能实现

1. 将小程序的测试号改为自己的appid
2. 登录微信公众平台, 添加客服
3. 客服消息使用指南

icon字体图标

icon 字体图标组件
组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性

1. type 类型
   取值: success, success_no_circle, info, warn, waiting, cancel,download, search, clear
2. size 大小
3. color 颜色

<icon type="success" size="23" color="red"></icon>

radio单选框

Radio单选框

1. 同一组 radio 标签 必须和 父元素 radio-group 一起使用
2. value 选中的单选框的值
3. 需要给radio-group标签绑定change事件
4. 需要显示选中的值
5. 为radio 标签加上 color 属性 改变颜色

wxml

<radio-group bindchange="habdleChange">
  <radio color="red" value="male">男</radio>
  <radio  value="female">女</radio>
</radio-group>

<view>您选中的是: {{gender}}</view>

js

Page({
  data: {
    gender:""
  },
  habdleChange(e){
    console.log(e);
    //获取单选框的值
    let gender = e.detail.value;
    //把值 赋给 data 中的数据
    this.setData({
      gender:gender
    })
  }
})

效果图:

checkbox复选框

checkbox

1. 同一组 checkbox 需要搭配 checkbox-group 来一起使用
2. 在设置 data数值 , wx:for循环输出data , 设置key 和 value
3. 绑定事件函数 , 获取选中的复选框的 value 值,
4. 新建data对象, 赋值给新data对象
5. 显示出选中的 value值
6. value : 复选框的值
7. disabled : 是否禁用
8. checked : 是否默认选中
9. color : 复选框的 √ 的颜色

wxml

<view>
  <checkbox-group bindchange="handleItemChange">
    <!-- 循环输出data -->
    <checkbox color="red" checked="true" wx:for="{{list}}" wx:key="id" value="{{item.value}}">
    {{item.name}}
    </checkbox>
  </checkbox-group>
</view>

<view>
  选中的水果: {{checkedList}}
</view>

js

Page({
  data: {
    list:[
      {
      id:0,
      name:"苹果",
      value:"Apple"
    },
    {
      id:1,
      name:"葡萄",
      value:"grape"
    },
    {
      id:2,
      name:"香蕉",
      value:"bananer"
    }
  ],
  checkedList:[]
  },
  //复选框的选中时间
  handleItemChange(e){
    console.log(e);
    //获取被选中的复选框的值
    const checkedList = e.detail.value;
    //进行赋值
    this.setData({
      checkedList
    })
  }
})

效果图: