1. Introduce templates

Applets provide two methods to introduce external templates: import and include

Using external templates can realize the code utilization of most common pages. In an APP, the header and foot will not change much, so it can be introduced through templates to realize the reuse of multiple pages.

1.1 the import

Example:

<! --view.wxml--> <template name="view"> <text>{{text}}</text> </template>Copy the code

Introduction:

    <import src="view.wxml"/>
    <template is="view" data="{{text: 'forbar'}}"/>
Copy the code

Note: Import is scoped, meaning that the template imported by import is only valid on the current page, meaning that import does not look down to other templates

The include tag can be thought of as a copy of “HTML” by copying an external WXML fragment into the document example: an external WXML fragment

<! -- header.wxml --> <view> header </view> <! -- footer.wxml --> <view> footer </view>Copy the code
<! -- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>Copy the code

Summary: Import is the introduction of template fragments and is scoped and cannot be nested in templates. Include is the introduction of WXML fragments, equivalent to code copy.

WXSS wechat stylesheet

In applets, page style rendering is done through WXSS files. WXSS can be thought of as CSS because they are all doing the same thing. In essence, WXSS is also based on CSS expansion and modification. RPX: is a relative pixel unit, can be adjusted according to the width of the screen. For the development of mobile terminal, the design draft is generally based on iphone6 as the standard. The iPhone uses a retina display, which is set at 1px in our CSS, but is actually composed of 2px by 2px pixels on the iPhone. On iphone6, the screen width is 375px and there are 750 physical pixels, so 750rpx=350px, i.e. 1rpx=0.5px

@ import “common. WXSS”;

Ps: @import “” “double quotes inside the corresponding file path can be used