❤️小程序入门基础(二)❤️(个人学习笔记)
2024-05-09 14:08:40
基本组件使用
cover-image
基础库 1.4.0 开始支持，低版本需做兼容处理。
覆盖在原生组件之上的图片视图。
目前原生组件均已支持同层渲染，建议使用 image 替代。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。 | 1.4.0 | |
| bindload | eventhandle | 否 | 图片加载成功时触发 | 2.1.0 | |
| binderror | eventhandle | 否 | 图片加载失败时触发 | 2.1.0 |
支持的格式
| 格式 | iOS | Android |
|---|---|---|
| JPG | √ | √ |
| PNG | √ | √ |
| SVG | x | x |
| WEBP | √ | √ |
| GIF | √ | √ |
| BASE64 | x | x |
视图容器 /scroll-view
scroll-view
基础库 1.0.0 开始支持，低版本需做兼容处理。
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| scroll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
| scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
| upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时，触发 scrolltoupper 事件 | 1.0.0 |
| lower-threshold | number/string | 50 | 否 | 距底部/右边多远时，触发 scrolltolower 事件 | 1.0.0 |
| scroll-top | number/string | 否 | 设置竖向滚动条位置 | 1.0.0 | |
| scroll-left | number/string | 否 | 设置横向滚动条位置 | 1.0.0 | |
| scroll-into-view | string | 否 | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | 1.0.0 | |
| scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | 1.0.0 |
| enable-back-to-top | boolean | false | 否 | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | 1.0.0 |
| enable-flex | boolean | false | 否 |
启用 flexbox 布局。开启后，当前节点声明了 display: flex就会成为 flex container，并作用于其孩子节点。
|
2.7.3 |
| scroll-anchoring | boolean | false | 否 |
开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor属性。
|
2.8.2 |
| refresher-enabled | boolean | false | 否 | 开启自定义下拉刷新 | 2.10.1 |
| refresher-threshold | number | 45 | 否 | 设置自定义下拉刷新阈值 | 2.10.1 |
| refresher-default-style | string | “black” | 否 |
设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式
|
2.10.1 |
| refresher-background | string | “#FFF” | 否 | 设置自定义下拉刷新区域背景颜色 | 2.10.1 |
| refresher-triggered | boolean | false | 否 | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | 2.10.1 |
| enhanced | boolean | false | 否 | 启用 scroll-view 增强特性，启用后可通过 ScrollViewContext操作 scroll-view | 2.12.0 |
| bounces | boolean | true | 否 | iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) | 2.12.0 |
| show-scrollbar | boolean | true | 否 | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | 2.12.0 |
| paging-enabled | boolean | false | 否 | 分页滑动效果 (同时开启 enhanced 属性后生效) | 2.12.0 |
| fast-deceleration | boolean | false | 否 | 滑动减速速率控制 (同时开启 enhanced 属性后生效) | 2.12.0 |
| binddragstart | eventhandle | 否 | 滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } | 2.12.0 | |
| binddragging | eventhandle | 否 | 滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } | 2.12.0 | |
| binddragend | eventhandle | 否 | 滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity } | 2.12.0 | |
| bindscrolltoupper | eventhandle | 否 | 滚动到顶部/左边时触发 | 1.0.0 | |
| bindscrolltolower | eventhandle | 否 | 滚动到底部/右边时触发 | 1.0.0 | |
| bindscroll | eventhandle | 否 | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | 1.0.0 | |
| bindrefresherpulling | eventhandle | 否 | 自定义下拉刷新控件被下拉 | 2.10.1 | |
| bindrefresherrefresh | eventhandle | 否 | 自定义下拉刷新被触发 | 2.10.1 | |
| bindrefresherrestore | eventhandle | 否 | 自定义下拉刷新被复位 | 2.10.1 | |
| bindrefresherabort | eventhandle | 否 | 自定义下拉刷新被中止 | 2.10.1 |
Bug & Tip
tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video组件tip:scroll-into-view的优先级高于scroll-toptip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefreshtip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画
swiper
基础库 1.0.0 开始支持，低版本需做兼容处理。
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| 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 |
easing-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字段来判断是否是由于用户触摸引起
icon
基础库 1.0.0 开始支持，低版本需做兼容处理。
图标。组件属性的长度单位默认为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 |
Page({data: {iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']}
})
<view class="container"><view class="icon-box"><icon class="icon-box-img" type="success" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">成功</view><view class="icon-box-desc">用于表示操作顺利完成</view></view></view><view class="icon-box"><icon class="icon-box-img" type="info" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view></view></view><view class="icon-box"><icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon><view class="icon-box-ctn"><view class="icon-box-title">普通警告</view><view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view></view></view><view class="icon-box"><icon class="icon-box-img" type="warn" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">强烈警告</view><view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view></view></view><view class="icon-box"><icon class="icon-box-img" type="waiting" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">等待</view><view class="icon-box-desc">用于表示等待，告知用户结果需等待</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="success_no_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_已选择</view><view class="icon-box-desc">用于多选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">多选控件图标_未选择</view><view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="warn" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">错误提示</view><view class="icon-box-desc">用于在表单中表示出现错误</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="success" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">单选控件图标_已选择</view><view class="icon-box-desc">用于单选控件中，表示已选择该项目</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="download" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">下载</view><view class="icon-box-desc">用于表示可下载</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="info_circle" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于在表单中表示有信息提示</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="cancel" size="23"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">停止或关闭</view><view class="icon-box-desc">用于在表单中，表示关闭或停止</view></view></view><view class="icon-box"><view class="icon-small-wrp"><icon class="icon-small" type="search" size="14"></icon></view><view class="icon-box-ctn"><view class="icon-box-title">搜索</view><view class="icon-box-desc">用于搜索控件中，表示可搜索</view></view></view></view>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRXB3Xyf-1624624745130)(file://C:/Users/lenovo/Desktop/image/1624624710107.png?lastModify=1624624732)]
基础内容 /rich-text
rich-text
基础库 1.4.0 开始支持，低版本需做兼容处理。
富文本。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| nodes | array/string | [] | 否 | 节点列表/HTML String | 1.4.0 |
| space | string | 否 | 显示连续空格 | 2.4.1 |
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 生效
总结
按着官网走,简单好学的微信你就学会了.多看看官网.就是多看.
❤️小程序入门基础(二)❤️(个人学习笔记)相关推荐
- 微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记 第一章 认识微信小程序 前后端分离的开发方式 小程序的特点 小程序对开发者的影响 学习小程序需要的基础 第二章 小程序环境搭建与开发工具介绍 小程序开发环境 没有小程序号对 ...
- 微信小程序入门（二）
上回刚说到关于这个WXSS的简单内容,那么今天这个入门二就顺着上一篇的内容来继续讲一讲关于小程序入门的一系列内容 选择器 开发者文档 从开发者文档中我们可以知道,小程序不支持通配符 * ,也就是说例如 ...
- ❤️小程序入门基础(一)❤️
事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...
- 《微信小程序商城界面设计实战》--学习笔记作业
一.学习笔记 1.注释:wxml文档注释: css文档注释:/** **/ js文档注释:单行注释以"//"开头:多行注释以"/"开头,以"/&quo ...
- 七天学习微信小程序开发（一）—— 学习笔记
文章目录 前言 目标 第一天 -- 前端配置和编写 微信开发 微信小程序的代码结构 常用标签(wxml) 常用样式(wxss) 界面布局的技术 任务 第二天 -- 深度学习微信前端编写(一) 程序底部 ...
- 微信小程序入门基础教程
准备工作 要开发微信小程序之前,需要做一些准备工作,首先进入https://mp.weixin.qq.com/debug/wxadoc/dev/index.html去下载快速开发源码包 然后再进入ht ...
- 微信小程序 - - 云开发の云函数学习笔记
前后端分离:前端请求云函数(书写逻辑),后端请求数据库(操作数据) 一.云函数初体验 错误1:Cannot find module 'wx-server-sdk' # getData/index.js ...
- Echarts3.0入门基础与实战(学习笔记)
1.浏览器画图原理简介 2.Echarts库简介 3.Echarts简单使用 4.Echarts组件使用 5.Echarts高级图例介绍 6.扩展知识 1.浏览器画图原理简介 canvas 基于像素, ...
- 从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
最新文章
- 22.CSS边框与背景【上】
- CNN可视化最新研究方法进展（附结构、算法）
- Python date，datetime，time等相关操作总结
- 在Python中为什么切片要忽略最后一个元素？
- Java基础知识复习(二)
- On the Difference Between Orthogonal Matching Pursuit and Orthogonal Least Squares
- lucene学习笔记_学习Lucene
- 6.04 从字符串中删除不需要的字符
- GET和POST请求到底有什么区别？
- 互联网晚报 | 3月21日 星期一 | 科大讯飞5亿成立科技新公司；新能源车企称采购宁德时代电池成本上涨两万元...
- sybase数据库配置经验交流
- vue 引用src中的文件_Vue中引用第三方JS文件
- 用shell查看关键数据
- Memory Translation and Segmentation（内存转换与段）
- Artstudio Pro Mac(绘图与图片编辑软件)特别版
- vue+elementui搭建后台管理界面(6登录和菜单权限控制)
- 基于贝叶斯分类的中文人名用字特征的性别识别
- 浏览器在线PDF预览取消下载按钮
- 章节9 性能和资源使用 - Segger SystemView使用手册（译文）
- 【机器学习】十二、一文看懂支持向量机原理