微信小程序(五)-常见组件(标签)

本文转载自查看原文 2021-01-12 14:24 411

常见组件(标签)

https://developers.weixin.qq.com/miniprogram/dev/component/

1.view 代替以前的div标签

2.text

　　1.文本标签,类似span标签

　　2.只能㠌套自已text

　　3.长按文字可以复制(只有该标签有这个功能) <text selectable>加了就可以复制了<text/>

　　4.可以对空格回车进行编码<text decode>加了空格就可以显示了<text/>,decode可以解析的有   < > & ' &ensp; &emsp;

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
space	string		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

3.image

图片图床:就是一个在网络上存储图片的地方

路过图床:https://imgchr.com/

SM.MS图床:https://sm.ms/

如果打算长期稳定使用请优先选择七牛云或者又拍云（存储在国内都需要有已备案域名），其次推荐的就是路过图床和SM.MS图床.

　　1.src 图片用外网地址

　　2.图片大小默认宽320px*高240px

　　3.mode 图片裁剪、缩放的模式,决定图片内容和图片标签宽高做适配

　　4.lazy-load 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

<image mode="heightFix" src="https://s3.ax1x.com/2021/01/12/sJ64Wd.jpg"/>

4.轮播图

　　1.swiper 轮播图的外层容器

1.默认宽width100% 高height=150px

2.无法实现由图片内容撑开,需换算图片的高度

　　 3.autoplay 自动轮播

　　 4.interval="1000" 轮播间隔时间

　　 5.circular 轮播衔接滑动

　　 6.indicator-dots 是否显示面板指示点(索引器/分页器/指示器)

　　 7.indicator-active-color="red" 显示指圆点选中的颜色

　　 8.indicator-color="#0094ff" 显示指圆点未选的颜色

　　2.swiper-item 轮播图的轮播项

<swiper autoplay  circular interval="1000" indicator-dots indicator-active-color="red" indicator-color="#0094ff">
  <swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
  <swiper-item><image src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/></swiper-item>
  <swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
</swiper>

wxml

5.navigator

　　1.导航标签相当于a标签

　　2.url 跳转路径(相对路径或绝对路径)

　　3.open-type="switchTab" 跳转方式

open-type 的合法值

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能,默认值,保留当前页面(有返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面
redirect	对应 wx.redirectTo 的功能,关闭当前页面(无返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面
switchTab	对应 wx.switchTab 的功能,跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	对应 wx.reLaunch 的功能,关闭所有页面，打开到应用内的某个页面,随便哪个页面都可跳(包括tabBar )	1.1.0
navigateBack	对应 wx.navigateBack 的功能,关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。	1.1.0
exit	退出小程序，`target="miniProgram"`时生效	2.1.0

6.rich-text

　　1.富文本标签,相当于vue中的v-html

　　2.nodes属性来实现

　　 1.接收标签字符串(常用)<rich-text nodes="<h1>小区平台<h1>"></rich-text>

　　 2.接收对象数组

7.button

　　 1.按钮标签外观属性size type

　　2.开发能力属性 open-type

　　　1.contact 客户开发流程

　　　　1.要将测试号appid改为自已的appid

　　　　 2.去官网注册获取自已的appid(如果微信绑字用了自已的邮箱,可以先到微信设置/账号与安全/更多安全设置/邮件地址下解除绑定)

　　　　 3.登录进入开发/开发管理/开发设置/复制开发者appID

　　　　 4.修改微信小程序开发编辑器中的appid (这个要保密)

　　　　 5.在小程序后台的功能找到客服===>添加一个客户的微信号(自已用的就可以了)　　

　　　2.share 转发

　　 3.getPhoneNumber 获取用户手机号

　　 4.getUserInfo 获取用户信息

　　 5.feedback 打开“意见反馈”页面

8.icon

　　1.字体图标

　　2.属性

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

9.单选框标签使用　　

　 1.radio 单选框

　 2.radio-group 单项选择器

　 3.两个标签配合使用

　 4.案例: 单选框男和女

　　 1.radio标签与父元素单项选择器radio-group来使用

　　 2.value选中的单选框的值

　　 3.给单项选择器radio-group绑定change事件(关键字: bindchange="事件名称")

　　 4.需要在页面中显不选中的值

　　 5.代码:

<radio-group bindchange="handlechange">
  <radio color="red" value="m">男</radio>
  <radio value="f">女</radio>
</radio-group>
<view>显示选中的值:{{gender}}</view>

wxml

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handlechange(e){
    // 1.获取单选框中的值
    let gender=e.detail.value
    // 2.把值赋给data中的gender
    this.setData({
      gender
    })
  }
})

10.单选框标签使用　　

　 1.checkbox 多选框

　 2.checkbox-group 多项选择器

　 3.两个标签配合使用

　 4.案例代码:

<view>
  <checkbox-group bindchange="handitemchange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
  </checkbox-group>
</view>
<view>选中的值:{{checkedlist}}</view>

wxml

Page({
  data: {
    list:[
    {
      id:0,
      name:"苹课",
      value:"apple"
    },
    {
      id:1,
      name:"香蕉",
      value:"bananer"
    },
    {
      id:2,
      name:"葡萄",
      value:"grage"
    }
  ],
  // 3.定义一个数组存放选中的值
  checkedlist:[]
  },
  // 多选柜的选中事件
  handitemchange(e){
  // 1.获取选中的值
  const checkedlist=e.detail.value
  // 2.进行赋值
  this.setData({
    checkedlist
  })
  }
})