The cloud develops the WeUI framework

WeUI is a set of small program UI framework, the so-called UI framework is a set of interface design. With components, we can use it to stitch together a rich little program, and with a UI framework, we can make our small programs more beautiful.

Experience the WeUI gadget

WeUI is a basic style library designed by WeChat's official design team that is consistent with WeChat's native visual experience. Search for WeUI gadgets on your phone's WeChat or scan weUI's small program codes to experience them on your phone.

We can also download the source code of the WeUI gadget in the developer tool to see how it is done.

Source download: WeUI small program source code

After downloading the decompression package, you can see the weui-wxss-master folder, click on the Project menu in the developer toolbar to select Import items, and then you can view the source code of WeUI in the developer tool.

• Project name, can be named by themselves, such as "Experience WeUI";

• Directory, select the dist folder under weui-wxss-master;

• Pull down to select the appid

Small task: Why the dist folder under weui-wxss-master, not weui-wxss-master? Do you remember what the root of a small program is?

Combined with WeUI's actual experience in the Developer Tool Simulator and WeUI's source code, find the pages files under the button, list and page folders in the WeUI foundation components, and check the wxml, wxss code of the page files to see how they are written.

Small tasks: Click on the preview in the developer toolbar and scan the QR code experience with your phone WeChat to see how it's different from the official WeUI widget.

WeUI's interface is simple, but there are a lot of design concepts behind it, and we can read the small program design guide to deepen our understanding of UI design.

The use of WeUI

We've downloaded the source code for WeUI earlier, but the core file of WeUI is weui.wxss. So how do we use weUI styles in our template gadgets?

First we create a new style folder under the root of the template applet (note that it's in the template applet in the first section), and then paste the weui applet dist/style file into the style folder.

├── pages
├── image
├── style
│   ├── weui.wxss
├── app.js
├── app.json
├── app.wxss

Use the developer tool to open the second line of the app.wxss file for the template applet to add the following code:

@import 'style/weui.wxss';

So weui's css styles are introduced into our little programs, so how do we use the styles that WeUI has already written?

Flex layout

Before we have learned how to add text, links, pictures and other elements and components to the wxml file, we hope to give these elements and components layout more structured, no longer a simple up-down relationship, there is a left-right relationship, as well as left and right nested relationship, this time we need to understand the layout of knowledge.

Layout is also a style, also belongs to the knowledge of css Oh, so we should know where to add layout style to the components

The layout of the small program uses the Flex layout. Flex is an acronym for Flexible Box, meaning "elastic layout" to provide maximum flexibility for box models.

We can enter the following code at home.wxml:

<view class="flex-box">
  <view class='list-item'>Python</view>
  <view class='list-item'>小程序</view>
  <view class='list-item'>网站建设</view>
</view>

To make list-item more obvious, let's add a border, background, height, and centering to them, such as writing the following style code in a home.wxss file:

.list-item{
  background-color: #82c2f7;
  height: 100px;
  text-align: center;
  border:1px solid #bdd2f8;
}

Turn components into left-right relationships

We can see that these three items are up and down the relationship, but to change to the left-right relationship, then how to do it? We can write the following styles in the home.wxss file:

.flex-box{
  display: flex;
}

After we added display:flex to the view component of the outer layer (also known as the parent), the three items became the layout of the left and right structures

Give the width of the components equal

What do we want the three list-item view components to do with the third-class? We just need to add a flex:1 style to list-item,

.list-item{
  flex:1;
}

So how to get second-class, fourth-class, fifth-class points, only need to increase or decrease the corresponding list-item can be, how many list-item on how many equal points, such as fourth-class points.

<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 is an elastic layout, and the flex:1 style is a relative concept, where the ratio of width to each list-item is 1.

Center the contents of the component vertically

We see that none of the text in the list-item component is vertically centered, what do we want to do with vertical centering of text? We need to add the following styles to the components of list-item.

.list-item{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  }

Why did you add a display:flex style to list-item? As before, display:flex is the style to add to the parent label, and for the content inside list-item to implement the flex layout, you need to add a display:flex style to list-item.

Of course flex can also represent more complex layout structures, such as left center right, left 1/4, center 1/2, right 1/4 and so on, because small programs and mobile phone UI design will not be so complex, so do not do more here.

Global styles and local styles

The concepts of global and local styles need to be understood, as described in the app.wxss technical documentation:

The style defined in app.wxss is global and affects every page. The style defined in the page's wxss file is a local style that only serves on the corresponding page and overrides the same selector in app.wxss.

That is to say, we introduced weui.wxss in app.wxss, and all of our new secondary pages will automatically have weui styles

Flex style reference

In the WeUI gadget we found that there is also Flex in the underlying components, which is designed to give the content a few equal points. W e can see in the simulator that there are first-class points (100%), second-class, third-class, fourth-class. It works the same way as we said above.

You can find the flex page in the example folder under the WeUI file structure, and we can read the code for flex.wxml. For example, we found a second-class code:

<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>

We can copy and paste this code directly into home.wxml, and we find that even if we don't style weui-flex and weui-flex__item, they automatically have a flex layout, because we introduced weui.wxss into the app.wxss file before, and we've written about flex layout weui.wxss, so don't we save a lot of trouble?

That is, the WeUI framework was introduced because it wrote down a lot of css styles, saving us some of the hassle, and we needed to use it to keep our component selectors such as class, id, and WeUI frameworks consistent.

Use WeUI to beautify article typography

Before we write home.wxml article content, different titles to set different sizes, spacing, the body of the article also want to set the internal and external margins, pictures also want to set the pattern, of course, these styles we can write ourselves, but it will not look so beautiful, because it is a small program, if the appearance of the article and WeChat design style consistent, it will look much more comfortable.

WeUI's design style is in line with the small program design guidelines, so some of its style standards are worthy of our reference.

Design specification: WeChat small program design guide

Oh, the original WeUI framework not only allows us to write less CSS styles, but also introduces it to bring our small program designs into line with specifications. W e don't think it looks good, can we not introduce it to write css ourselves? Of course, the WeUI framework is just a handy aid for us, using the CSS knowledge we have mastered before, after everyone CSS proficiency, we can also put aside it to play freely.

So how do we use the WeUI framework to beautify articles? We can first experience the article under the basic components of the WeUI applet, and then open the arcicle.wxml under the excel article page under the WeUI apple file structure, copy reference its code, changed to the following code

<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" rel="external nofollow"  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" rel="external nofollow"  mode="aspectFit" style="height: 180px" />
                </view>
                <view class="weui-article__h3">社区学习</view>
                <view class="weui-article__p">
                        参与活动即加入了我们的技术社区，我们会长期提供教学指导，不必担心学不会，也不用担心没有一起学习的伙伴。
                </view>
            </view>
        </view>
    </view>
</view>

The core and extension of the WeUI framework

At the heart of using the WeUI framework is the selectors that use it to write styles, and the structure and form are not completely limited. For example, the class above is written for the style of the view component of weui-article, which we introduced earlier, and the style is

.weui-article{
  padding:20px 15px;
  font-size:15px
}

So we just need to add a class of weui-article to the view component, which has this written style. The same is true of weui-article h3, weui-article p.

What if you want article__h3 change the color of this subheading? U sually we don't recommend modifying weui.wxss directly (unless you want all the subheading colors replaced). W e can add another class selector to the view component to replace the color, and then add a style. For example, change the code for community learning here to:

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

Then add it in the home.wxss file

.hw__h3{
  color:#1772cb;
}

A view component can have multiple classes, which makes it easy for us to direct a particular style to a component.

Changes to the template style

Perhaps the above news list style many people do not like, want to change another typography style, data separation has the advantage that we can not modify the data itself, but directly modify the layout in wxml can be. The core of modifying typography styles is wxss, that is, modifying css styles.

We want the structure to be up and down, we can delete some selectors unique to the weui framework, that is, delete some classes, such as weui-media-box__hd_in-appmsg, weui-media-box__thumb, and so on, and then add some selectors, that is, add some of their own command id and 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="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" />
            </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>

Then we add the css style we want to add in home.wxss.

#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 web pages, mobile web pages, and so on will also have a very rich UI framework, they and small programs of the WeUI framework of the core and principle are the same. Because they can greatly improve the development of our writing pages, so the application is very common