微信小程序学习笔记五 常见组件

1. 常见组件

• 重点讲解小程序中常用的布局组件
  

1.1 view

代替 原来的div标签

<!-- pages/index/index.wxml -->
<view hover-class="h-class">
    点击我试试
</view>

/* pages/index/index.wxss */
.h-class{
  color: green;
}

---

1.2 text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制 (只有该标签有这个功能)
4. 可以对空格 回车 进行编码

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

  <!-- text 标签测试 -->
  <text selectable="false" decode="false">
    普&nbsp;通
  </text>

---

1.3 image

1. 图片标签, image组件默认宽度320px、高度240px
2. 支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode有效值:

• model 有13种模式,其中4种是缩放模式, 9种是裁剪模式

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片, 使图片的宽高完全拉伸至填满image元素
缩放	aspectFit	保持纵横比缩放图片, 使图片的长边能完全显示出来
缩放	aspectFill	保持纵横比缩放图片, 只保证图片的短边能完全显示出来
缩放	widthFix	宽度不变, 高度自动变化, 保持原图宽高比不变
裁剪	top	不缩放图片, 只显示图片的顶部区域
裁剪	bottom	不缩放图片, 只显示图片的底部区域
裁剪	center	不缩放图片, 只显示图片的中间区域
裁剪	left	不缩放图片, 只显示图片的左边区域
裁剪	right	不缩放图片, 只显示图片的右边区域
裁剪	top left	不缩放图片, 只显示图片的左上边区域
裁剪	top right	不缩放图片, 只显示图片的右上边区域
裁剪	bottom left	不缩放图片, 只显示图片的左下边区域
裁剪	bottom right	不缩放图片, 只显示图片的右下边区域

---

1.4 swiper

微信内置轮播图组件

• swiper : 块视图容器。
• swiper-item: 滑块, 默认宽度和⾼度都是100%

• 默认宽度 100% 高度150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgb(0,0,0,.3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否循环轮播

<!-- 
"pages/SwiperText/SwiperText.wxml",
1. 轮播图的外层容器: swiper
2. 每一个轮播项: swiper-item
3. swiper存在默认样式 
    - width: 100%
    - height: 150px image 存在默认宽度和高度 320 * 240
4. swiper 高度无法实现由内容撑开
5. 先找出来原图的高度和宽度, 等比例给swiper定宽度和高度
    - 原图的宽高880 * 388
    - swiper宽度 / swiper 高度 = 原图宽度 / 原图高度
    - swiper高度  = swiper 宽度 * 原图的高度 / 原图的宽度
      height : calc(100vw * 338 / 880)

 -->
<swiper indicator-dots="true" autoplay>
  <swiper-item>
    <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/5ef9aa23c480cf40998be6f0897bcad4ad8e8e3f.jpg@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/c7c308997d904ec7770062fb0e2062dfeaf54f89.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/5f60c09eb96f604bc4fc8ea78ef5b3be6ef67963.png@880w_388h_1c_95q">
    </image>
  </swiper-item>
</swiper>

/* pages/SwiperText.wxss */
swiper{
  width: 100%;
  height : calc(100vw * 338 / 880)
}
image{
  width: 100%;
}

1.5 navigator

导航组件 类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转, 默认当前小程序, 可选值 self/miniProgram
url	String		当前小程序内的跳转连接
open-type	String	navigate	跳转方式

• open-type 有效值:

值	说明
navigate	保留当前页面, 跳转到应用内的某个页面, 但是不能跳到 tabbar 页面
redirect	关闭当前页面, 跳转到应用内的某个页面, 但是不允许跳转到 tabbar 页面
switchTab	跳转到tabBar页面, 并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面, 打开到应用内的某个页面
navigateBack	关闭当前页面, 返回上一页面或多级页面, 可通过 getCurrentPages() 获取当前的页面栈, 决定需要返回几层
exit	退出小程序, target="miniProgram"时生效

<!--pages/navigatorText/navigatorText.wxml-->
<!-- 
  导航组件: navigator
  0 相当于一个块级元素, 默认会换行 可以直接加宽高
  1. url: 要跳转的页面路径 绝对路径|相对路径
  2. target: 要跳转到当前小程序页面 还是其他的小程序页面
        self: 默认值 自己
        miniProgram: 其他的小程序页面
  3. open-type: 跳转的方式
 -->
<view>
  <navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>
  <navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>
</view>

---

1.6 rich-text

富文本标签

可以将字符串解析成 对应标签, 类似Vue 中v-html功能

<!--pages/RichText/RichText.wxml-->
<!-- 1. 加载 节点数组-->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!-- 2.加载 字符串 -->
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>

// index.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

1.6.1 nodes 属性

nodes属性支持 字符串和标签节点数组

属性	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的HTML节点
attrs	属性	Object	否	支持部分受信任的属性, 遵循 Pascal命名法
children	子节点列表	array	否	结构和 nodes一致

文本节点: type = text

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

• nodes不推荐使用String类型, 性能会有所下降
• rich-text 组件内屏蔽所有节点的事件
• attrs属性不支持id, 支持 class
• name 属性大小写不敏感
• 如果使用了不受信任的html'节点, 该节点及其所有子节点将会被移除
• img标签仅支持网络图片

---

1.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空, 背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于''组件, 分别会触发 ''组件的
open-type	string		否	微信开发能力

---

1.7.1 size 的合法值

值	说明
default	默认大小
mini	小尺寸

---

1.7.2 type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

1.7.3 form-type的合法值

值	说明
submit	提交表单
reset	重置表单

---

1.7.4 open-type 的合法值

值	说明
contact	打开客服会话, 如果用户在会话中点击消息卡片后返回小程序, 可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号, 可以从bindgetphonenumber回调中获取到用户信息`
launchApp	打开 APP, 可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置页
feedback	打开"意见反馈"页面, 用户可提交反馈内容并上传日志, 开发者可以登录小程序管理后台后进入左侧菜单 "客服反馈"页面获取到反馈内容

---

1.8 icon

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

js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

---

1.9 radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤

---

1.10. checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤