CSS style tutorial for simple applet writing

After we finished editing the content of the applet , You need to adjust and tune the style skeleton , In order to write the style content that best conforms to the user experience .

today , come from FInClip Our engineers bring us to write css Style dry goods tutorial , Let's see .

One 、 Overall style

Applets allow you to place a... At the top level app.fxss file , It uses CSS Syntax setting page style . The settings of this file , Valid for all pages .

Be careful , Although small programs use CSS style , But the suffix of the style file must be written as .fxss.

Open the sample root directory of the previous tutorial app.ftss file , The contents are as follows .

because FinClip The applet maintains a high degree of unity with wechat applet , To lower the learning or migration threshold for developers , In fact, you can also directly in FIDE Edit the project content based on wechat applet , Or verify the content edited based on wechat applet , Sync upload on FinClip In .

.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

FIDE The init applet page has added... To the outermost tag container class , At this time in container Add a... Under the class name color style ：

color: #ff0000;

Save and re render the page , The text turns red ：

The content turns red

This is the overall style , After setting, it will take effect for all pages . For example, the element in the second page view Also have class：container, Then its text color is also red .

page1 The text in the page also turns red

Two 、 Page style

Under each page path of the applet ftss The style content in the file will only affect the current page .

When we're in index Page to view Element to add a class：“unique-class”, And on the page ftss Change in file font-size style ：

<view class="container unique-class">index page </view>

.unique-class{
font-size: 66px;
}

So obviously in index page view The element content font size will change to 66px

here page1 The page also adds class：“unique-class”, The style is not affected

The font size has not changed

3、 ... and 、 Inline style

You can also set inline styles for elements in the applet , And you can use interpolation variables . Again , In line style takes precedence over class style , And ordinary css The rules are the same .

After we use the inline style , The highest priority

Use difference variables ：

Change the element style attribute color The value is a custom variable fontColor

<view class="container unique-class"
style="color: {{fontColor}}">
index page
</view>

On the page data Add fontColor Variable , Assign the desired color

Page({
data: {
motto: 'Hello World',
fontColor: '#10aeff'
}
})

So you can get through js Control element inline style

Again , The method of interpolating variables can also be applied to class To achieve a similar effect .

Four 、 Unit of measure

Can be used in applet rpx As a unit of measure .rpx（responsive pixel） You can adapt to the width of the screen . Set the screen width to 750rpx. If in iPhone6 On , The screen width is 375px, share 750 Individual physical pixels , be 750rpx = 375px = 750 Physical pixel ,1rpx = 0.5px = 1 Physical pixel .

The rational use of rpx It will make the applet feel better .

5、 ... and 、 Style import

Use @import Statement can import an external stylesheet ,@import Followed by the relative path of the external stylesheet to be imported , use ; End of statement .

/** common.wxss **/
.small-p {
padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

6、 ... and 、 Component built-in styles

Built in components provided by applets define their own logic and default styles , For developers to use quickly . Of course, developers can also modify other styles and behaviors based on this .

for example ： Applet native <swiper> Component allows developers to quickly use the image rotation function .

The picture of the above page , There are three tips , There are three pictures in total , You can switch the display .

The code is simple , Change it index.fxml file , And in /assets/images/ Add the pictures you want to rotate to the directory .

<view>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
style="width: 750rpx; height: 750rpx; text-align: center;">
<swiper-item>
<image src="/assets/images/logo.png"></image>
</swiper-item>
<swiper-item>
<image src="/assets/images/logo2.png"></image>
</swiper-item>
<swiper-item>
<image src="/assets/images/logo3.png"></image>
</swiper-item>
</swiper>
</view>

In the above code ,<swiper> A component is a carousel component , There are three inside <swiper-item> Components , Indicates that there are three rotation programs , Every project is a <image> Components .

<swiper> Component's indicator-dots Property to set whether to display the rotation point ,autoplay Property to set whether to automatically play the round robin . Their attribute values are all Boolean values , This is to be written as {{true}}.

This tutorial explains how to FinClip IDE, The process of writing and debugging the style file of an applet .

In the next issue , We will talk about how to use JSS, Service side calls and other related contents , Coming soon .