微信小程序学习笔记 02

0x01 Flex布局应用

首先，在pages/home目录里面，新建一个index.wxss文件，这个文件设置的样式，只对 home 页面生效。这是因为每个页面通常有不一样的布局，所以页面布局一般不写在全局的app.wxss里面。

然后，index.wxss文件写入下面的内容。

page {
  height: 100%;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

开发者工具导入项目代码，页面渲染结果如下。

下面解释一下上面这段 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文件改成下面这样。

<view>
        <button class="weui-btn weui-btn_primary">
            主操作
        </button>
        <button class="weui-btn weui-btn_primary weui-btn_loading">
            <i class="weui-loading"></i>正在加载
        </button>
        <button class="weui-btn weui-btn_primary weui-btn_disabled">
            禁止点击
        </button>
    <view>
    <text class="title">当前时间为：{{time}}</text>
    <br/>
    </view>
</view>

开发者工具导入项目代码，页面渲染结果如下。

可以看到，加入 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
2
3

<view>
  <image src="https://q1jun-tc.oss-cn-shenzhen.aliyuncs.com/uPic/image-20220114150508149.png" ></image>
</view>

默认情况下，图片会占满整个容器的宽度（这个例子是<view>的宽度），上面代码通过style属性指定图片的高度和宽度（占据页面宽度的一半），渲染结果如下。

当然，图片样式不一定写在<image>组件里面，也可以写在 WXSS 样式文件里面。

0x04 图片的轮播

小程序原生的<swiper>组件可以提供图片轮播效果。

页面的图片上面，有三个提示点，表示一共有三张图片，可以切换显示。

它的代码很简单，只需要改一下index.wxml文件即可。

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;">
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>