微信小程序开发(4)小程序的常见组件

原创

wx5ba7ab4695f27 2021-05-31 14:56:03 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5ba7ab4695f27的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

- - view
  - text
  - image
  - swiper
  - navigator
  - rich-text
  - nodes属性
  - button
  - icon
  - radio
  - checkbox

view

代替原来的 div 标签

<view hover-class="h-class">
点击我试试
</view>

text

1.⽂本标签
2.只能嵌套text
3.⻓按⽂字可以复制（只有该标签有这个功能）
4.可以对空格回⻋进⾏编码

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

<text selectable="{{false}}" decode="{{false}}">
普&nbsp;通
</text>

image

1.图⽚标签，image组件默认宽度320px、⾼度240px
2.⽀持懒加载

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

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素
缩放	aspectFit	保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放	aspectFill	保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪	top	不缩放图⽚，只显⽰图⽚的顶部区域
裁剪	bottom	不缩放图⽚，只显⽰图⽚的底部区域
裁剪	center	不缩放图⽚，只显⽰图⽚的中间区域
裁剪	left	不缩放图⽚，只显⽰图⽚的左边区域
裁剪	right	不缩放图⽚，只显⽰图⽚的右边区域
裁剪	top left	不缩放图⽚，只显⽰图⽚的左上边区域
裁剪	top right	不缩放图⽚，只显⽰图⽚的右上边区域
裁剪	bottom left	不缩放图⽚，只显⽰图⽚的左下边区域
裁剪	bottom right	不缩放图⽚，只显⽰图⽚的右下边区域

swiper

微信内置轮播图组件
默认宽度 100% ⾼度 150px
wxml

<swiper>
    <swiper-item>
    <image mode="widthFix" src="https://img.alicdn.com/simba/img/TB1rtpHHrY1gK0jSZTESutDQVXa.jpg"  />
    <image mode="widthFix" src="http://img.alicdn.com/tfs/TB1FKeWGND1gK0jSZFKXXcJrVXa-520-280.jpg_q90_.webp"  />
    <image mode="widthFix" src="https://img.alicdn.com/simba/img/TB1iAacApY7gK0jSZKzSuuikpXa.jpg"  />
    </swiper-item>
      
</swiper>

wxss

swiper{
    width: 100%;
    height: calc(100vw * 280 / 520 );
}
image{
    width: 100%;
}

效果
微信小程序开发(4)小程序的常见组件_微信小程序
调节轮播图公式

高度 calc （100vw * 原图宽度/原图高度）

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

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 时⽣效

rich-text

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

// 1	index.wxml 加载 节点数组
<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&nbsp;World!'
}]
}]
},
tap() { console.log('tap')

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 标签仅⽀持⽹络图⽚。

button

属性	类型	默认值	必填	说明
size	string	default	否	按钮的⼤⼩
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁⽤
loading	boolean	false	否	名称前是否带 loading 图标
form- type	string		否	⽤于 `](https://developers.weixin.qq.com/miniprogram/dev/component/form.html)组件，点击分别会触发 [` 组件的submit/reset 事件
open- type	string		否	微信开放能⼒

size 的合法值

值	说明
default	默认⼤⼩
mini	⼩尺⼨

type 的合法值

值	说明
primary	绿⾊
default	⽩⾊
warn	红⾊

form-type 的合法值

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

open-type 的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息，具体说明
share	触发⽤⼾转发，使⽤前建议先阅读使⽤指引
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

open-type 的 contact的实现流程
1.将⼩程序的 appid 由测试号改为⾃⼰的 appid
2.登录微信⼩程序官⽹，添加客服 - 微信
1.普通⽤⼾ A
2.客服-微信 B

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