本文主要是介绍小程序常见标签组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

常见标签组件

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/

view

1. 代替原来的div标签
2. 有许多新增属性

text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能，对应selectable属性，默认为false）
4. 可以对空格 回车进行编码（对应decode属性，默认为false）

image

属性：

1. src 指定要加载的图片路径
   • 图片存在默认宽高宽度320px，高度240px
2. mode 决定图片内容如何和图片标签宽高进行适配
   • 图片标签是一个盒子，图片内容是放入的图片，图片可不占满盒子，根据具体属性值改变
   • scaleToFill：默认值，图片拉伸至填满盒子
   • aspectFit：保持宽高比，长边拉伸与盒子一致，短边自适应
   • aspectFill：保持宽高比，短边与盒子一致，长边自适应
   • widthFix：盒子大小根据图片大小调整
   • top/bottom/left/right：进行图片在盒子中的定位
3. lazy-load 支持懒加载，当图片出现在视口一定高度时，加载出图片

注：image有大小限制，但一般图片都比较大，可以使用图床将本地图片上传网络，通过外链访问，图床链接：https://imgurl.org/

swiper

微信内置轮播图组件，必须与子组件swiper-item搭配使用

<swiper>
	<swiper-item><image src="1.jpg"></image></swiper-item>
  <swiper-item><image src="2.jpg"></image></swiper-item>
  <swiper-item><image src="3.jpg"></image></swiper-item>
</swiper>

swiper标签存在默认样式

• width 100%
• height 150px
• image存在默认宽高为320*240
• swiper高度定死，无法实现由内容撑开

如果想图片与容器契合：

1. 找出原图的宽高（可下载至本地查看）
2. swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度 可得 height：calc（100vw * 原图高度 / 原图宽度）

属性：

1. autoplay：自动轮播，默认false
2. interval：修改轮播时间，默认5000ms
3. circular：循环轮播，默认false
4. indicator-dots：显示指示器（小圆点），默认false
5. indicator-color：指示器未选中时的颜色
6. indicator-active-color：选中时的颜色

WXML中的block元素相当于一个占位符标签，写代码时可以看见该标签存在，但页面渲染时，小程序会将其移除

navigator

导航组件，类似于a标签，是块级元素，默认会换行，可以直接设置宽高

属性：

1. url：要跳转的页面路径
2. target：指定是跳转到当前小程序的页面，还是其他小程序的
   • self：默认值，自己小程序的
   • miniProgram：其他小程序的
3. open-type：跳转的方式
   • navigate：默认值，保留当前页面（可点击返回按钮返回），跳转到应用内某个页面，但不能跳到tabbar页面
   • redirect：关闭当前页面，跳转到应用内某个页面，但不允许跳转到tabbar页面
   • switchTab：跳转到tabbar页面，并关闭其他所有非tabbar页面
   • reLaunch：关闭所有页面，打开到引用内的某个页面
   • navigateBack：关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
   • exit：退出其他小程序，target="miniProgram"时生效

rich-text

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

通过nodes属性来实现

• 接收标签字符串
• 接收对象数组

<rich-text nodes="{{html}}"></rich-text>

Page({
  data: {
    // 标签字符串，常用
    // html: '<h1>biaoti</h1><p>wenben</p><div>hezi</div>',
  	// 对象数组
    html:[{
    	name: "div",//标签名通过name属性来指定
      attrs:{//标签上的属性
        class: "my_div",
        style: "color:red;"
      },
      children:[{//子节点
        name: "p",
        attrs:{},
        children:[{//放文本
          type: "text",
          text: "hello"
        }]
      }]
    }]
  }
})

button

外观属性（也可通过WXSS控制）：

1. size：控制按钮大小
   • default 默认大小
   • mini 小尺寸
2. type：用来控制按钮的颜色
   • default 灰色
   • primary 绿色
   • warn 红色
3. plain：按钮是否镂空，背景色透明
4. loading：前面是否有等待图标

button开放能力—open-type属性：

1. contact：直接打开客服对话功能，需要在微信小程序的后台配置
2. share：转发当前小程序到微信朋友，但不能把小程序分享到朋友圈
3. getPhoneNumber：获取当前用户的手机号码信息，如果不是企业的微信账号，没有权限获取用户的手机号码
   • 绑定一个事件 bindgetphonenumber
   • 在事件的回调函数中，通过参数（事件源）获取信息
   • 获取到的信息是已经加密过的
   • 需要用户自己搭建小程序的后台服务器，在后台服务器中解析手机号码返回小程序，就可以看到信息了
4. getUserInfo：获取当前用户的个人信息
   • 使用方法类似获取用户的手机号码
   • 可以直接获取，不存在加密字段
5. launchApp：在小程序中直接打开App
   • 前提条件是在app中通过链接打开小程序，然后在小程序中再通过这个功能重新打开app
6. openSetting：打开小程序内置的授权页面
   • 授权页面只会出现用户曾经点击过的权限
7. feedback：打开小程序内置的意见反馈页面，需要真机调试

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetphonenumber="getUserInfo">getUserInfo</button>

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

open-type的contact实现流程：

1. 确保小程序的appid为自己的appid（而不是测试号）
2. 登录微信小程序官网，添加客服-微信
3. 为了方便实验，可准备两个账号
   • 普通用户A
   • 客服-微信B
4. 即可开始实验

icon

属性：

1. type：icon类型（必填），有效值：success，success_no_circle，info，warn，waiting，cancel，download，search，clear

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0UkcQxo-1623037889625)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210403213548430.png)]

2. size：icon大小，默认值23

3. color：icon的颜色

radio

单选框，需要搭配radio-group一起使用，可以通过color属性来修改颜色

<!-- value 选中的单选框的值
		需要给radio-group绑定change事件
-->
<radio-group bindchange="handleChange">
	<radio value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>
<view>您选中的是：{{gender}}</view>

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

checkbox

与radio类似

<view>
	<checkbox-group bindchange="handleItemChange">
  	<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id"> 
    	{{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
  	选中的水果：{{checkedList}}
  </view>
</view>

Page({
  data: {
    list: [{
      id:0,
      name: "apple",
      value: "apple"
    },{
      id:1,
      name: "grape",
      value: "grape"
    },{
      id:2,
      name: "banana",
      value: "banana"
    }],
    checkedList: []
  },
  // 复选框的选中事件
  handleItemChange(e){
    console.log(e);
    // 获取被选中的复选框的值
    const checkedList = e.detail.value;
    // 进行赋值
    this.setData({
      checkedList
    })
  }
})

这篇关于小程序常见标签组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！