Wxss template style and WXS scripting language for wechat applet development

Catalog

One 、WXSS

（1）rpx Unit of measure

（2） Style import

（3） Global and local styles

（4） Common styles

Two 、WXS

（1） Concept

（2） Application scenarios

（3）WXS And JavaScript The relationship between

（4） Basic usage

embedded wxs Script

Extraneous wxs Script

---

One 、WXSS

WXSS Its full name is WeiXin Style Sheets, A set of time is similar to CSS Style language , Used for style beautification of interface .

 

 

 

（1）rpx Unit of measure

Concept

rpx, Its full name is responsive pixe, It is unique to wechat applet , The unit of size used to solve screen adaptation

Realization principle

Given the different screen sizes of different devices , In order to realize the automatic adaptation of the screen ,rpx Divide the screens of all devices equally in width 750 Share , namely ： The total width of the current screen is 750rpx. When applets run on different devices , Will automatically rpx The style unit of is converted into the corresponding pixel unit for rendering display , Thus, the screen Automatic adaptation .

rpx And px Unit conversion between

stay iPhone6 On , The screen width is 375px, share 750 Individual physical pixels , Divide equally into 750rpx, be ：

750rpx=375px=750 Physical pixel

1rpx=0.5px=1 Physical pixel  

On other equipment

 

  The official suggestion is that ： When developing applets , Designers had better use iPhone6 As the standard of visual manuscript

for example ： stay iPhone6 If you want to draw width on 100px, high 20px Box , The conversion rpx Company , That is, the width and height are 200rpx,40rpx

（2） Style import

Concept

That is to use WXSS Provided @import grammar , You can import an external style sheet to use

Grammar format

@import Followed by the relative path of the external style sheet to be imported , use ; End of statement

Example

We build a new one commom Folder , There are some style sheets that need public use , That page needs this style , Then use @import Grammar import can be used

Announcement style common.wxss

.username{
  color: red;
}

  Import

@import "/commom/commom.wxss";

Use  

<view class="username" wx:for="{
   {arr2}}">
      Subscript ：{
   {index}} , name ：{
   {item}}
</view>

（3） Global and local styles

Global style

stay app.wxss The style defined in is called global style , It can work on all pages

Local style

On page WXSS The styles defined in the file are called local styles , Only works on the current page

Be careful

• When the local style conflicts with the global style , According to the principle of proximity , The local style will override the global style
• When the weight of the local style is greater than or equal to the weight of the global style , Will override the global style

（4） Common styles

Size

attribute	effect
height	Set height
line-height	Set row height
width	Set width

---

Frame  

The setting of border attribute generally adopts the form of abbreviation , Such as ：border:5rpx soild red 

Respectively corresponding to the height of the border 、 style 、 Color

explain attribute effect Border style solid Solid line frame dotted Dot border dashed Dotted border double Double border Frame height border-width Set the border height Border color border-color Set border color Border position border-top Set the properties related to the top border border-bottom Set the relevant properties of the bottom border border-left Set the relevant properties of the left border border-right Set the relevant properties of the right border Border fillet border-radius Make the border rounded

 

---

 

 

Margin

When setting the outer margin, the form of abbreviation is generally used , Such as ：padding:10px 10px  10px  10px 

Corresponding to the above 、 Right 、 Next 、 Left outer margin

notes ： When two vertical margins meet , They will form an outer margin . The height of the merged outer margin is equal to the height of the larger outer margin before merging .

explain	attribute	effect
padding	padding-top	Set the top inner margin
	padding-bottom	Set the lower inner margin
	padding-left	Set the left inner margin
	padding-right	Set the right inner margin
Margin	margin-top	Set the top margin
	margin-bottom	Set the bottom margin
	margin-left	Set the left outer margin
	margin-right	Set the right margin

 

---

Text

explain	attribute	effect
text color	color	Set the color of the text
The text direction	direction	Set the direction of the text
Text line height	line-height	Set text line height
Between characters	letter-spacing	Set character spacing
Align text	left	Arrange the text to the left
	right	Arrange the text to the right
	center	Arrange the text in the middle
	justify	Achieve the effect of text alignment
Text shadow	text-shadow	Set text shadow

 

---

typeface

explain	attribute	effect
Font size	font-size	Set font size
The font style	font-style	Set font type
The font size	font-weight	Set font thickness

---

 

 

Two 、WXS

（1） Concept

Full name WeiXin Script , It is a set of script language unique to small programs , combination WXML, You can build the structure of the page

（2） Application scenarios

WXML Cannot call on page .js Functions defined in the file , But you can call WXS The function defined in . therefore , Small program WXS The application scenario is “ filter ”, That is, the data is packaged before rendering , Finally, the processed data will be rendered to the page

（3）WXS And JavaScript The relationship between

although WXS The syntax is similar to JavaScript, But they are actually two completely different languages

First of all ,wxs It has its own data type ：

• number value type string String type
• boolean Boolean type
• object object type
• function Function type
• array An array type
• date The date type
• regexp Regular

second ,wxs No support similar to ES6 And the above grammatical forms ：

• I won't support it ：let、const、 Deconstruct assignment 、 Expand operator 、 Arrow function 、 Object attribute shorthand 、etc......
• Support ：var Defining variables 、 Ordinary function Functions, etc. are similar to ES5 The grammar of ......

Third ,wxs follow CommonJS standard ：

• module object
• require() function
• module.exports object

（4） Basic usage

embedded wxs Script

wxs The code can be written in wxml In the document <wxs> tag , It's like JavaScript The code can be written in html In the document <script> It's the same inside the label . in addition ,wxml Every... In the document <wxs></wxs> label , You must provide module attribute , Used to specify the current wxs Module name of , For wxml Access the members shared in the module

<view>{
   {m1.toUpper('gy')}}</view>
<wxs module="m1">
     module.exports.toUpper = function(str){
      //   Convert the passed in string to uppercase and return the string 
       return str.toUpperCase()
     }
</wxs>

 

---

 

Extraneous wxs Script

  the wxs The script code is placed in a separate with .wxs Go to the file with suffix , Call in use

（1） Define the outside wxs Script code

//  Defined function 
function toLower(str){
  return str.toLowerCase()
}
module.exports ={
  //  take toLower This function is shared 
  toLower:toLower
}

（2） Using extranet wxs Script

In use of outreach wxs Script time , It has to be for <wxs> add module and src attribute , among

• module Used to specify the name of the module
• src Used to specify the path of the script to be imported , And it has to be a relative path

<view>{
   {m2.toLower('GY')}}</view>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>

（ . . /. . / Indicates the root directory , Fixed writing ）