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

  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制 (只有该标签有这个功能)
  4. 可以对空格 回车 进行编码
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
decode Boolean false 是否解码
  <!-- text 标签测试 -->
<text selectable="false" decode="false">
普&nbsp;通
</text>

1.3 image

  1. 图片标签, image组件默认宽度320px、高度240px
  2. 支持懒加载
属性名 类型 默认值 说明
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&nbsp;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, 支持 class
  • name 属性大小写不敏感
  • 如果使用了不受信任的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. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  2. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  3. 【微信小程序学习笔记】入门与了解

    [微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...

  4. 微信小程序学习笔记一 小程序介绍 & 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  5. 微信小程序学习笔记(阶段一)

    一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...

  6. 微信小程序学习笔记以及VUE比较

    之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...

  7. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

  8. 微信小程序学习笔记(3)--------框架之配置

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json 配置项列表 属性 类型 必填 描述 pages Stri ...

  9. 微信小程序学习笔记(1)-微信小程序样式设置逻辑

    1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...

随机推荐

  1. Redis学习——数据结构上

    一.常用的全局命令 1.查看所有的键: KEYS * KEYS pattern:查找所有符合给定模式 pattern 的 key . KEYS 的速度非常快,但在一个大的数据库中使用它仍然可能造成性能 ...

  2. 前端早读课:JavaScript函数的6个基本术语

    lambdas(匿名函数) 箭头函数. const lambda = (a, b) => a + b; first-class functions(头等函数) 该类型可以用作变量的值. docu ...

  3. Dijkstra和堆优化

    Dijkstra算法 由于我之前一直记的迪杰斯特拉的翻译导致我把dijkstra写成了dijstra--所以下文#define dijstra dijkstra 我以后叫她迪杰克斯歘! Dijskra ...

  4. 什么是jstl表达式,怎么应用

    1.介绍 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样也是要代替jsp页面中的脚 ...

  5. spring Data Rest 远程命令执行漏洞(CVE-2017-8046)

    参考 文章https://blog.csdn.net/weixin_41438728/article/details/110425174 影响版本 Spring Framework 5.0 to 5. ...

  6. 【Azure 应用服务】Azure Function HTTP 触发后, 230秒就超时。而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间?

    问题描述 Azure Function HTTP 触发后, 230秒就超时,而其他方式触发的Function, 执行5分钟后也超时,如何调整超时时间? 问题分析 查阅官方文档,对函数应用超时持续时间有 ...

  7. Github连接远程仓库详细操作

    首先 咱们需要配置ssh密钥   如何生成密钥呢    我们先来看下命令 在桌面新建一个文件夹,命名规范尽量不要使用中文,然后在文件夹内  新建测试文本: 如图   在文件夹内空白处右击进入GIt b ...

  8. 对抗防御之对抗样本检测(一):Feature Squeezing

    引言 在之前的文章中,我们介绍了对抗样本和对抗攻击的方法.在该系列文章中,我们介绍一种对抗样本防御的策略--对抗样本检测,可以通过检测对抗样本来强化DNN模型.本篇文章论述其中一种方法:feature ...

  9. Markdown插入LaTex数学公式

    本文转载自Nautilus_sailing的试试LaTeX插入数学公式,内容有所改动 今天写了一篇随笔,其中需要写几个数学式子,但是我又不想直接将公式做成图片后插入,我觉得很不美观还麻烦.但是我也不会 ...

  10. vue3.0安装

    一 .vue3.0安装 vue3.0安装 个人推荐以下2种 (1). 开发工具的对应代码中 插入CDN <script src="https://unpkg.com/vue@next& ...