(一) 常用标签
组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 WSS 和 别的一些强大的组件了,如果有额外的需求,可以去官方文档查阅一下 (同时不常用的属性,也就不提了)
https://developers.weixin.qq.com/miniprogram/dev/component/
(1) view
view 可以理解为传统页面开发中的 div 块级元素,使用 view 会换行
关于 view 标签,还有一些额外的属性,说的也很清楚,但是前期的话,其实不考虑这个也是可以的,就单纯的当做一个布局的 div 来用
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | 1.0.0 |
hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间,单位毫秒 | 1.0.0 |
(2) text
text 可以理解为传统页面中的 span 行内元素,text 不会换行
text 涉及的一些标签
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
selectable | boolean | false | 否 | 文本是否可选 | 1.1.0 |
space | string | 否 | 显示连续空格 | 1.4.0 | |
decode | boolean | false | 否 | 是否解码 | 1.4.0 |
space 的合法值
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
decode可以解析的有
< > & '    
简单测试一下其中两个,可以看到,后者长按可以选择文字,同时编码被解析成空格,前者反之
<text selectable="{{false}}" decode="{{false}}">测 试</text>
<text selectable="{{true}}" decode="{{true}}">测 试</text>
(3) image
image 就是图片相关的一个组件,这个组件默认宽度320px、⾼度240px,同时支持懒加载
我摘了三个比较常用的属性出来
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | 图片资源地址 | 1.0.0 | |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
lazy-load | boolean | false | 否 | 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 | 1.5.0 |
他作为图片的一个承载物,我们重点多说一下关于 mode 的问题,也就是图片的显示形式
所以先来看一下,mode 的取值范围(节选了相对常用的,其余的取值都属于裁剪类型)
值 | 说明 | 最低版本 |
---|---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 | |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 | |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 | 2.10.3 |
比较常用是 widthFix,在这几个其中,aspectFill 相对还是用的比较少的
(4) swiper
这个组件,是小程序页面中的一个轮播图的效果
swiper
是轮播图的一个总的容器,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 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
显示比例问题
首先说明一下,swiper存在一些默认的样式
- width: 100%
- height 150px
image 默认宽高
- width: 320px
- height: 240px
如果,swiper 的高度出现了问题,给出一个解决方式
先根据素材图片的宽高比例,等比计算 swiper 的宽高,这样高度就换算出来了
swiper 高度 = swiper 宽度 * 素材高度 / 素材宽度
即:height: 750rpx * 素材高度 / 素材宽度
来看个综合一些的例子
WXML
图片随便自己做了两张
<swiper autoplay="{{true}}" interval="5000" circular="{{true}}" indicator-dots="{{true}}"
indicator-color="#D3D3D3" indicator-active-color="#FFFF00">
<swiper-item><image mode="widthFix" src="../../image/swiperC.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../image/swiperB.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../image/swiperA.jpg"></image></swiper-item>
</swiper>
WXSS
swiper{
width: 100%;
height: calc(750rpx * 275 / 1000);
}
image{
width: 100%;
}
看一下效果,现在就实现了轮播图的效果,同时会5秒自动循环轮播,自己可以对照属文档进行定制修改
(5) navigator
导航组件,这块可以理解为传统页面开发的超链接标签
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
target | string | self | 否 | 在哪个目标上发生跳转,默认当前小程序 | 2.0.7 |
url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
open-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
navigate | 保留当前页面,跳转到应用内的某个页面,但是不能跳到tabbar 页面 | |
redirect | 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar 页面 | |
switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | |
reLaunch | 关闭所有页面,打开到应用内的某个页面 | 1.1.0 |
navigateBack | 关闭当前页面,返回上⼀页面或多级页面。可通过 getCurrentPages() 获取当 | 1.1.0 |
exit | 退出小程序,target=miniProgram时⽣效 | 2.1.0 |
下面给出一个测试的代码,默认不添加 open-type
的写法会有一个返回上一层的
<navigator url="/pages/test06/test06">默认跳转到test06</navigator>
<navigator open-type="redirect" url="/pages/test06/test06">redirect跳转到test06</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab跳转到主页</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch跳转到主页</navigator>
(6) rich-text
这是一个富文本标签,作用就是把字符串中的对应标签解析出来,其主要的一个属性就是 nodes
,我们先简单看一下 nodes的属性有哪些
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | 支持部分受信任的属性,遵循 Pascal 命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
来看一个例子,这个nodes 的值,我们去 js 中定义一个
<rich-text nodes="{{receive}}"></rich-text>
有两种方式赋值,一种就是我注释掉的那一行,直接使用一个含有标签的字符串,直接赋值就会解析,另一种就是通过后面这样 JSON 的一种格式赋值,效果是一样的
Page({
data: {
// receive:'<div class="div_class"><h3>理想二旬不止</h3></div>'
receive:[{
name:'div',
attrs:{
class:'div_class'
},
children:[{
name:'h3',
attrs:{},
children:[{
type:'text',
text:'理想二旬不止'
}]
}]
}]
},
})
(7) button
按钮标签,也算是非常常用的内容了,同时相比较传统页面开发中的按钮,微信小程序中又有很多开放式的功能,首先看一些涉及的一些属性(更多内容可以看官网文档):
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
size | string | default | 否 | 按钮的大小 | 1.0.0 |
type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
plain | boolean | false | 否 | 按钮是否镂空,背景色透明 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
loading | boolean | false | 否 | 名称前是否带 loading 图标 | 1.0.0 |
form-type | string | 否 | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 | 1.0.0 | |
open-type | string | 否 | 微信开放能力 | 1.10 |
size 的合法值
值 | 说明 |
---|---|
default | 默认大小 |
mini | 小尺寸 |
type 的合法值
值 | 说明 |
---|---|
primary | 绿色 |
default | 白色 |
warn | 红色 |
form-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
submit | 提交表单 | |
reset | 重置表单 |
open-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息 | 1.1.0 |
share | 触发用户转发,使用前建议先阅读 | 1.2.0 |
getPhoneNumber | 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息 | 1.2.0 |
getUserInfo | 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 | 1.3.0 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数 | 1.9.5 |
openSetting | 打开授权设置页 | 2.0.7 |
feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 | 2.1.0 |
这几个代码就是通过 size
、type
进行基本的大小或者说类型实现一个样式
<button style="width:100%">默认按钮</button>
<button style="width:100%" size="mini">mini 默认按钮</button>
<button style="width:100%" type="primary">primary 按钮</button>
<button style="width:100%" type="warn">warn 按钮</button>
<button style="width:100%" type="warn" plain>plain 按钮</button>
下面就是一些开放的功能
<button style="width:100%" open-type="contact">联系客服</button>
<button style="width:100%" open-type="share">分享小程序</button>
<button style="width:100%" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
获取电话号码
</button>
<button style="width:100%" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
获取用户信息
</button>
<button style="width:100%" open-type="launchApp">打开App</button>
<button style="width:100%" open-type="openSetting">打开授权设置页</button>
<button style="width:100%" open-type="feedback">意见反馈</button>
需要说明的几个点:
- 联系客服这个功能只能在真机调试,需要先在后台绑定一个客服的微信号码,接着在开发工具中选择真机调试,然后扫描二维码就可以了
- 获取电话号码,以及用户信息,需要结合事件来做,例如:
Page({
// 获取用户的手机号码信息
getPhoneNumber(e){
console.log(e);
},
// 获取用户个人信息
getUserInfo(e){
console.log(e);
}
})
例如获取用户信息
但是电话号码,不是企业的小程序账号 没有权限来获取用户的手机号码
-
打开App,是在 app 中 通过 app 的某个链接打开小程序,然后在小程序 再通过这个功 重新打开 app
-
当前版本的微信小程序,在.wxss文件里设置Button宽度无效,网络上的一种解决方案就是把 app.json里的 style: v2语句删掉,还有一种就是像我代码中一样,直接加 style,暂时推荐后者吧,此处未深究
(8) icon
微信小程序默认封装了一些图标,也很简单,只有三个属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
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 |
简单用一下
<icon type="success" size="50"> </icon>
<icon type="success" size="50" color="#3390ff"> </icon>
如果不指定颜色,其默认都是有一定颜色样式的,如果指定了 color 就会覆盖掉原来的颜色
(9) radio
单选框组件,需要配合 radio-group 使用,下面看代码就明白了
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 否 | radio标识。当该radio选中时,radio-group 的 change 事件会携带 radio 的 value | 1.0.0 | |
checked | boolean | false | 否 | 当前是否选中 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
color | string | #09BB07 | 否 | radio的颜色,同css的color | 1.0.0 |
简单用一下,
<radio-group bindchange="handleChange">
<radio color="blue" value="male">男</radio>
<radio color="blue" value="female" >女</radio>
</radio-group>
<view>你选择的性别是:{{gender}}</view>
js 内容,至于 e.detail.value 如何来的,可以通过 console.log(e) 打印看到
Page({
data: {
gender: ""
},
handleChange(e){
// 获取单选框中的值
let gender=e.detail.value;
// 把值 赋值给 data中的数据
this.setData({
gender
})
}
})
(10) checkbox
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 否 | checkbox 标识,选中时触发 checkbox-group 的 change 事件,并携带 checkbox 的 value | 1.0.0 | |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
checked | boolean | false | 否 | 当前是否选中,可用来设置默认选中 | 1.0.0 |
color | string | #09BB07 | 否 | checkbox的颜色,同css的color | 1.0.0 |
直接用一下
<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
<view>
选中的内容:{{checkedList}}
</view>
</view>
Page({
data: {
list:[
{
id:0,
name:"