This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Recently in the study of wechat small program, also have learned some before, forget about the front, write a document to review these basic knowledge

A small program configuration file

Applets have two configuration files, global app.json and individual page. Json

Note: Comments cannot appear in configuration files

1.1 Configuring app.json globally

The official documentation

Applets global configuration, including all page paths, interface presentation, network timeout, bottom TAB.

For example

This is part of the project configuration file you learned earlier

Meaning of each field

  1. pagesField – describes the current page path used by the applet. This is to let the wechat client know which directory your applet page is currently defined in
  2. windowField – Defines the top background color, text color definition, navigation text for all pages of the applet
  3. tabBarField – Defines the bottom navigation bar style for the applet

TabBar configuration properties

1.2 Page Configuration Page.json

Each applet page can also use a.json file to configure the window representation of the page.

You can define some of the properties of each page independently, such as top color, pulldown refresh, and so on

Note: If you have the same configuration item as the app.json file, the configuration item in the page will overwrite the configuration item in the window in app.json

1.3 a sitemap. Json configuration

The sitemap.json file in the root directory of the applet is used to configure whether the applet and its pages can be indexed by wechat.

2. WXML syntax

2.1 Data Binding

2.1.1 Common writing method

Template syntax in the WXML file

Pass in the template data in js under the same page

2.1.2 Component Properties

Template syntax

<view id="item-{{id}}"> </view>
Copy the code

The data transfer

Page({
  data: {
    id: 0}})Copy the code

2.1.3 bool type

I can’t just write checked = “false”, that evaluates to a string

<checkbox checked="{{false}}"> </checkbox>
Copy the code

2.2 operation

2.2.1 Ternary operation

2.2.2 Arithmetic operations

2.2.3 Logical Judgment

Wx :if is used to determine whether the block needs to be rendered:

<view wx:if="{{length > 5}}"> </view>
Copy the code

You can also add an else block using WX: ELif and WX: Else

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
Copy the code

Note: If you want to control multiple component labels, you can use the block tag to wrap the components together and attach control attributes to the block

Note:
is not a component, it is just a wrapper element that does nothing to render the page and accepts only control attributes

2.2.4 String operation

<view>{{"hello" + name}}</view>
Copy the code
// The js file in page
Page({
  data: {name: 'MINA'}})Copy the code

Note: Spaces between curly braces and quotes will eventually be parsed to a string

2.3 List Rendering

2.3.1 wx: the for

The name of the subscript variable for the current item of the default array defaults to index, and the name of the variable for the current item of the array defaults to item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Copy the code
array: [{
  message: 'foo'}, {message: 'bar'
}]
Copy the code

The wX :key attribute is not set, so there is a warning to use WX :key to improve performance

There are several options for the value of the WX :key binding

  1. stringType that represents a unique attribute in a loop item
  2. Reserved words*thisSaid,itemItself, represents unique strings and arrays

2.4 Conditional Rendering

Against 2.4.1 hidden

<view hidden="{{condition}}"> True </view>
Copy the code

Similar to WX :if, switch frequently with hidden, not often with Wx :if

Event binding

This is done with the bind keyword. Such as bindtap, Bindinput, Bindchange and so on

Bind input events to input

<input type="text" bindinput="handleInput"/>
Copy the code

Event handler to map this data to the data

handleInput(e) {
    this.setData({
      num: e.detail.value
    })
}
Copy the code

3.1 Precautions

  1. You cannot bind an event with arguments or parentheses, as shown below
<input bindinput="handleInput(100)" />
Copy the code
  1. Event passes value, through the tag custom attribute way andvalue
<input bindinput="handleInput" data-item="100" />
Copy the code
  1. Data is obtained when the event is triggered
  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
    // The input box value
   console.log(e.detail.value);
 }
Copy the code

Four, WXSS style

WXSS extended features

  • Unit of response lengthrpx
  • Style import

4.1 Dimensions

RPX: Adaptive to screen width

Use steps:

  1. Determine the design draft width pageWidth

  2. Calculate the ratio 750rpx = pageWidth px, so 1px=750rpx/pageWidth

  3. PageWidth RPX => 750/pageWidth RPX

4.2 Importing Styles

Use the @import statement to import an external stylesheet, with only relative paths supported.

@import "common.wxss";
.middle-p {
  padding:15px; 
}
Copy the code

4.3 the selector

Wildcard selectors * are not supported

Only the following selectors are supported

So busy, so busy, so busy