社区/学习指南/微信云开发学习指南

WeUI框架

WeUI 是一套小程序的 UI 框架,所谓 UI 框架就是一套界面设计方案。有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了一个 UI 框架,就能让我们的小程序变得更加美观。

体验 WeUI 小程序

WeUI 是微信官方设计团队设计的一套同微信原生视觉体验一致的基础样式库。在手机微信里搜索WeUI小程序或者扫描WeUI 小程序码即可在手机里体验。

我们还可以下载 WeUI 小程序的源码在开发者工具里查看它具体是怎么做的。

源码下载:WeUI 小程序源码

下载解压压缩包之后可以看到 weui-wxss-master 文件夹,点击开发者工具工具栏里的项目菜单选择导入项目,之后就可以在开发者工具查看到 WeUI 的源代码了.

  • 项目名称,可以自己命名,比如“体验 WeUI”;

  • 目录,选择weui-wxss-masterdist文件夹;

  • 下拉选择 appid

小任务:为什么是weui-wxss-master下的dist文件夹,而不是weui-wxss-master?你还记得什么是小程序的根目录吗?

结合 WeUI 在开发者工具模拟器的实际体验以及 WeUI 的源代码,找到 WeUI 基础组件里的 article、flex、grid、panel,表单组件里的 button、list 与之对应的 pages 文件夹下的页面文件,并查看该页面文件的 wxml、wxss 代码,了解它们是如何写的。

小任务:点击开发者工具栏里的预览,用手机微信扫描二维码体验,看看与官方的 WeUI 小程序有什么不同。

WeUI 的界面虽然非常简单,但是背后却包含着非常多的设计理念,这一点我们可以阅读小程序设计指南,来加深对 UI 设计的理解。

WeUI 的使用

前面我们已经下载了 WeUI 的源代码,其实 WeUI 的核心文件是weui.wxss。那我们如何在我们的模板小程序里使用 WeUI 的样式呢?

首先我们在模板小程序的根目录(注意是在第一节建好的模板小程序里)下新建一个 style 的文件夹,然后把 weui 小程序 dist/style 目录下的 weui.wxss 文件粘贴到 style 的文件夹里。

├── pages

├── image

├── style

│   ├── weui.wxss

├── app.js

├── app.json

├── app.wxss

使用开发者工具打开模板小程序的 app.wxss 文件的第二行添加以下代码:

@import 'style/weui.wxss';

这样 weui 的 css 样式就被引入到我们的小程序中啦,那我们该如何使用 WeUI 已经写好的样式呢?

Flex 布局

前面我们已经了解了如何给 wxml 文件添加文字、链接、图片等元素和组件,我们希望给这些元素和组件的排版更加结构化,不再是单纯的上下关系,还有左右关系,以及左右上下嵌套的关系,这个时候就需要了解布局方面的知识啦。

布局也是一种样式,也属于 css 方面的知识哦,所以大家应该知道该在哪里给组件添加布局样式啦~没错,就是在 wxss 文件里~

小程序的布局采用的是 Flex 布局。Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

我们可以在 home.wxml 输入以下代码:

<view class="flex-box">

  <view class='list-item'>Python</view>

  <view class='list-item'>小程序</view>

  <view class='list-item'>网站建设</view>

</view>

为了让 list-item 更加明显我们给他们添加一个边框、背景、高度以及居中处理,比如在 home.wxss 文件写入以下样式代码:

.list-item{

  background-color: #82c2f7;

  height: 100px;

  text-align: center;

  border:1px solid #bdd2f8;

}

让组件变成左右关系

我们可有看到这三个项目是上下关系,但要改成左右关系,那该怎么弄呢?我们可以在 home.wxss 文件写入以下样式:

.flex-box{

  display: flex;

}

我们给外层(也可以叫做父级)的 view 组件添加 display:flex 之后,这三个项目就成了左右结构的布局啦~

让组件的宽度均分

我们希望这三个 list-item 的 view 组件三等分该如何处理呢?我们只需要给 list-item 添加一个 flex:1 的样式,

.list-item{

  flex:1;

}

那怎么弄二等分、四等分、五等分呢,只需要相应增减 list-item 即可,有多少个 list-item 就有多少等分,比如四等分。

<view class="flex-box">

  <view class='list-item'>Python</view>

  <view class='list-item'>小程序</view>

  <view class='list-item'>网站建设</view>

  <view class='list-item'>HTML5</view>

</view>

flex 是弹性布局,flex:1 这个样式是一个相对概念,这里的相对是指这每个 list-item 的宽度之比都为 1。

让组件内的内容垂直居中

我们看到 list-item 组件里的文字都不是垂直居中的,我们希望文字垂直居中该如何处理呢?我们需要给 list-item 的组件添加以下样式。

.list-item{

  display: flex;

  align-items:center;/*垂直居中*/

  justify-content: center;/*水平居中*/

  }

为什么会给 list-item 加了一个 display:flex 的样式呢?和前面一样 display:flex 是要给父级标签添加的样式,要让 list-item 里面的内容实现 flex 布局,就需要给 list-item 添加 display:flex 样式啦。

当然 flex 还可以表示更加复杂的布局结构,比如左中右,左 1/4,中 1/2,右 1/4 等等,由于小程序以及手机 UI 设计不会弄那么复杂,所以这里就不做更多介绍啦。

全局样式与局部样式

全局样式与局部样式的概念大家需要了解一下,在app.wxss 技术文档里是这样描述的:

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

也就是说我们在 app.wxss 引入了 weui.wxss,我们新建的所有的二级页面,都会自动拥有 weui 的样式~

Flex 样式参考

在 WeUI 小程序里我们发现在基础组件里也有 Flex,它的目的就是把内容给几等分。我们可以在模拟器里看到有一等分(100%),二等分、三等分、四等分。它实现的原理和我们上面讲的一样。

大家可以找到 WeUI 文件结构下 example 文件夹里的 flex 页面,我们可以阅读一下 flex.wxml 的代码。比如我们找到二等分的代码:

<view class="weui-flex">

    <view class="weui-flex__item"><view class="placeholder">weui</view></view>

    <view class="weui-flex__item"><view class="placeholder">weui</view></view>

</view>

我们可以直接把这段代码复制粘贴到 home.wxml 里,我们发现即使我们没有给 weui-flex 和 weui-flex__item 添加样式,但是它们自动就有了 flex 布局,这是因为我们之前把 weui.wxss 引入到了 app.wxss 文件里,关于 flex 布局 weui.wxss 都已经给我们写好啦,是不是省了我们很多的麻烦?

也就是说,WeUI 框架的引入是因为它把很多 css 样式写好啦,省去了我们的一些麻烦,我们要使用它就是需要把我们的组件的选择器如 class、id 和 WeUI 框架的保持一致即可。

使用 WeUI 美化文章排版

前面我们在写 home.wxml 文章内容的时候,不同的标题要设置不同的大小、间距,文章正文也要设置内外边距,图片也要设置模式,当然这些样式我们都可以自己写,但是看起来会不那么美观,由于是小程序,如果文章的外观和微信的设计风格一致,看起来就会舒服很多。

WeUI 的设计风格符合小程序设计指南,所以它的一些样式标准值得我们参考。

设计规范:微信小程序设计指南

哦,原来 WeUI 框架不仅可以让我们少写一些 CSS 样式,引入它还可以使我们的小程序设计符合规范。我们觉得它不好看,可以不引入它自己写 css 吗?当然可以啦,WeUI 框架只是一个方便我们的辅助工具而已,所使用的也都是我们之前掌握到的 CSS 的知识,在大家 CSS 熟练之后,我们也可以抛开它自由发挥。

那我们如何使用 WeUI 框架美化文章呢?我们可以先体验 WeUI 小程序基础组件下的 article,然后打开 WeUI 小程序文件结构下的 example 的 article 页面下的 article.wxml,copy 参考它的代码,改成以下的代码

<view class="page__bd">

    <view class="weui-article">

        <view class="weui-article__h1">HackWork技术工坊</view>

        <view class="weui-article__section">

            <view class="weui-article__p">HackWork技术工坊是技术普及的活动,致力于以有趣的形式让参与者学到有用的技术。任务式实战、系统指导以及社区学习能有效提高技术小白学习技术的效率以及热情。

            </view>

            <view class="weui-article__section">

                <view class="weui-article__h3">任务式实战</view>

                <view class="weui-article__p">

                        每节都会有非常明确的学习任务,会引导你循序渐进地通过实战来掌握各个知识点。只有动手做过的技术才属于自己。

                </view>

                <view class="weui-article__p">

                    <image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img1.jpg" mode="aspectFit" style="height: 180px" />

                </view>

                <view class="weui-article__h3">系统指导</view>

                <view class="weui-article__p">

                        针对所有学习问题我们都会耐心解答,我们会提供详细的学习文档,对大家的学习进行系统指导。

                </view>

                <view class="weui-article__p">

                    <image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img2.jpg" mode="aspectFit" style="height: 180px" />

                </view>

                <view class="weui-article__h3">社区学习</view>

                <view class="weui-article__p">

                        参与活动即加入了我们的技术社区,我们会长期提供教学指导,不必担心学不会,也不用担心没有一起学习的伙伴。

                </view>

            </view>

        </view>

    </view>

</view>

WeUI 框架的核心与延伸

使用 WeUI 框架的核心在于使用它写好了样式的选择器,结构与形式不完全受限制。比如上面的 class 为 weui-article 的 view 组件的样式在我们之前引入的 weui.wxss 就写好了,样式为

.weui-article{

  padding:20px 15px;

  font-size:15px

}

所以我们只需要给 view 组件添加 weui-article 的 class,view 组件就有了这个写好了的样式啦。weui-articleh3,weui-articlep 也是如此。

如果想给 weui-article__h3 这个小标题换一个颜色,该怎么处理呢?通常我们不推荐直接修改 weui.wxss(除非你希望所有的小标题颜色都替换掉)。我们可以给要替换颜色的 view 组件再增加一个 class 选择器,再来添加样式即可。比如把社区学习这里的代码改成:

<view class="weui-article__h3 hw__h3">社区学习</view>

然后在 home.wxss 文件里添加

.hw__h3{

  color:#1772cb;

}

一个 view 组件可以有多个 class,这样就非常方便我们定向给某个组件添加一个特定的样式啦。

模板样式的更改

可能上面新闻列表的样式很多人不喜欢,想换一个其他的排版样式,数据分离有个好处就是我们可以不用修改数据本身,而直接修改 wxml 里的排版即可。修改排版样式的核心在 wxss,也就是修改 css 样式。

我们想让图文结构是上下结构,我们可以删掉 weui 框架所特有的一些选择器,也就是删掉一些 class,比如 weui-media-boxhd_in-appmsg,weui-media-boxthumb 等等,然后添加一些选择器,也就是加入一些自己命令的 id 和 class。

<view class="page__bd" id="news-list">

    <view class="weui-panel__bd">

        <navigator url="" class="news-item" hover-class="weui-cell_active">

            <view class="news-img">

                <image mode="widthFix" class="" src="https://img.36krcdn.com/20190810/v2_1565404308155_img_000" />

            </view>

            <view class="news-desc">

                <view class="weui-media-box__title">小程序可以在 PC 端微信打开了</view>

                <view class="weui-media-box__desc">微信开始测试「PC 端支持打开小程序」的新能力,用户终于不用在电脑上收到小程序时望手机兴叹。</view>

                <view class="weui-media-box__info">

                    <view class="weui-media-box__info__meta">深圳</view>

                    <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">8月9日</view>

                </view>

            </view>

        </navigator>

    </view>

</view>

然后我们在 home.wxss 里添加我们想要添加的 css 样式。

#news-list .news-item{

  margin: 15rpx;

  padding: 15rpx;

  border-bottom: 1rpx solid #ccc

  }

#news-list .news-img image{

  width: 100%;

  }

#news-list .news-desc{

  width: 100%;

  }

pc 网页、移动端网页等也会有非常丰富的 UI 框架,它们和小程序的 WeUI 框架的核心与原理都是一样。由于它们可以大大提升我们写页面的开发速度,所以应用得非常普遍

本文出自 李东bbsky