Cloud development WXML and WXSS

I believe that through the previous study, we have a general understanding of the file structure of a complete small program, the developer tools of small programs also have a certain understanding, then this section we start to write the code of the small program.

Edit the WXML file

Let's open the template gadget home folder that we modified earlier in the developer tool, home.wxml, which contains the following code

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>

This first line, which is a comment, that is, a note, does not appear at the front of the small program, and the second line is a component.

Next we'll make extensive use of the small program's components. For example, let's add the following code under the code above, let's look at the effect again:

<view>
    <view>
        <view>WXML 模板</view>
        <view>从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。</view>
    </view>
</view>

You can combine the above code to understand the basic writing of components

• lt; The view and the components are similar to the ones that appear in pairs, such as the one that appears in pairs, such as the "/"

• View components can be nested,
• To make it visually better, write code indented (although it won't affect without indentation)

We can make this page a little more complicated.

<view>
    <view>
        <view>
            <view>技术学习说明</view>
            <view>技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。那要学好技术，应该依循什么样的学习方法和教学方法呢？
            </view>
        </view>
        <view>
            <view>
                <view>自学而非手把手</view>
                <view>技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。
                </view>
            </view>
            <view>
                <view>查阅文档而非死记知识点</view>
                <view>在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。
                </view>
            </view>
            <view>
                <view>实战而非不动手的看书</view>
                <view>技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。
                </view>
            </view>
            <view>
                <view>搜索而非做伸手党</view>
                <view>在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。
                </view>
            </view>
            <view>
                <view>团队协作，而非单打独斗</view>
                <view>一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。
                </view>
            </view>
            <view>
                <view>系统的指导而非茫然无序</view>
                <view>学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。
                </view>
            </view>
        </view>
    </view>   
</view>

WXSS selector

Have you found the little program pages we write a little ugly? T hen we need to beautify this little program page. But there are so many components in our code that it's hard to beautify each component without distinguishing it.

id and class selectors

This is the time to look at the concept of selectors. W hat is the selector used for? A s we can see from the name, it's about choice. For example, the school has 1000 people, we have to choose one of them, then we can give everyone a school number, this school number is unique, we can call this school number id, for accurate selection;

Here's a description of the selectors in the wxss technical documentation.

Technical documentation: WXSS technical documentation

Add properties to the component

For example, there are so many view components above that in order to distinguish them, we add some properties to them so that we can select them with the selectors.

<view id="wxmlinfo">
    <view class="content">
        <view class="title">WXML 模板</view>
        <view class="desc">从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
        </view>
    </view>
</view>

And the view component of the more complex piece of code also adds properties. Adding properties to a component doesn't look good

<view id="studyweapp">
    <view class="content">
        <view class="header">
            <view class="title">技术学习说明</view>
            <view class="desc">技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。
            那要学好技术，应该依循什么样的学习方法和教学方法呢？
            </view>
        </view>
        <view class="lists">
            <view class="item">
                <view class="item-title">自学而非手把手</view>
                <view class="item-desc">技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。
                </view>
            </view>
            <view class="item">
                <view class="item-title">查阅文档而非死记知识点</view>
                <view class="item-desc">在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。
                </view>
            </view>
            <view class="item">
                <view class="item-title">实战而非不动手的看书</view>
                <view class="item-desc">技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。
                </view>
            </view>
            <view class="item">
                <view class="item-title">搜索而非做伸手党</view>
                <view class="item-desc">在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。
                </view>
            </view>
            <view class="item">
                <view class="item-title">团队协作，而非单打独斗</view>
                <view class="item-desc">一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。</view>
            </view>
            <view class="item">
                <view class="item-title">系统的指导而非茫然无序</view>
                <view class="item-desc">学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。
                </view>
            </view>
        </view>
    </view>   
</view>

Everyone in the process of learning, to always in the developer tool simulator to see the effect, but also often use WeChat Broom preview generated by the QR code to see the effect, do not just look at the tutorial how to say, but to do their own hands to the actual combat.

CSS reference manual

Once we've added a selector to the components of the wxml file, we can add some beautification to one of the specified components in the wxss file, as well as some kind of component, and here we need to edit the home.wxss file. w xss beautification knowledge and css are the same, so the technical documentation of the small program is not available, you can look at w3shool's CSS reference manual. The role of CSS files is to beautify components.

Technical documentation: CSS reference manual

All you need to know here is the font properties, text properties, background properties, border properties, box models of CSS

CSS involves a lot of knowledge points, now we only need to know that there are these concepts, learning technology must not see the actual effect of the concept to remember. T he concept doesn't matter at all because you can check the documentation at any time. Next we'll have practical examples for everyone to see the results, and you can look back at these documents when you want to learn more.

Font properties and text properties

Below these basic knowledge points about CSS, we can combine how we adjust Word, PPT style to understand, such as how we adjust the size of text, color, weight and so on, add styles should pay attention to the actual combat to understand the effect.

For example, the text in the text inside the class for the title's .lt;view?gt; component is the title, we need to increase, bold, and center the font of the title, so we can add the following code to the home.wxss file, and then let's see what the effect is.

.title{
  font-size: 20px; 
  font-weight: 600;
  text-align: center;
  }

Using .title selector, we select the <view> component of the class title and then we can beautify it precisely so that its beautification code is not used on other components.

You should also pay attention to the writing of css, here font-size, font-weight, text-align outside called properties, colons: after which we call them values, attributes: values this whole we call declarations, each declaration we use a half sign; S eparated. Don't remember these concepts, just know what it is.

The text in the class-title component is the title of a list, and we want it to be different from the style of other text, but this title is smaller than the title;

.item-title{
  font-size:18px;
  font-weight:500;
  color: #c60;
}

We want to describe the text of the class a little lighter, not so dark, we can change to a lighter color, we continue to add code under home.wxss.

.desc,.item-desc{
  color: #333;
}

Note that we have two selectors here, one is desc and one is item-desc, which can be simplified when we want two different selectors to have the same css code, and then separated by commas.

We've added font sizes to them in addition to the titles (class for title and item-title) and we want a uniform setting for all text sizes and line spacing.

#wxmlinfo,#studyweapp{
  font-size:16px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  line-height: 1.6;
}

In order to facilitate access to technical documents, we put these commonly used css technical documents into the following table, so that we can learn more deeply.

The font property	Note
font-family	Specify the font family of the text.
font-size	Specify the font size of the text.
font-weight	Specifies the weight of the font.

The text property	Note
color	Set the color of the text.
line-height	Set the row height.
text-align	Specify the horizontal alignment of text.

Box model

Have you ever noticed that the distance between paragraphs, the distance between words, and the distance from the border are crowded? T his is the time to use the box model. T he box model is like a rectangular box with length, height, borders, and inner and outer margins. Let's take a look at it through the real world.

Length, height, borders we understand better, so what does this margin and margin mean?

The inner margin is the distance between the box of this rectangle and the contents of the rectangle, with the upper margin, the right margin, the lower margin, the left margin, the four margins, namely padding-top, padding-right, padding-bottom, padding-left. Note that it is top, right, bottom, and left, so clockwise.

That margin is the distance between the outer content of the rectangle and the outside of the rectangle, as well as the four margins of the upper margin margin-top, the right margin margin-right, the bottom margin margin-bottom, and the left margin margin-left. It's also clockwise on the top, right, bottom, and left.

For example, let's add an internal distance to the components of wxmlinfo and studyweapp to make the text

#wxmlinfo,#studyweapp{
  padding-top:20px;
  padding-right:15px;
  padding-bottom:20px;
  padding-left:15px;
}

Padding's short story Above these four padding can do a certain short, about padding's short, you can read the following technical documents, multi-use will, CSS padding properties, here are four Padding short-form cases, such as the above four statements can be simplified into padding: 20px 15px. You can take a closer look at it in your spare time.

Class for the title view component is the title, we want it and the following text distance is a little err, we can add the following style:

.title,.item-title{
  margin-bottom:0.9em;
  }

Here you have an em unit, em is the unit relative to the current font size, if your font size is 16px, then 1em is 16px, and if your font size is 18px, then 1em is 18px.

In order to make the class more prominent for the item-title component, that is, the title of the list, we can add a border to the left of it,

.item-title{
  border-left: 3px solid #c60;
  padding-left: 15px;
}

In this way, the style of an article in a small program seems to be even sloppy to accept . . . in order to facilitate everyone's access, we also put the three types of properties of the box model together

The margin property	Note
padding	Set all margin properties in one declaration.
padding-top	Sets the upper inner margin of the element.
padding-right	Sets the right inner margin of the element.
padding-bottom	Sets the lower inner margin of the element.
padding-left	Sets the left inner margin of the element.

Margin properties	Note
margin	Set all margin properties in one declaration.
margin-top	Sets the upper outer margin of the element.
margin-right	Sets the right margin of the element
margin-bottom	Sets the lower outer margin of the element.
margin-left	Sets the left margin of the element.

Border properties	Note
border	Set all border properties in one declaration. For example, border: 1px solid #ccc;
border-top	Set all the top border properties in one declaration.
border-right	Set all right-hand box properties in one declaration.
border-bottom	Set all the lower border properties in one declaration.
border-left	Set all left-hand box properties in one declaration.
border-width	Set the width of the four borders.
border-style	Style the four borders.
border-color	Set the color of the four borders.
border-radius	Short-case properties, setting all four border--radius properties.
box-shadow	Add one or more shadows to the box.

More design styles, you can according to the above technical documentation, in the developer tools like doing experiments to test learning.