小程序常见标签组件

2021/6/7 12:20:50

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

常见标签组件

文档地址: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
    })
  }
})


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


扫一扫关注最新编程教程