微信小程序学习笔记 02
微信小程序学习笔记 02
0x01 Flex布局应用
首先,在pages/home
目录里面,新建一个index.wxss
文件,这个文件设置的样式,只对 home 页面生效。这是因为每个页面通常有不一样的布局,所以页面布局一般不写在全局的app.wxss
里面。
然后,index.wxss
文件写入下面的内容。
1 | page { |
开发者工具导入项目代码,页面渲染结果如下。
![image-20220114142623423](https://q1jun-tc.oss-cn-shenzhen.aliyuncs.com/uPic/image-20220114142623423.png)
下面解释一下上面这段 WXSS 代码,还是很简单的。
(1)height: 100%;
:页面高度为整个屏幕高度。
(2)width: 750rpx;
:页面宽度为整个屏幕宽度。
注意,这里单位是rpx
,而不是px
。rpx
是小程序为适应不同宽度的手机屏幕,而发明的一种长度单位。不管什么手机屏幕,宽度一律为750rpx
。它的好处是换算简单,如果一个元素的宽度是页面的一半,只要写成width: 375rpx;
即可。
(3)display: flex;
:整个页面(page)采用 Flex 布局。
(4)justify-content: center;
:页面的一级子元素(这个示例是<view>
)水平居中。
(5)align-items: center;
:页面的一级子元素(这个示例是<view>
)垂直居中。一个元素同时水平居中和垂直中央,就相当于处在页面的中央了。
0x02 WeUI的应用
如果页面的所有样式都自己写,还是挺麻烦的,也没有这个必要。腾讯封装了一套 UI 框架 WeUI,可以拿来用。
手机访问 weui.io,可以看到这套 UI 框架的效果
首先,进入它的 GitHub 仓库,在dist/style
目录下面,找到weui.wxss
这个文件,将源码全部复制到你的app.wxss
文件的头部。
然后,将page/home/index.wxml
文件改成下面这样。
1 | <view> |
开发者工具导入项目代码,页面渲染结果如下。
![image-20220114145323561](https://q1jun-tc.oss-cn-shenzhen.aliyuncs.com/uPic/image-20220114145323561.png)
可以看到,加入 WeUI 框架以后,只要为按钮添加不同的 class,就能自动出现框架提供的样式。你可以根据需要,为页面选择不同的按钮。
这个示例中,<button>
元素使用了下面的class
。
weui-btn
:按钮样式的基类weui-btn_primary
:主按钮的样式。如果是次要按钮,就使用weui-btn_default
。weui-btn_loading
:按钮点击后,操作正在进行中的样式。该类内部需要用<i>
元素,加上表示正在加载的图标。weui-btn_disabled
:按钮禁止点击的样式。
WeUI 提供了大量的元素样式,完整的清单可以查看这里。
0x03 插入图片
美观的页面不能光有文字,还必须有图片。小程序的<image>
组件就用来加载图片。
打开index.wxml
文件,加入如下代码。
1 | <view> |
默认情况下,图片会占满整个容器的宽度(这个例子是<view>
的宽度),上面代码通过style
属性指定图片的高度和宽度(占据页面宽度的一半),渲染结果如下。
当然,图片样式不一定写在<image>
组件里面,也可以写在 WXSS 样式文件里面。
0x04 图片的轮播
小程序原生的<swiper>
组件可以提供图片轮播效果。
页面的图片上面,有三个提示点,表示一共有三张图片,可以切换显示。
它的代码很简单,只需要改一下index.wxml
文件即可。
1 | <view> |
上面代码中,<swiper>
组件就是轮播组件,里面放置了三个``组件,表示有三个轮播项目,每个项目就是一个<image>
组件。
<swiper>
组件的indicator-dots
属性设置是否显示轮播点,autoplay
属性设置是否自动播放轮播。它们的属性值都是一个布尔值,这里要写成{{true}}
。这种{{...}}
的语法,表示里面放置的是 JavaScript 代码。