第四章：小程序事件的绑定
<!--
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 上，屏幕宽度为 375px ，共有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 |
2419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
