文章目录


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

微信小程序开发(4)小程序的常见组件_缩放_02

radio

需要搭配 radio-group ⼀起使⽤

checkbox

需要搭配 checkbox-group ⼀起使⽤