6 常见组件
常见组件
常⽤的布局组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等等
1 view
2 text
1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码
<!-- 1 长按文字复制 selectable 2 对文本内容 进行 解码 --> <text selectable decode> text 123 < </text>
3 image 图片标签
<!-- image 图片标签 1 src 指定要加载的图片的路径 图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100 2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配 1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 2 aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图 常用 3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。 少用 4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整 常用 5 bottom。。 类似以前的backgroud-position 3 小程序当中的图片 直接就支持 懒加载 lazy-load 1 lazy-load 会自己判断 当 图片 出现在 视口 上下 三屏的高度 之内的时候 自己开始加载图片 --> <image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />
4 swiper 轮播图
/* pages/demo10/demo10.wxss */ swiper { width: 100%; /* height: calc(100vw * 352 / 1125); */ height: 31.28vw; } image { width: 100%; }
<!-- 1 轮播图外层容器 swiper 2 每一个轮播项 swiper-item 3 swiper标签 存在默认样式 1 width 100% 2 height 150px image 存在默认宽度和高度 320 * 240 3 swiper 高度 无法实现由内容撑开 4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度 原图的宽度和高度 1125 * 352 px swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度 height: 100vw * 352 / 1125 5 autoplay 自动轮播 6 interval 修改轮播时间 7 circular 衔接轮播 8 indicator-dots 显示 指示器 分页器 索引器 9 indicator-color 指示器的未选择的颜色 10 indicator-active-color 选中的时候的指示器的颜色 --> <swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"> <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item> <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item> <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item> </swiper>
5 navigator 导航组件
<!-- 导航组件 navigator 0 块级元素 默认会换行 可以直接加宽度和高度 1 url 要跳转的页面路径 绝对路径 相对路径 2 target 要跳转到当前的小程序 还是其他的小程序的页面 self 默认值 自己 小程序的页面 miniProgram 其他的小程序的页面 3 open-type 跳转的方式 1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面 2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。 3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 4 reLaunch 关闭所有页面，打开到应用内的某个页面 --> <navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator> <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator> <navigator open-type="redirect" url="/pages/demo10/demo10"> 轮播图页面 redirect </navigator> <navigator open-type="switchTab" url="/pages/index/index"> switchTab直接跳转到 tabbar页面 </navigator> <navigator open-type="reLaunch" url="/pages/index/index"> reLaunch 可以随便跳 </navigator>
6 rich-text 富文本标签
// pages/demo12/demo12.js Page({ data: { // 1 标签字符串 最常用的 // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url("https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp"); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>' // 2 对象数组 html:[ { // 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" } ] } ] } ] } })
<!-- rich-text 富文本标签 1 nodes属性来实现 1 接收标签字符串 2 接收对象数组 --> <rich-text nodes="{{html}}"></rich-text>
7 button按钮
// pages/demo13/demo13.js Page({ // 获取用户的手机号码信息 getPhoneNumber(e){ console.log(e); }, // 获取用户个人信息 getUserInfo(e){ console.log(e); } })
<!-- button 标签 1 外观的属性 1 size 控制按钮的大小 1 default 默认大小 2 mini 小尺寸 2 type 用来控制按钮的颜色 1 default 灰色 2 primary 绿色 3 warn 红色 3 plain 按钮是否镂空，背景色透明 4 loading 文字前显示正在等待图标 --> <button>默认按钮</button> <button size="mini"> mini 默认按钮</button> <button type="primary"> primary 按钮</button> <button type="warn"> warn 按钮</button> <button type="warn" plain> plain 按钮</button> <button type="primary" loading> loading 按钮</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 3 找到 京东的app 和 京东的小程序 6 openSetting 打开小程序内置的 授权页面 1 授权页面中 只会出现 用户曾经点击过的 权限 7 feedback 打开 小程序内置的 意见反馈页面 1 只能够通过真机调试来打开 --> <button open-type="contact">contact</button> <button open-type="share">share</button> <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button> <button open-type="launchApp">launchApp</button> <button open-type="openSetting">openSetting</button> <button open-type="feedback">feedback</button>
open-type 的 contact的实现流程
8 icon
<!-- 小程序中的字体图标 1 type 图标的类型 success|success_no_circle|info|warn|waiting|cancel|download|search|clear 2 size 大小 3 color 图标的颜色 --> <icon type="cancel" size="60" color="#0094ff"> </icon>
9 radio 单选框
<!-- radio 单选框 1 radio标签 必须要和 父元素 radio-group来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change事件 4 需要在页面中显示 选中的值 --> <radio-group bindchange="handleChange"> <radio color="red" value="male">男</radio> <radio color="red" value="female" >女</radio> </radio-group> <view>您选中的是:{{gender}}</view>
// pages/demo15/demo15.js Page({ data: { gender: "" }, handleChange(e){ // 1 获取单选框中的值 let gender=e.detail.value; // 2 把值 赋值给 data中的数据 this.setData({ // gender:gender gender }) } })
10 checkbox 复选框
// pages/demo16/demo16.js Page({ data: { list:[ { id:0, name:"🍎", value:"apple" }, { id:1, name:"🍇", value:"grape" }, { id:2, name:"🍌", value:"bananer" } ], checkedList:[] }, // 复选框的选中事件 handleItemChange(e){ // 1 获取被选中的复选框的值 const checkedList=e.detail.value; // 2 进行赋值 this.setData({ checkedList }) } })
<view> <checkbox-group bindchange="handleItemChange"> <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id"> {{item.name}} </checkbox> </checkbox-group> <view> 选中的水果:{{checkedList}} </view> </view>
作者：华王
博客：https://www.cnblogs.com/huahuawang/
浙公网安备 33010602011771号