The WeChat applet has been out for a while, although it is still in beta. Using free time, I migrated part of the WeChat WeChat project to a small program.
1. Directory structure
The main body of the applet consists of three files.
app.js logic for configuring applets
app.json public settings
app.wxss public style
The applet can customize the page, but the page needs to be declared in app.json, otherwise the IDE will report an error and the page cannot be found. The applet page is composed of four files, which are
.js file page logic
.wxml view layer file, page structure
.wxss style file, page style sheet
.json file, configuration file, page configuration
2. Applet configuration
app.json determines the path of the page file, window performance, setting the network timeout time, and how many tabs are set.
Define the page path in the pages object. Pages accepts an array of strings. The first element of the pages array is the home page of the applet.
window is used to set the status bar, navigation bar, title, window background color of the applet.
The tabBar configuration item specifies the performance of the tab bar and the corresponding page displayed when the tab is switched.
networkTimeout is used to set the timeout time of various network requests
debug is a boolean type, used to configure whether to enable debug mode in developer tools
3. Applet view
In applets, you cannot continue to construct your pages with tags in html. The MANA framework has specific container components, view, scroll-view, and swiper.
View is a view container, similar to the div in HTML, but the difference is that when the content wrapped with view exceeds the device window, the effect it achieves is like the CSS style overflow: hidden
If you need to achieve a scrolling effect similar to the address book or chat list, you need to use scroll-view scrolling container component, which achieves the effect such as CSS style set overflow: scroll.
Swiper is a slider view component. If you want to achieve a carousel-like effect, it is your best choice. You can control whether to display dots, whether to automatically play, switch time, and switch interval through property configuration Time etc.
The MANA of the applet also implements data binding, which is similar to Angular and Vue. It can be in the form of double brackets: {{data}}. It is worth noting that if you write in the container (for ease of description and understanding , Which will be described below with tags) In between, you can simply write the variable in double brackets, such as: <view> {{data}} </ view>, but if you bind the variable to the attribute of the tag , You need to put double brackets in double quotes, such as: <view wx: if = ”{{data}}”> </ view>, similar to Angular and Vue, you can also perform simple operations within double brackets , Such as: <view hidden = ”{flag? True: false}”> </ view>.
Careful classmates may find that when introducing data binding, we use the attribute of wx: if, which is the conditional rendering provided by MANA. By judging whether wx: if passes a Boolean value (non-Boolean type for hermit conversion) to control whether rendering The content of the label. There is also an attribute in MANA that can control the display of content. The difference is that wx: if only returns the content in the tag when it is true, and hidden always renders the content, but only controls the display of the content according to the conditions. Or not.
In addition, MANA also provides us with a more practical list rendering, wx: for accepts an array, in the page can be based on the value of the array to render the page list
In addition to using list rendering to reuse a view, you can also reuse it through a template. You can define a code snippet in the template and then reference it in different pages, such as:
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
In addition to template, MANA also provides two other ways to apply and reuse, import and include, import has the concept of scope, he will only refer to the template defined in the target file. include can import the entire code of the target file except <template />, which is equivalent to copying to the include location.
In addition to MANA, common event categories are also defined, such as
touchstart finger touch action starts
touchmove finger touch and move
touchcancel Finger touch action is interrupted, such as call reminder, pop-up window
touchend Finger touch action ends
tap Leave immediately after touching with finger
After longtap finger touch, leave after more than 350ms
4. Component style
The styles defined in app.wxss are global styles and apply to every page. The style defined in the wxss file of the page is a partial style, which only acts on the corresponding page and will override the same selector in app.wxss. If you have written css, then you can easily control wxss, wxss has restrictions on selectors, currently supported selectors are:
.class eg: .intro select all components with class = ”intro”
#idFor example:#firstnameselect the component with id = ”firstname”element such as: view select all view components
element, such as: element view checkbox selects all document view components and all checkbox components
:: after For example: view :: after insert content after view component
:: before Such as: view :: before insert content before the view component
The front-end er who has developed a mobile terminal knows that there are differences between physical pixels and logical pixels in Apple phones. For example, the pixel of the device is 350px, and the pixel of the design draft is 750px; generally during the development process, we will use automated construction tools to do pixel conversion , Or it is to use the preprocessor to define the pixel conversion function for processing. In the development of the small program, it is not necessary to be so troublesome. The small program provides an rpx unit. That ’s it, the applet development tool will automatically do the conversion for you during the compilation process.
The next time the small program shares "Little Program Development Steps on the Pit (2)", it will teach you how to interact with the back-end data. Welcome interested friends to subscribe to the blog.
