微信小程序学习笔记五 常见组件
1. 常见组件
- 重点讲解小程序中常用的布局组件
1.1 view
代替 原来的div
标签
<!-- pages/index/index.wxml -->
<view hover-class="h-class">
点击我试试
</view>
/* pages/index/index.wxss */
.h-class{
color: green;
}
1.2 text
- 文本标签
- 只能嵌套text
- 长按文字可以复制 (只有该标签有这个功能)
- 可以对空格 回车 进行编码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectable | Boolean | false | 文本是否可选 |
decode | Boolean | false | 是否解码 |
<!-- text 标签测试 -->
<text selectable="false" decode="false">
普 通
</text>
1.3 image
- 图片标签, image组件默认宽度320px、高度240px
- 支持懒加载
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 图片资源地址 | |
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 |
lazy-load | Boolean | false | 图片懒加载 |
mode有效值:
- model 有13种模式,其中4种是缩放模式, 9种是裁剪模式
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片, 使图片的宽高完全拉伸至填满image元素 |
缩放 | aspectFit | 保持纵横比缩放图片, 使图片的长边能完全显示出来 |
缩放 | aspectFill | 保持纵横比缩放图片, 只保证图片的短边能完全显示出来 |
缩放 | widthFix | 宽度不变, 高度自动变化, 保持原图宽高比不变 |
裁剪 | top | 不缩放图片, 只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片, 只显示图片的底部区域 |
裁剪 | center | 不缩放图片, 只显示图片的中间区域 |
裁剪 | left | 不缩放图片, 只显示图片的左边区域 |
裁剪 | right | 不缩放图片, 只显示图片的右边区域 |
裁剪 | top left | 不缩放图片, 只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片, 只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片, 只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片, 只显示图片的右下边区域 |
1.4 swiper
微信内置轮播图组件
- swiper : 块视图容器。
- swiper-item: 滑块, 默认宽度和⾼度都是100%
- 默认宽度 100% 高度150px
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | Boolean | false |
是否显示面板指示点 |
indicator-color | Color | rgb(0,0,0,.3) |
指示点颜色 |
indicator-active-color | Color | #000000 |
当前选中的指示点颜色 |
autoplay | Boolean | false |
是否自动切换 |
interval | Number | 5000 |
自动切换时间间隔 |
circular | Boolean | false |
是否循环轮播 |
<!--
"pages/SwiperText/SwiperText.wxml",
1. 轮播图的外层容器: swiper
2. 每一个轮播项: swiper-item
3. swiper存在默认样式
- width: 100%
- height: 150px image 存在默认宽度和高度 320 * 240
4. swiper 高度无法实现由内容撑开
5. 先找出来原图的高度和宽度, 等比例给swiper定宽度和高度
- 原图的宽高880 * 388
- swiper宽度 / swiper 高度 = 原图宽度 / 原图高度
- swiper高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height : calc(100vw * 338 / 880)
-->
<swiper indicator-dots="true" autoplay>
<swiper-item>
<image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/5ef9aa23c480cf40998be6f0897bcad4ad8e8e3f.jpg@880w_388h_1c_95q">
</image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src=" https://i0.hdslb.com/bfs/feed-admin/c7c308997d904ec7770062fb0e2062dfeaf54f89.png@880w_388h_1c_95q">
</image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src=" https://i0.hdslb.com/bfs/feed-admin/5f60c09eb96f604bc4fc8ea78ef5b3be6ef67963.png@880w_388h_1c_95q">
</image>
</swiper-item>
</swiper>
/* pages/SwiperText.wxss */
swiper{
width: 100%;
height : calc(100vw * 338 / 880)
}
image{
width: 100%;
}
1.5 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" 时生效 |
<!--pages/navigatorText/navigatorText.wxml-->
<!--
导航组件: navigator
0 相当于一个块级元素, 默认会换行 可以直接加宽高
1. url: 要跳转的页面路径 绝对路径|相对路径
2. target: 要跳转到当前小程序页面 还是其他的小程序页面
self: 默认值 自己
miniProgram: 其他的小程序页面
3. open-type: 跳转的方式
-->
<view>
<navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>
<navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>
</view>
1.6 rich-text
富文本标签
可以将字符串解析成 对应标签, 类似Vue 中v-html
功能
<!--pages/RichText/RichText.wxml-->
<!-- 1. 加载 节点数组-->
<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 World!'
}]
}]
},
tap() {
console.log('tap')
}
})
1.6.1 nodes 属性
nodes
属性支持 字符串
和标签节点数组
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | String | 是 | 支持部分受信任的HTML节点 |
attrs | 属性 | Object | 否 | 支持部分受信任的属性, 遵循 Pascal命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes一致 |
文本节点: type = text
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | 文本 | string | 是 | 支持entities |
nodes
不推荐使用String
类型, 性能会有所下降rich-text
组件内屏蔽所有节点的事件attrs
属性不支持id, 支持 classname
属性大小写不敏感- 如果使用了不受信任的
html'
节点, 该节点及其所有子节点将会被移除 img
标签仅支持网络图片
1.7 button
<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
default
</button>
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
size | string | default | 否 | 按钮的大小 |
type | string | default | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空, 背景色透明 |
disabled | boolean | false | 否 | 是否禁用 |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
form-type | string | 否 | 用于''组件, 分别会触发 ''组件的 | |
open-type | string | 否 | 微信开发能力 |
1.7.1 size 的合法值
值 | 说明 |
---|---|
default | 默认大小 |
mini | 小尺寸 |
1.7.2 type 的合法值
值 | 说明 |
---|---|
primary | 绿色 |
default | 白色 |
warn | 红色 |
1.7.3 form-type的合法值
值 | 说明 |
---|---|
submit | 提交表单 |
reset | 重置表单 |
1.7.4 open-type 的合法值
值 | 说明 |
---|---|
contact | 打开客服会话, 如果用户在会话中点击消息卡片后返回小程序, 可以从 bindcontact 回调中获得具体信息 |
share | 触发用户转发 |
getPhoneNumber | 获取用户手机号, 可以从bindgetphonenumber 回调中获取到用户信息` |
launchApp | 打开 APP, 可以通过app-parameter 属性设定向APP传的参数 |
openSetting | 打开授权设置页 |
feedback | 打开"意见反馈"页面, 用户可提交反馈内容并上传日志, 开发者可以登录小程序管理后台后进入左侧菜单 "客服反馈"页面获取到反馈内容 |
1.8 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 |
js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
wxml
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
1.9 radio
可以通过 color属性来修改颜色
需要搭配 radio-group
⼀起使⽤
1.10. checkbox
可以通过 color属性来修改颜色
需要搭配 checkbox-group
⼀起使⽤
微信小程序学习笔记五 常见组件的更多相关文章
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 【微信小程序学习笔记】入门与了解
[微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...
- 微信小程序学习笔记一 小程序介绍 & 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 微信小程序学习笔记(阶段一)
一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...
- 微信小程序学习笔记以及VUE比较
之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...
- 微信小程序学习笔记1--小程序的代码构成
最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...
- 微信小程序学习笔记(3)--------框架之配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json 配置项列表 属性 类型 必填 描述 pages Stri ...
- 微信小程序学习笔记(1)-微信小程序样式设置逻辑
1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...
随机推荐
- Redis学习——数据结构上
一.常用的全局命令 1.查看所有的键: KEYS * KEYS pattern:查找所有符合给定模式 pattern 的 key . KEYS 的速度非常快,但在一个大的数据库中使用它仍然可能造成性能 ...
- 前端早读课:JavaScript函数的6个基本术语
lambdas(匿名函数) 箭头函数. const lambda = (a, b) => a + b; first-class functions(头等函数) 该类型可以用作变量的值. docu ...
- Dijkstra和堆优化
Dijkstra算法 由于我之前一直记的迪杰斯特拉的翻译导致我把dijkstra写成了dijstra--所以下文#define dijstra dijkstra 我以后叫她迪杰克斯歘! Dijskra ...
- 什么是jstl表达式,怎么应用
1.介绍 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样也是要代替jsp页面中的脚 ...
- spring Data Rest 远程命令执行漏洞(CVE-2017-8046)
参考 文章https://blog.csdn.net/weixin_41438728/article/details/110425174 影响版本 Spring Framework 5.0 to 5. ...
- 【Azure 应用服务】Azure Function HTTP 触发后, 230秒就超时。而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间?
问题描述 Azure Function HTTP 触发后, 230秒就超时,而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间? 问题分析 查阅官方文档,对函数应用超时持续时间有 ...
- Github连接远程仓库详细操作
首先 咱们需要配置ssh密钥 如何生成密钥呢 我们先来看下命令 在桌面新建一个文件夹,命名规范尽量不要使用中文,然后在文件夹内 新建测试文本: 如图 在文件夹内空白处右击进入GIt b ...
- 对抗防御之对抗样本检测(一):Feature Squeezing
引言 在之前的文章中,我们介绍了对抗样本和对抗攻击的方法.在该系列文章中,我们介绍一种对抗样本防御的策略--对抗样本检测,可以通过检测对抗样本来强化DNN模型.本篇文章论述其中一种方法:feature ...
- Markdown插入LaTex数学公式
本文转载自Nautilus_sailing的试试LaTeX插入数学公式,内容有所改动 今天写了一篇随笔,其中需要写几个数学式子,但是我又不想直接将公式做成图片后插入,我觉得很不美观还麻烦.但是我也不会 ...
- vue3.0安装
一 .vue3.0安装 vue3.0安装 个人推荐以下2种 (1). 开发工具的对应代码中 插入CDN <script src="https://unpkg.com/vue@next& ...