首页 / 更多教程 / 微信小程序学习总结(四)
微信小程序学习总结(四)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序学习总结(四)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含20331字，纯文字阅读大概需要30分钟。
内容图文
微信小程序学习总结(四)
一. 视图容器
1. view 视图容器
属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒
2. scroll-view 可滚动视图容器
属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
3. swiper 滑块视图容器
属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String "" 当前所在滑块的 item-id ，不能与 current 被同时指定
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String "0px" 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin String "0px" 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items Number 1 同时显示的滑块数量
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchange EventHandle current改变时会触发 change 事件，event.detail = {current: current, source: source}
bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail
4. movable-view 支持移动和缩放的容器
属性名 类型 默认值 说明
scale-area Boolean false 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area
direction String none movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia Boolean false movable-view是否带有惯性
out-of-bounds Boolean false 超过可移动区域后，movable-view是否还可以移动
x Number / String 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y Number / String 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping Number 20 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction Number 2 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled Boolean false 是否禁用
scale Boolean false 是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min Number 0.5 定义缩放倍数最小值
scale-max Number 10 定义缩放倍数最大值
scale-value Number 1 定义缩放倍数，取值范围为 0.5 - 10
animation Boolean true 是否使用动画
bindchange EventHandle 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） 1.9.90
bindscale EventHandle 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回
特殊事件:
htouchmove初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch
注意:
movable-view必须设置width和height属性，不设置默认为10px
movable-view默认为绝对定位，top和left属性为0px当
movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
movable-view必须在组件中，并且必须是直接子节点，否则不能移动
cover-view
覆盖在原生组件之上的文本视图，可覆盖的原生组件包括
map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button
属性名 类型 说明
scroll-top Number 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
src String 图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。
bindload EventHandle 图片加载成功时触发
binderror EventHandle 图片加载失败时触发
二. 基础内容
1.icon 图标
属性名 类型 默认值 说明
type String icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 icon的大小，单位px
color Color icon的颜色，同css的color
2.text 文本
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
space String false 显示连续空格
decode Boolean false 是否解码
space有效值: ①
ensp中文字符空格一半大小 ②emsp中文字符空格大小 ③nbsp根据字体设置的空格大小
注意:
- decode可以解析的有
< > & '    - 各个操作系统的空格标准并不一致
<text/>组件内只支持<text/>嵌套- 除了文本节点以外的其他节点都无法长按选中
-
rich-text 富文本
属性 类型 默认值 说明 nodes Array / String [] 节点列表 / HTML String
1.支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap
2. nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降
3. nodes 现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点
元素节点：type = node
属性 说明 类型 必填 备注
name 标签名 String 是 支持部分受信任的HTML节点
attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法
children 子节点列表 Array 否 结构和nodes一致
文本节点：type = text
属性 说明 类型 必填 备注
text 文本 String 是 支持entities
注意:
- nodes 不推荐使用 String 类型，性能会有所下降。
- rich-text 组件内屏蔽所有节点的事件。
- attrs 属性不支持 id ，支持 class 。
- name 属性大小写不敏感。
- 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
- img 标签仅支持网络图片。
- 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
-
progress 进度条
属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Number 6 进度条线的宽度，单位px color Color #09BB07 进度条颜色（请使用 activeColor） activeColor Color 已选择的进度条的颜色 backgroundColor Color 未选择的进度条的颜色 active Boolean false 进度条从左往右的动画 active-mode String backwards backwards: 动画从头播forwards：动画从上次结束点接着播
三. 导航
1. navigator 页面链接
属性名 类型 默认值 说明
target String self 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url String 当前小程序内的跳转链接
open-type String navigate 跳转方式
delta Number 当 open-type 为 'navigateBack' 时有效，表示回退的层数
app-id String 当target="miniProgram"时有效，要打开的小程序 appId
path String 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
extra-data Object 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据
version version release 当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版
hover-class String navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒
bindsuccess String 当target="miniProgram"时有效，跳转小程序成功
bindfail String 当target="miniProgram"时有效，跳转小程序失败
bindcomplete String 当target="miniProgram"时有效，跳转小程序完成
①open-type 有效值 :
值 说明
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能
navigateBack 对应 wx.navigateBack 的功能
exit 退出小程序，target="miniProgram"时生效
注意: navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1);opacity: 0.7;}, 的子节点背景色应为透明色
②functional-page-navigator 仅在插件的自定义组件中有效，用于跳转到插件功能页。
属性名 类型 默认值 说明
version String release 跳转到的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）；线上版本必须设置为 release
name String 要跳转到的功能页
args Object null 功能页参数，参数格式与具体功能页相关
bindsuccess EventHandler 功能页返回，且操作成功时触发， detail 格式与具体功能页相关
bindfail EventHandler 功能页返回，且操作失败时触发， detail 格式与具体功能页相关
目前支持的功能页和name 有效值：
值 功能
loginAndGetUserInfo 用户信息功能页
requestPayment 支付功能页
四. 媒体组件
1. image 图片
属性名 类型 默认值 说明
src String 图片资源地址，支持云文件ID
mode String 'scaleToFill' 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效
binderror HandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload HandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
注意：
- image组件默认宽度300px、高度225px
- image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式
模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
裁剪 top 不缩放图片，只显示图片的顶部区域
裁剪 bottom 不缩放图片，只显示图片的底部区域
裁剪 center 不缩放图片，只显示图片的中间区域
裁剪 left 不缩放图片，只显示图片的左边区域
裁剪 right 不缩放图片，只显示图片的右边区域
裁剪 top left 不缩放图片，只显示图片的左上边区域
裁剪 top right 不缩放图片，只显示图片的右上边区域
裁剪 bottom left 不缩放图片，只显示图片的左下边区域
裁剪 bottom right 不缩放图片，只显示图片的右下边区域
-
video 视频。该组件是原生组件，使用时请注意相关限制
属性名 类型 默认值 说明 src String 要播放视频的资源地址，支持云文件ID initial-time Number 指定视频初始播放位置 duration Number 指定视频时长 controls Boolean true 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） danmu-list Object Array 弹幕列表 danmu-btn Boolean false 是否显示弹幕按钮，只在初始化时有效，不能动态变更 enable-danmu Boolean false 是否展示弹幕，只在初始化时有效，不能动态变更 autoplay Boolean false 是否自动播放 loop Boolean false 是否循环播放 muted Boolean false 是否静音播放 page-gesture Boolean false 在非全屏模式下，是否开启亮度与音量调节手势 direction Number 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） show-progress Boolean true 若不设置，宽度大于240时才会显示 show-fullscreen-btn Boolean true 是否显示全屏按钮 show-play-btn Boolean true 是否显示视频底部控制栏的播放按钮 show-center-play-btn Boolean true 是否显示视频中间的播放按钮 enable-progress-gesture Boolean true 是否开启控制进度的手势 objectFit String contain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 poster String 视频封面的图片网络资源地址或云文件ID（2.2.3起支持）如果 controls 属性值为 false 则设置 poster 无效 bindplay EventHandle 当开始/继续播放时触发play事件 bindpause EventHandle 当暂停播放时触发 pause 事件 bindended EventHandle 当播放到末尾时触发 ended 事件 bindtimeupdate EventHandle 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 bindfullscreenchange EventHandle 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal bindwaiting EventHandle 视频出现缓冲时触发 binderror EventHandle 视频播放出错时触发注意:
<video />默认宽度300px、高度225px，可通过wxss设置宽高- 相关api：
wx.createVideoContext- camera 系统相机。该组件是原生组件，使用时请注意相关限制
属性名 类型 默认值 说明
mode String normal 有效值为 normal, scanCode
device-position String back 前置或后置，值为front, back
flash String auto 闪光灯，值为auto, on, off
bindstop EventHandle 摄像头在非正常终止时触发，如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发
bindscancode EventHandle 在成功识别到一维码时触发，仅在 mode="scanCode" 时生效
注意:
- 需要用户授权 scope.camera
- 同一页面只能插入一个 camera 组件
- 相关api：
wx.createCameraContext
五. 开放能力
1. open-data 用于展示微信开放的数据。
属性名 类型 默认值 说明
type String 开放数据类型
open-gid String 当 type="groupName" 时生效, 群id
lang String en 当 type="user*" 时生效，以哪种语言展示 userInfo，有效值有：en, zh_CN, zh_TW
type 有效值：
值 说明
groupName 拉取群名称
userNickName 用户昵称
userAvatarUrl 用户头像
userGender 用户性别
userCity 用户所在城市
userProvince 用户所在省份
userCountry 用户所在国家
userLanguage 用户的语言
注意:
- 只有当前用户在此群内才能拉取到群名称
- 关于open-gid的获取请使用 wx.getShareInfo
2. official-account
用户扫码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内
注意:
1. 使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。设置的公众号需与小程序主体一致
2. 在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
①当小程序从扫二维码场景（场景值1011）打开时
②当小程序从扫小程序码场景（场景值1047）打开时
③当小程序从聊天顶部场景（场景值1089）中的“最近使用”内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
④当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
3. 每个页面只能配置一个该组件
六. 画布
Canvas 画布 该组件是原生组件，使用时请注意相关限制
属性名 类型 默认值 说明
canvas-id String canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle 手指触摸动作开始
bindtouchmove EventHandle 手指触摸后移动
bindtouchend EventHandle 手指触摸动作结束
bindtouchcancel EventHandle 手指触摸动作被打断，如来电提醒，弹窗
bindlongtap EventHandle 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
注意:
1. canvas 标签默认宽度300px、高度225px
2. 同一页面中的canvas-id不可重复，如果使用一个已经出现过的canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
3. 避免设置过大的宽高，在安卓下会有crash(意外)的问题
内容总结
以上是互联网集市为您收集整理的微信小程序学习总结(四)全部内容，希望文章能够帮你解决微信小程序学习总结(四)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。