第四章:小程序事件的绑定
<!--
1、需要给input标签绑定input事件
绑定关键字 bindinput
2、如何获取输入框的值
通过事件源对象来获取
e.detail.value
3、把输入框的值赋值到data中
1.不能直接this.data.num=e.detail.value
2.不能this.num=e.detail.value
正确的写法:
this.setData({
num:e.detail.value
})
4、需要加入一个点击事件
1.bindtap
2.无法在小程序中的事件中直接传参
3.需要通过自定义属性的方式来传递参数
4.事件源中获取自定义属性
-->
<input bindinput="handleInput" type="text"></input>
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
// pages/demo04/demo04.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
//输入框的input事件的执行逻辑
handleInput (e){
this.setData({
num: e.detail.value
})
},
//加减按钮事件
handleTap(e){
//console.log(e)
//1.获取自定义属性operation
var operation=e.currentTarget.dataset.operation;
this.setData({
num: this.data.num+operation
})
}
})
⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件,具体看组件的说明即可。
4.1 wxml
<input bindinput="handleInput" />
4.2 page
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
4.3 特别注意
-
绑定事件时不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
-
事件传值 通过标签⾃定义属性的⽅式 和 value
<input bindinput="handleInput" data-item="100" />
-
事件触发时获取数据
handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 输入框的值 console.log(e.detail.value); }
第五章:样式WXSS
/**
1.小程序中不需要主动来引入样式文件,只需要名称保持一致即可
2.需要把页面中的某些元素单位由px改成rpx
1.设计稿750px
750px=750rpx
1px=1rpx
2.把屏幕宽度改成375px
375px=750rpx
1px=2rpx
1rpx=0.5px
3.存在一个设计稿 宽度414 或者 未知page
1. 设计稿page存在一个元素宽度100px
2.拿以上的需求去实现不同宽度的页面适配
page px=750rpx
1px=750rpx/page
100px=750rpx*100/page
假设 page=375px
4.利用一个属性 calc属性 css和wxss都支持的一个属性
1. 750和rpx中间不要留空格
2. 运算符的两边也不要留空格
*/
view {
/*width: 375rpx;*/
height: 200rpx;
font-size: 40rpx;
background-color: cornflowerblue;
/*以下代码写法是错误的*/
/*width: 750rpx*100/375;*/
width: calc(750rpx*100/375);
}
<view>rpx</view>
WXSS( WeiXin Style Sheets
)是⼀套样式语⾔,⽤于描述 WXML 的组件样式。
与 CSS 相⽐,WXSS 扩展的特性有:
- 响应式长度单位
rpx
- 样式导入
5.1 尺寸单位
rpx (responsive pixel)
: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在 iPhone6 上,屏幕宽度为 375
px ,共有750个物理像素,则 750rpx = 375px = 750物理像 素 , 1rpx = 0.5px = 1物理像素 。
设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
---|---|---|
IPhone5 | 1rpx=0.42px | 1px=2.34rpx |
IPhone6 | 1rpx=0.5px | 1px=2rpx |
IPhone6 Plus | 1rpx=0.552px | 1px=1.81rpx |
建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使⽤步骤:
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此
n px=750rpx * n/pageWidth
。 - 在wxss⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。
5.2 样式导入
/** common.wxss **/
view {
color: cornflowerblue;
font-size: 100px;
}
/** demo06.wxss **/
/*
1、引入的代码是通过@import来引入
2、路径只能写相对路径
*/
@import "../../styles/common.wxss";
/** demo06.wxml **/
<view>pages/demo06/demo06.wxml</view>
wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。 ⽰例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** demo06.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
5.3 选择器
特别需要注意的是 ⼩程序 **不⽀持通配符 *** 因此以下代码⽆效!
*{
margin:0;
padding:0;
box-sizing:border-box;
}
⽬前⽀持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro"的组件 |
#id | #firstname | 选择拥有 id="firstname"的组件 |
element | view | 选择所有 view 组件 |
element,element | view, checkbox | 选择所有⽂档的 view 组件和所有的 checkbox 组 件 |
nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
::after | view::after | 在 view 组件后边插⼊内容 |
::before | view::before | 在 view 组件前边插⼊内容 |
5.4 小程序中使用less
demo07.less
/* 1、定义less变量 */
@color:yellow;
text {
/*2、使用变量*/
color: @color;
}
view{
.viel{
text {
color: red;
}
}
}
/*导入less*/
@import "../../styles/reset.less";
view {
color: @themeColor;
}
reset.less
@themeColor:green;
原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。
但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
-
编辑器是
vscode
-
安装插件
easy less
-
在
vscode
的设置加入如下配置:"less.compile": { "outExt": ".wxss" }
-
在要编写样式的地方,新建less文件,如
index.less
,然后正常编辑即可
第六章:常见组件
重点讲解⼩程序中常⽤的布局组件 view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox
等
6.1 view
代替 原来的 div 标签
<view hover-class="h-class">
点击我试试
</view>
属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 | 1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | 1.0.0 |
hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间,单位毫秒 | 1.0.0 |
6.2 text
<!--
1、长按文字复制 selectable
2、对文本内容进行解码
-->
<!--已弃用-->
<text selectable>text</text>
<!--当前使用-->
<text user-select decode>
text 123\n<
</text>
- 文本标签
- 只能嵌套text
- 长按文字可以复制(只有该标签有这个功能)
- 可以对空格 回车进行编码
属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
user-select | Boolean | false | 文本是否可选 |
selectable(已弃用) | Boolean | false | 文本是否可选 |
decode | Boolean | false | 是否解码 |
space | string | false | 显示连续空格 |
代码
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
space的合法值
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
Tips
tip
: decode可以解析的有 <&'  
tip
: 各个操作系统的空格标准并不一致。tip
:text 组件内只支持 text 嵌套。tip
: 除了文本节点以外的其他节点都无法长按选中。bug
: 基础库版本低于2.1.0
时, text 组件内嵌的 text style 设置可能不会生效
6.3 image
<!--
image图片标签
1、src指定要加载的图片路径
图片存在默认的宽度和高度320*240 原图大小是200*100
2、mode决定图片内容如何和图片标签宽高做适配
1.scaleToFill:默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
2.aspectFit:保持宽高比,确保图片的长边显示出来 页面轮播图常用
3.aspectFill:保持宽高比,确保图片的短边显示出来 少用
4.widthFix:宽度不变,以前web的图片的缩放模式,宽度指定了之后,高度会自己按照比例来调整 常用
5.类似于以前的background-position,不缩放图片,只显示图片的..区域 少用
top:
bottom
center
left
right
top left
top right
bottom left
bottom right
3、小程序中的图片直接就支持懒加载 lazy-load
1.lazy-load会自己判断 当图片出现在视口的上下三屏的高度之内的时候,自己开始加载图片
-->
<image src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg" mode="top" lazy-load="true"></image>
- 图⽚标签,image组件默认宽度320px、⾼度240px
- ⽀持懒加载
属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | 图片资源地址 | 1.0.0 | |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
webp | boolean | false | 否 | 默认不解析 webP 格式,只支持网络资源 | 2.9.0 |
lazy-load | boolean | false | 否 | 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 | 1.5.0 |
show-menu-by-longpress | boolean | false | 否 | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单 | 2.7.0 |
binderror | eventhandle | 否 | 当错误发生时触发,event.detail = {errMsg} | 1.0.0 | |
bindload | eventhandle | 否 | 当图片载入完毕时触发,event.detail = {height, width} | 1.0.0 |
model的合法值
值 | 说明 | 最低版本 |
---|---|---|
scaleToFill | 默认值,缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 | |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 | |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 | 2.10.3 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 | |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 | |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 | |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 | |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 | |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 | |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 | |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 | |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
Tips
tip
:image组件默认宽度320px、高度240pxtip
:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
6.4 swiper
<!--
1、轮播图外层容器swiper
2、每一个轮播项 swiper-item
3、swiper标签存在默认样式
1. width 100%
2. height 150px
image也存在默认的宽度和高度:320*240
3. swiper高度无法实现由内容撑开
4、先找出来原图的宽度和高度,等比例地给swiper定宽度和高度
原图的宽度和高度:1125*352px
swiper的宽度/swiper的高度=原图的宽度/原图的高度
swiper的高度=swiper的宽度*原图的高度/原图的宽度
height:750rpx*352/1125
5、autoplay:自动轮播
6、interval:修改轮播时间
7、circular:衔接轮播
8、indicator-dots:是否显示面板指示点
9、indicator-color:指示点未选中的颜色
10、indicator-active-color:当前选中的指示点颜色
-->
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="cornflowerblue" easing-function="linear">
<swiper-item>
<image mode="widthFix" src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/2839724348/O1CN01RvuYib1hzQkyVGOP8_!!2839724348.jpg"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i2/2839724348/O1CN01KI3Fca1hzQkucHxFV_!!2839724348.jpg"></image>
</swiper-item>
</swiper>
swiper {
width: 100%;
height: calc(750rpx*100/200);
}
image {
width: 100%;
}
6.4.1 swiper
属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
previous-margin | string | “0px” | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | string | “0px” | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
snap-to-edge | boolean | false | 否 | 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 | 2.12.1 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
easing-function | string | “default” | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 | |
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} | 2.4.3 | |
bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 | 1.9.0 |
easy-function合法值
值 | 说明 | 最低版本 |
---|---|---|
default | 默认缓动函数 | |
linear | 线性动画 | |
easeInCubic | 缓入动画 | |
easeOutCubic | 缓出动画 | |
easeInOutCubic | 缓入缓出动画 |
change
事件 source
返回值
从 1.4.0 开始,change
事件增加 source
字段,表示导致变更的原因,可能值如下:
autoplay
自动播放导致swiper变化;touch
用户划动引起swiper变化;- 其它原因将用空字符串表示。
Bug & Tip
tip
: 如果在bindchange
的事件回调函数中使用setData
改变current
值,则有可能导致setData
被不停地调用,因而通常情况下请在改变current
值前检测source
字段来判断是否是由于用户触摸引起。
6.4.2 swiper-item
仅可放置在swiper组件中,宽高自动设置为100%。
属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
item-id | string | 否 | 该 swiper-item 的标识符 | |
skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
6.5 navigator
<!--
导航组件navigator
相当是一个块级元素,可以直接加宽度高度
1、url:要跳转的页面路径 可以放绝对路径、相对路径
2、target:要跳转到当前的小程序还是其它的小程序页面
self:默认值,自己小程序的页面
miniProgram:其他小程序的页面
3、跳转的方式
1.navigate:默认值,保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
2.redirect:关闭当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
3.switchTab:跳转到tabBar页面,并关闭其他所有非tabBar页面
4.reLaunch:关闭所有页面,打开到应用内的某个页面
5.navigateBack:关闭当前页面,返回上一页面,可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
6.exit:退出小程序,target="miniProgram"时生效
-->
<navigator url="/pages/demo10/demo10" target="self" open-type="navigate">轮播图页面</navigator>
<navigator url="/pages/demo10/demo10" target="self" open-type="redirect">轮播图页面redirect</navigator>
<navigator url="/pages/index/index" target="self" open-type="switchTab">TableBar页面switchTab</navigator>
<navigator url="/pages/index/index" target="self" open-type="reLaunch">reLaunch可以随便跳</navigator>
<navigator url="/pages/index/index" target="self" open-type="navigateBack">navigateBack关闭当前页面返回上一页面</navigator>
导航组件,类似于超链接标签
属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
target | string | self | 否 | 在哪个目标上发生跳转,默认当前小程序 | 2.0.7 |
url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
delta | number | 1 | 否 | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 | 1.0.0 |
app-id | string | 否 | 当target="miniProgram" 时有效,要打开的小程序 appId | 2.0.7 | |
path | string | 否 | 当target="miniProgram" 时有效,打开的页面路径,如果为空则打开首页 | 2.0.7 | |
extra-data | object | 否 | 当target="miniProgram" 时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch() ,App.onShow() 中获取到这份数据。详情 | 2.0.7 | |
version | string | release | 否 | 当target="miniProgram" 时有效,要打开的小程序版本 | 2.0.7 |
short-link | string | 否 | 当target="miniProgram" 时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 | 2.18.1 | |
hover-class | string | navigator-hover | 否 | 指定点击时的样式类,当hover-class="none" 时,没有点击态效果 | 1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | 1.0.0 |
hover-stay-time | number | 600 | 否 | 手指松开后点击态保留时间,单位毫秒 | 1.0.0 |
bindsuccess | string | 否 | 当target="miniProgram" 时有效,跳转小程序成功 | 2.0.7 | |
bindfail | string | 否 | 当target="miniProgram" 时有效,跳转小程序失败 | 2.0.7 | |
bindcomplete | string | 否 | 当target="miniProgram" 时有效,跳转小程序完成 | 2.0.7 |
target的合法值
值 | 说明 |
---|---|
self | 当前小程序 |
miniProgram | 其它小程序 |
open-type的合法值
值 | 说明 |
---|---|
navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
redirect | 对应 wx.redirectTo 的功能 |
switchTab | 对应 wx.switchTab 的功能 |
reLaunch | 对应 wx.reLaunch 的功能 |
navigateBack | 对应 wx.navigateBack 的功能 |
exit | 退出小程序,target="miniProgram" 时生效 |
version的合法值
值 | 说明 |
---|---|
develop | 开发版 |
trial | 体验版 |
release | 正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 |
6.6 rich-text
**富文本标签:**可以将字符串解析为对应标签,类似vue中的v-html
功能
<!--
rich-text:富文本标签
1、nodes属性来实现
1.接收标签字符串
html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>"
2.接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>
<rich-text nodes="{{array}}"></rich-text>
Page({
/**
* 页面的初始数据
*/
data: {
html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>",
array:[
{
//1.div标签,由name属性来指定 最常用的
name:"div",
//2.标签上有哪些属性
attrs:{
//标签上的属性 class style
class:"my_div",
style:"color:red;"
},
//3.子节点:children要接收的数据类型和nodes第二种渲染方式的数据类型一致
children:[
{
name: "p",
attrs: {},
//放文本
children: [{
type:"text",
text:"hello"
}]
}
]
}
]
}
})
属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
nodes | array/string | [] | 否 | 节点列表/HTML String |
space | string | 否 | 显示连续空格 |
space的合法值
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
nodes
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
元素节点:type = node
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | 支持部分受信任的属性,遵循 Pascal 命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
文本节点:type = text
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | 文本 | string | 是 | 支持entities |
受信任的HTML节点及属性
全局支持class和style属性,不支持id属性。
节点 | 属性 |
---|---|
a | |
abbr | |
address | |
article | |
aside | |
b | |
bdi | |
bdo | dir |
big | |
blockquote | |
br | |
caption | |
center | |
cite | |
code | |
col | span,width |
colgroup | span,width |
dd | |
del | |
div | |
dl | |
dt | |
em | |
fieldset | |
font | |
footer | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
header | |
hr | |
i | |
img | alt,src,height,width |
ins | |
label | |
legend | |
li | |
mark | |
nav | |
ol | start,type |
p | |
pre | |
q | |
rt | |
ruby | |
s | |
section | |
small | |
span | |
strong | |
sub | |
sup | |
table | width |
tbody | |
td | colspan,height,rowspan,width |
tfoot | |
th | colspan,height,rowspan,width |
thead | |
tr | colspan,height,rowspan,width |
tt | |
u | |
ul |
Bug & Tip
tip
: nodes 不推荐使用 String 类型,性能会有所下降。tip
:rich-text
组件内屏蔽所有节点的事件。tip
: attrs 属性不支持 id ,支持 class 。tip
: name 属性大小写不敏感。tip
: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。tip
: img 标签仅支持网络图片。tip
: 如果在自定义组件中使用rich-text
组件,那么仅自定义组件的 wxss 样式对rich-text
中的 class 生效
6.7 button
<!--
button标签
1、外观的属性
1.size:控制按钮的大小
1.default:默认大小
mini:小尺寸
2.type:控制按钮的颜色
1.default 灰色
2.primary 绿色
3.warn 红色
3.plain:按钮是否镂空,背景色透明
4.loading:加载按钮
5.disabled:禁用按钮
-->
<button size="default">默认按钮</button>
<button size="mini">迷你按钮</button>
<button size="mini" type="primary">primary 按钮</button>
<button size="mini" type="warn">warn 按钮</button>
<button size="mini" type="default">default按钮</button>
<button size="mini" type="primary" plain="true">plain 按钮</button>
<button size="mini" type="primary" loading>loading 按钮</button>
<button size="mini" type="primary" disabled="true">disabled 按钮</button>
<!--
button按钮的开放能力
open-type:
1、contact:直接打开客服会话功能 需要在微信小程序的后台进行配置
2、share:转发当前的小程序到微信朋友中 不能把小程序分享到朋友圈中
3、getPhoneNumber:获取当前用户的手机号码中心 结合一个事件来使用 不是企业的小程序账号没有权限获取用户的手机号码
1.绑定一个事件 bindgetphonenumber
2.在事件的回调函数中,通过参数来获取信息
3.获取到的信息 已经加密过了
需要用户自己搭建一个小程序的后台服务器,在后台服务器中进行解析手机号码,返回到小程序中就可以看到信息了
4、getUserInfo:获取当前用户的个人信息
1.使用方法 类似获取用户手机号码
2.可以直接获取,不存在加密的字段
5、launchApp:在小程序中直接打开APP
1.先在APP中通过APP的某个链接打开小程序
2.在小程序中再通过这个功能重新打开APP
6、openSetting:打开小程序中内置的授权页面
1.授权页面中只会出现用户曾经点击过的权限
7、feedBack:打开小程序中内置的意见反馈页面
1.只能够通过真机调试来打开
-->
<button type="default" open-type="contact">contact</button>
<button type="default" open-type="share">share</button>
<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button type="default" open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button type="default" open-type="launchApp">launchApp</button>
<button type="default" open-type="openSetting">openSetting</button>
<button type="default" open-type="feedback">feedback</button>
Page({
//获取用户的手机号码信息
getPhoneNumber(e){
console.log(e)
},
//获取用户个人信息
getUserInfo(e){
console.log(e)
}
})
属性
按钮。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
size | string | default | 否 | 按钮的大小 | 1.0.0 |
type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
plain | boolean | false | 否 | 按钮是否镂空,背景色透明 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
loading | boolean | false | 否 | 名称前是否带 loading 图标 | 1.0.0 |
form-type | string | 否 | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 | 1.0.0 | |
open-type | string | 否 | 微信开放能力 | 1.1.0 | |
hover-class | string | button-hover | 否 | 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 | 1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | number | 20 | 否 | 按住后多久出现点击态,单位毫秒 | 1.0.0 |
hover-stay-time | number | 70 | 否 | 手指松开后点击态保留时间,单位毫秒 | 1.0.0 |
lang | string | en | 否 | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 | 1.3.0 |
session-from | string | 否 | 会话来源,open-type="contact"时有效 | 1.4.0 | |
send-message-title | string | 当前标题 | 否 | 会话内消息卡片标题,open-type="contact"时有效 | 1.5.0 |
send-message-path | string | 当前分享路径 | 否 | 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 | 1.5.0 |
send-message-img | string | 截图 | 否 | 会话内消息卡片图片,open-type="contact"时有效 | 1.5.0 |
app-parameter | string | 否 | 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 | 1.9.5 | |
show-message-card | boolean | false | 否 | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | 1.5.0 |
bindgetuserinfo | eventhandle | 否 | 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效 | 1.3.0 | |
bindcontact | eventhandle | 否 | 客服消息回调,open-type="contact"时有效 | 1.5.0 | |
bindgetphonenumber | eventhandle | 否 | 获取用户手机号回调,open-type=getPhoneNumber时有效 | 1.2.0 | |
binderror | eventhandle | 否 | 当使用开放能力时,发生错误的回调,open-type=launchApp时有效 | 1.9.5 | |
bindopensetting | eventhandle | 否 | 在打开授权设置页后回调,open-type=openSetting时有效 | 2.0.7 | |
bindlaunchapp | eventhandle | 否 | 打开 APP 成功的回调,open-type=launchApp时有效 | 2.4.4 |
size 的合法值
值 | 说明 | 最低版本 |
---|---|---|
default | 默认大小 | |
mini | 小尺寸 |
type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
primary | 绿色 | |
default | 白色 | |
warn | 红色 |
form-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
submit | 提交表单 | |
reset | 重置表单 |
open-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 (小程序插件中不能使用) | 1.1.0 |
share | 触发用户转发,使用前建议先阅读使用指引 | 1.2.0 |
getPhoneNumber | 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明 (小程序插件中不能使用) | 1.2.0 |
getUserInfo | 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用) | 1.3.0 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明 | 1.9.5 |
openSetting | 打开授权设置页 | 2.0.7 |
feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 | 2.1.0 |
open-type的contact实现流程
- 将小程序的
appid
由测试号改为自己的appid
- 登录小程序官网,添加
客服-微信
- 为了方便演示,自己准备了两个账号
- 普通用户A
- 客服-微信B
- 就是干!
lang 的合法值
值 | 说明 | 最低版本 |
---|---|---|
en | 英文 | |
zh_CN | 简体中文 | |
zh_TW | 繁体中文 |
Bug & Tip
tip
:button-hover
默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
tip
:bindgetphonenumber
从1.2.0 开始支持,但是在1.5.3以下版本中无法使用wx.canIUse进行检测,建议使用基础库版本进行判断。tip
: 在bindgetphonenumber
等返回加密信息的回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行login
;或者在回调中先使用checkSession
进行登录态检查,避免login
刷新登录态。tip
: 从 2.1.0 起,button 可作为原生组件的子节点嵌入,以便在原生组件上使用open-type
的能力。tip
: 目前设置了form-type
的button
只会对当前组件中的form
有效。因而,将button
封装在自定义组件中,而form
在自定义组件外,将会使这个button
的form-type
失效。
6.8 icon
<!--
小程序中的字体图标
1、type:图标的类型
success、success_no_circle、info、warn、waiting、cancel、download、search、clear
2、size:图标的大小
3、color:图标的颜色
-->
<icon type="success" size="60" color="#0094ff"></icon>
<icon type="cancel" color="red"></icon>
图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
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 |
6.9 radio
<!--
radio单选框
1、radio标签必须要和父元素radio-group来使用
2、value:选中的单选框的值
3、需要给radio-group绑定change事件
4、需要在页面中显示选中的值
-->
<radio-group bindchange="handleChange">
<radio value="male" color="#0094ff">男</radio>
<radio value="female" color="red">女</radio>
</radio-group>
<view>您选中的是:{{gender}}</view>
Page({
/**
* 页面的初始数据
*/
data: {
gender:""
},
handleChange(e){
//1.获取单选框中的值
var sex=e.detail.value
//2.把值赋给data中的数据
this.setData({
gender:sex
})
}
})
单选项目
需要搭配radio-group使用
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value | |
checked | boolean | false | 否 | 当前是否选中 |
disabled | boolean | false | 否 | 是否禁用 |
color | string | #09BB07 | 否 | radio的颜色,同css的color |
radio-group
单项选择器,内部由多个 radio 组成。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
bindchange | EventHandle | 否 | radio-group中选中项发生改变时触发 change 事件,detail = {value:[选中的radio的value的数组]} | 1.0.0 |
6.10 checkbox
需要搭配checkbox-group
一起使用
多选项目。
属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 否 | checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value | 1.0.0 | |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
checked | boolean | false | 否 | 当前是否选中,可用来设置默认选中 | 1.0.0 |
color | string | #09BB07 | 否 | checkbox的颜色,同css的color | 1.0.0 |
checkbox-group
多项选择器,内部由多个checkbox组成。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
bindchange | EventHandle | 否 | checkbox-group中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]} | 1.0.0 |