常见组件
重点为小程序中常用的布局组件
view,text,rich-text,button,image,navigator,icon,swipe,radio,checkbox
等
文章目录
view
代替原来的div
标签
<view hover-class="h-class">
点我试试
</view>
属性 | 说明 |
---|---|
hover-class | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | 手指松开后点击态保留时间,单位毫秒 |
text
- 文本标签
- 只能嵌套text
- 长按文本可以复制(只有该标签有这个功能)
- 可以对空格 回车 进行编码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
user-select | Boolean | false | 文本是否可选,该属性会使文本节点显示为 inline-block |
space | String | 显示连续空格 | |
decode | Boolean | false | 是否解码,不解码 就无法转换为空格 |
image
-
图片标签,image组件默认宽度为320px、高度为240px
-
支持懒加载
-
图片地址只能是外部地址,可以将本地的图片转为外部链接,点击创建链接
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 图片资源地址 | |
mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
lazy-load | Boolean | false | 图片懒加载 |
mode的合法值
- scaleToFill 默认值 不保持纵横比缩放图片,使用图片的宽高完全拉伸至填满image元素
- aspectFit 保持宽高比,确保图片的长边显示出来,页面轮播图常用
- aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来,少用
- widthFix 以前web的图片,宽度指定之后,高度会自己按照比例来调整,常用
- bottom 类似以前的background-position
swiper 轮播图组件
-
轮播图外层容器 swiper
-
每一个轮播项 swiper-item
-
swiper标签 存在默认样式
- width 100%
- height 150px image存在默认宽度和高度 320*240
- swiper 高度 无法实现由内容撑开
-
先找到 原图的宽度和高度 等比例 给swiper定 宽度和高度
设 原图的宽度和高度为 1125 * 352 px
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height: 100vm * 352 / 1125
-
autoplay 自动轮播
-
interval 修改轮播时间
-
circular 衔接轮播
-
indicator-dots 显示 指示器 分页器 索引器,即轮播图下的小圆点
-
indicator-active-color 选中的时候的指示器的颜色
navigator 导航组件
导航组件,类似超链接标签
-
块级元素,默认会换行,可以直接加宽度和高度
-
target 要跳转到当前的小程序 还是其他的小程序的页面
self——>当前小程序
miniProgram——>其他的小程序
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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"时生效 |
rich-text 富文本
富文本标签
可以将字符串解析成对应标签,类似vue中
v-html
- nodes属性来实现
- 接收标签字符串
- 接收对象数组
<rich-text nodes="{{a}}"></rich-text>
标签字符串
Page({
data:{
a:'<div><span>hello world</span></div>' //注意不要换行,否则会报错
}
})
对象数组
Page({
data:{
a:[
{
// 1.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"
}
]
}
]
}
]
}
})
button
外观属性
- size控制按钮的大小
- default 默认大小
- mini 小尺寸
- type控制按钮的颜色
- default 按钮为灰色
- primary 按钮为绿色
- warn 字体为红色
- plain按钮是否镂空,背景色透明
- loading名称前是否带loading图标
开放能力
open-type的合法值
值 | 说明 |
---|---|
contact | 打开客服会话,如果客户在会话中点击信息卡片后返回小程序,可以从bindcontact回调中获得具体信息,只能打开真机调试 |
share | 触发用户转发,不能将小程序分享到朋友圈中 |
getPthoneNumber | 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息, 不是企业的小程序,没有权限获取 |
getUserInfo | 获取用户信息,可以从bindgetuserinfo回调中获取用户信息 |
launchApp | 打开APP,可以通过app-parameter属性设定项APP传的参数 |
openSetting | 打开授权设置页 |
feedback | 打开”意见反馈“页面,用户可提交反馈内容并上传日志。开发者可以登录 小程序管理后台 进入左侧菜单”客服反馈“页面获取反馈内容 |
contact
- 将小程序的
appid
由测试号改为自己的appid
- 登录微信小程序官方,添加
客服-微信
getPthoneNumber
-
绑定一个事件 bindgetPhonenumber
-
在事件的回调函数中 通过参数来获取信息
-
获取到的信息已经加密过
需要用户自己搭建小程序的后台服务器,在后台服务器中进行解析 手机号码 再返回小程序中,就可以看到信息了
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
Page({
getPhoneNumber(e){
consoloe.log(e);
}
})
getUserInfo
- 该属性和getPhoneNumber属性的使用方法相同
- 可以直接获取,不需要加密的手段
launchApp
- 需要先在app中通过app的某个链接 打开 小程序
- 在小程序 中 通过 这个功能重新打开app
openSetting
- 授权页面中 只会出现 用户曾点击过的权限
feedback
- 这能够通过真机调试
icon 小图标
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
type | string | 是 | icon的类型,有效success, success_no_circle, info, warn, waiting, cancel, download,search,clear |
size | number/string | 否 | icon的大小 |
color | string | 否 | icon的颜色,同css的color |
radio 单选框
- radio标签 必须要和 父元素
radio-group
来使用 - value 选中的单选框的值
- 需要给radio-group 绑定change事件
<radio-group bindchange="handleChange">
<radio>男</radio>
<radio>女</radio>
</radio-group>
checkbox 复选框
<checkbox-group>
<checkbox wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
list:[{
id:0,
name:"apple"
},{
id:0,
name:"banana"
}]