2、小程序基础二
小程序组件
小程序的WXML中也有类似HTML超文本语言里面的一些元素,在小程序内,称之为组件,开发者可以基于组件快速搭建出漂亮的页面结构,其实它本身就是借鉴HTML诞生的一个产物,在WXML内,可用组件非常的多,在HTML内常见的文本元素、容器元素、媒体元素等,在WXML内都有相关的实现;
占位符组件
在小程序内,也有像Vue里面的template一样的占位符组件,即block组件,它不会在页面中渲染,它的诞生,比较常见的一个功能,就是为了循环语句的使用,我们可以直接将循环语句写在block组件中,这样,我们就无需为了循环语句去额外创建一个组件,提高代码的可读性,如下示例;
<!-- pages/page/page.wxml -->
<!-- block组件 -->
<block wx:for="{{2}}" wx:key="*this">
<text>{{ item }}</text>
</block>
<!-- 其他组件 -->
<view wx:for="{{2}}" wx:key="*this">
<text>{{ item }}</text>
</view>
文本组件
这里说的文本组件,其实就类似HTML的span元素,在小程序内,文本组件为text,同样的,它也是一个行内元素,在同一行显示,但虽然借鉴了HTML语言,但是小程序官方其实也在text组件上,做了很多的优化,提供了很多丰富的功能,如下示例;
user-select:boolean类型,表示文本是否可以选中;
space:字符串类型,设置空格的长度类型;
ensp:中文字符空格一半大小;
emsp:中文字符空格大小;
nbsp:根据字体设置的空格大小;
decode:Boolean类型,表示是否解码,可解码的特殊字符有 、<、>、&、&apos、&ensp、&emsp;
对于text组件的使用,其实非常的简单,如下,这就是text组件可用的几个属性的效果;
<!--pages/page/page.wxml-->
<view>
<text user-select>文本可选</text>
</view>
<view>
<text space="emsp">空格长度 emsp</text>
</view>
<view>
<text space="ensp">空格长度 ensp</text>
</view>
<view>
<text decode>字符 解码</text>
</view>
按钮组件
小程序内的按钮组件和HTML内的按钮组件,名称是一样的,但是在WXML内,button组件是一个块级元素,独占一行,而在HTML内,按钮组件是一个行内元素,这一点有做改动,同时,在WXML内,官方为button组件根据多年的用户习惯,新增了很多的参数,常用参数如下;
size:字符串类型,设置按钮的大小,default为默认大小,大尺寸,mini为小尺寸;
type:字符串类型,设置按钮的样式类型,primary为绿色,default为白色,warn为红色;
plain:布尔值类型,表示按钮是否镂空,背景色透明(除边框);
disabled:布尔值类型,表示按钮是否禁用;
loading:布尔值类型,表示按钮名称前是否现实loading图标;
form-type:字符串类型,用于form组件,点击分别会触发form组件的submit/reset事件;
hover-class:字符串类型,指定按钮按下去的样式类,默认为none没有点击态效果;
hover-stop-propagation:布尔值类型,指定是否阻止本节点的祖先节点出现点击态;
hover-start-time:字符串类型,按住后多久出现点击态效果,单位毫秒,默认20毫秒;
hover-stay-time:字符串类型,表示按钮松开后点击态保留多长时间,单位毫秒,默认70毫秒;
button组件的属性非常之多,在官网,我们可以看到,还有一个属性,没有在这里罗列出来,即open-type,该属性需要在获取用户信息的基础之上使用,在小程序发展到今天,该属性已被废弃,我们应该使用小程序API的方式来实现,所以在button组件上,也不推荐使用这种存在交互性的属性;
如下,这就是button组件的基础能力演示,
<!--pages/page/page.wxml-->
<button hover-class="active" size="mini" hover-class="active">测试</button>
视图容器
在HTML内,div元素,一般作为一个容器来进行页面布局,那么小程序内,其实也有实现这种功能的一个组件,它就是view组件,该组件的本质其实就和HTML的div元素类似,它是一个块级元素,通常作为容器组件,来承载其它组件或实现页面布局,同样的,小程序也对其进行了增强,但是感觉实际用途也不是非常大,如下;
hover-class:字符串类型,用来设置按下去的样式类,当hover-class="none"时,没有点击态效果;
hover-stop-propagation:布尔值类型,指定是否阻止本节点的祖先节点出现点击态,说白了就是冒泡事件传递,默认不阻止;
hover-start-time:数字类型,表示按住后多久出现点击态,单位毫秒,默认50毫秒;
hover-stay-time:数字类型,表示手指松开后点击态保留时间,单位毫秒,默认400毫秒;
滚动视图容器
在小程序内,有一个可滚动的视图容器,即当容器内的元素大到撑开自己的宽或者高的时候,可以开启滚动条,滚动条分上下滚动和左右滚动,其实我们通过view结合样式完全也可以实现,但是官方为了高效开发,直接给我们内置了这么一个组件,即scroll-view,该组件的方法非常之多,如下;
scroll-x:boolean值,默认为false,表示开启横向滚动,此时我们需要元素向右撑开scroll-view的默认宽度;
scroll-y:boolean值,默认为false,表示开启纵向滚动,此时我们需要元素向下撑开scroll-view的默认高度;
upper-threshold:number或string值,默认50,表示距顶部或左边多远时,触发scrolltoupper事件;
lower-threshold:number或string值,默认50,表示距底部/右边多远时,触发scrolltolower事件;
scroll-top:number/string值,设置竖向滚动条位置;
scroll-left:number或string值,设置横向滚动条位置;
enable-flex:boolean值,默认false,表示是否启用flexbox布局,开启后,当前节点声明了display: flex就会成为flex container,并作用于其孩子节点;
上拉滚动
对于上下滚动,scroll-view必须有一个高度,如果没有高度,那么就会随着内容变大而撑大,从而无法实现上拉滚动的效果,如下示例;
<!-- pages/page/page.wxml -->
<scroll-view style="height: 100px;" scroll-y>
<view style="height: 100px;background-color: red;">
<text>1</text>
</view>
<view style="height: 100px;background-color: green;">
<text>1</text>
</view>
</scroll-view>
下拉滚动
对于下拉滚动来讲,一般都会给scroll-view组件开启flex布局,让其可以随着内容变多,而向右扩展,如下示例;
<!-- pages/page/page.wxml -->
<scroll-view style="height: 100px;display: flex;" scroll-x enable-flex>
<view style="width: 100px;height:100px;background-color: red;flex-shrink: 0;"/>
<view style="width: 100px;height:100px;background-color: green;flex-shrink: 0;"/>
<view style="width: 100px;height:100px;background-color: blue;flex-shrink: 0;"/>
<view style="width: 100px;height:100px;background-color: blueviolet;flex-shrink: 0;"/>
</scroll-view>
图片组件
在小程序的WXML内也有和HTML内一样展示图片的组件,即image组件,该组件支持JPG、PNG、SVG、WEBP、GIF等格式,同样的,小程序也给它门赋予了很多的功能,通过参数来实现,最主要的参数为mode,如下示例;
src:字符串类型,设置图片的资源地址;
mode:字符串类型,设置图片裁剪或缩放的模式;
scaleToFill:默认值,表示不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素;
aspectFit:表示保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整地将图片显示出来;
aspectFill:表示缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取;
widthFix:表示宽度不变,高度自动变化,保持原图宽高比不变;
heightFix:表示高度不变,宽度自动变化,保持原图宽高比不变;
top:表示不缩放图片,只显示图片的顶部区域;
bottom:表示不缩放图片,只显示图片的底部区域;
center:表示不缩放图片,只显示图片的中间区域;
left:表示不缩放图片,只显示图片的左边区域;
right:表示不缩放图片,只显示图片的右边区域;
top left:表示不缩放图片,只显示图片的左上边区域;
top right:表示不缩放图片,只显示图片的右上边区域;
bottom left:表示不缩放图片,只显示图片的左下边区域;
bottom right:表示不缩放图片,只显示图片的右下边区域;
show-menu-by-longpress:布尔值类型,表示长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单;
binderror:值为事件回调函数,表示当图片加载失败时,会回调对应的事件处理函数,且在event对象内加入detail属性,加载错误的信息;
bindload:值为事件回调函数,表示当图片加载完成时,会回调对应的事件处理函数,且在event对象内加入detail属性,该属性是一个对象,里面存储图片的高和宽信息;
图标组件
在小程序内,还提供图标组件,我们可以用于提示、用于按钮等应用场景,根据不同场景的icon,都有不同的类型,如下示例;
type:字符串类型,指定icon的类型,有效值为success、success_no_circle、info、warn、waiting、cancel、download、search、clear;
size:number/string值,默认23px,指定icon的大小,单位默认为px,2.4.0起支持传入单位(rpx/px);
color:字符串类型,指定icon的颜色,同css的color;
这种图标组件在软件开发中非常常见,应用也非常广泛,如下示例;
<!-- pages/page/page.wxml -->
<view>
<icon type="success" />
<icon type="success_no_circle" />
<icon type="info" />
<icon type="warn" />
<icon type="waiting" />
<icon type="cancel" />
<icon type="download" />
<icon type="search" />
<icon type="clear" color="red"/>
</view>
组件共同属性
在小程序内,每个组件都可能有非常多的属性,但是在WXML中所有的组件其实都有一些共有属性,如下示例;
id:字符类型,组件唯一的标识;
class:组件的样式类;
style:组件的内联样式;
hidden:组件是否显示;
data-var_name:自定义属性,当组件触发事件时,该属性值,会在回调事件函数时,以参数的形式发送给回调函数,然后在事件回调函数中,我们可以通过event.target.dataset.var_name获取这个数据;
bind*/catch*:组件事件;
数据双向绑定
在WXML中,普通的属性的绑定是单向的,也就是说它并不支持根据data内属性的变化动态修改input的值,那么在基础库2.9.3版本开始,支持了数据双向绑定的功能,貌似其借助了Vue的思想使用model:value的方式,来指定data对象内的属性名称,但是我们需要知道的是,我们在修改data对象内的属性时,需要借助this.setData函数来实现响应式,如下示例;
<!-- pages/page/page.wxml -->
<input type="text" model:value="{{ counter }}" />
<button size="mini" type="primary" bindtap="changeText">修改数据</button>
// pages/page/page.js
Page({
data: {
counter: 1
},
changeText() {
this.setData({
counter: this.data.counter + 1
})
}
})
WXSS
对于小程序的WXSS,其实它就是沿用了CSS,只不过在CSS基础之上做了一些基础的增强和优化,小程序样式的写法一共有三种,行内样式、页面样式和全局样式;
行内样式就是直接在组件之上使用style属性来对样式进行一些设置,页面样式就是在页面内的wxss文件内通过样式选择器来对不同的组件定义样式,而全局样式则是在下面根目录下的wxss文件里面使用样式选择器来对不同的组件定义样式,只不过全局样式是对全局生效的,页面样式仅对单个页面生效;
这三种样式基本也没什么好演示的,只要学好CSS基本上在小程序内就可以直接使用,我们只需要记住它们的优先级即可,如下;
小程序样式优先级:行内样式 -> 页面样式 -> 全局样式
同时,在小程序内,有一点我们需要注意,就是样式选择器,小程序的样式选择器没有CSS种类那么多,目前小程序支持的选择器一共有六种,如下;
选择器
|
样例
|
样例描述
|
.class
|
.intro
|
选择所有拥有class=”intro”的组件
|
#id
|
#frstname
|
选择所有拥有id=”firstname”的组件
|
element
|
view
|
选择所有view组件
|
element,element
|
view,checkbox
|
选择WXML文档内的view组件和checkbox组件
|
::after
|
view::after
|
在view组件后面插入内容
|
::before
|
view::before
|
在view组件前面插入内容
|
其实并非这六种,经过测试,CSS的一些其他样式,在小程序内也是适用的,比如后代选择器、子孙选择器等等;
尺寸单位
在小程序内,多了一个尺寸单位,即rpx(responsive pixel),rpx可以根据屏幕宽度进行自适应,小程序开发过程中,官方规定屏幕宽度为默认为750rpx,在一个屏幕宽度为750rpx的手机上,rpc=2*px,即rpx值为px的两倍;
其实Iphone 6的屏幕宽度默认就是750rpx,换算为px,那么Iphone的屏幕宽度为375px,所以对于小程序开发来讲,我们推荐使用Iphone 6作为主要样式测试机型,那么根据上面的Iphone 6的示例,我们可以得到一个公式,在Iphone6机型上,750rpx = 375px,单位换算如下;
设备
|
rpx换算px
|
px换算rpx
|
IPhone 5
|
1rpx=0.42px
|
1px=2.34rpx
|
IPhone 6
|
1rpx=0.5px
|
1px=2rpx
|
IPhone 6 Plus
|
1rpx=0.552px
|
1px=1.81rpx
|
其实官方推出rpx这个单位的主要原因是为了自适应,因为我们的手机屏幕尺寸大小可能均不相同,有的手机屏幕大,有的手机屏幕小,比如iphone 5和iphone 6的屏幕尺寸,完全都是两种类型,所以在这种场景下,我们适应px来固定元素的宽高是非常不合适的,在iphone 6机型下,一个元素的宽为100px,在iphone 5机型下面宽依旧是100px,这样固定死了元素的尺寸,非常不可取;
所以为了解决这种问题,小程序提出了rpx像素单位,它会根据屏幕的尺寸大小动态的调整元素的宽高,在Iphone 6机型下,一个元素的高可能是100rpx(会自动转为50px),但是在Iphone 5机型下面可能就会根据Iphone 5的屏幕尺寸大小来动态的调整尺寸,如下示例;
<!-- pages/page/page.wxml -->
<view style="width: 100rpx;height: 100rpx;background-color: red;"/>
<view style="width: 50px;height: 50px;background-color: blue;"/>