Creating a project of micro-channel program of small

　　Before wanted to learn about micro-channel small program, but some time ago in some of the knowledge and learning Java threads, also did not implement this long overdue goal, finally I found a complete video from the Internet to learn the complete development process from scratch now there is a growing idea is to build their own projects, development projects completed set of processes, Xiangnong particularly familiar with, when nothing, what a good idea, they can develop their own project, from today, pay attention to the project the building, independent development! This is followed by a video explaining to do my notes!

A building project

Development of small micro-channel micro-ecology program needs the letter provided to the public micro-channel application platform up an account, get appId, do some preparatory work to develop small programs, the specific site is: https://mp.weixin.qq.com/

1, the new project

Developer tools I use the developer tools provided by the official micro letter, downloaded: Stable  Stable Build  (1.02.1904090), with them still in very good, ha ha, for the first time, it is good, and perhaps because it is not used other, get to the bar!

(1) create a blank project, there may also be some basic project documents provided by the official, here are some selected files are deleted, leaving only the pages folder and project.config.json, this project configuration file, and then start from scratch and create a new file folder, you need to create a new file and folder as follows:

app.json

Note: This document is a need to write some code, or it will not back a new page module, simply write the following code: {} braces, represents an object,

Official app.json file configuration items Detailed address:

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

Applet page detailed configuration parameters:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

app.js

Note: This is the initial need to write code, or can not create a page module, simply write the following code: App ()

classic base module

Right in the micro-channel direct attention Developer Tools -> New classic catalog -> New page, then fill in the classic name, the file is automatically created four classic.js, classic.json, classic.wxml, classic.wxss, and Add app.json in the "pages": [ "pages / classic / classic"] code, this represents the second classic classic.wxml page file, which is registered in app.json completed, each new a page module will need to register in this app.json

The following is a module of four files:

classic.js

classic.json

classic.wxml

In fact, here is the skeleton of a small program, write a small program-specific label, is the equivalent components in the front end of the frame, so the applet page is constituted by a common component of official documents Address:

https://developers.weixin.qq.com/miniprogram/dev/component/

Simple example code:

1 <view class="chunk color1"></view>
2 <view class="chunk color2"></view>
3 <view class="chunk color3"></view>

classic.wxss

Here it is to write the style pages, the equivalent of the front end of the css file

Simple code example:

 1 .chunk{
 2   width:100px;
 3   height: 100px;
 4 }
 5 
 6 .color1{
 7   background-color: blue;
 8 }
 9 .color2{
10   background-color: black;
11 }
12 .color3{
13   background-color: yellow;
14 }

2, the project layout

Applet layout is the layout of flex support, although I do not know what the hell is the layout of flex, but it should be in the form of boostrap fence and the layout is similar to the bar

Flex layout features:

Telescopic (1) in any direction, left, right, down, up

(2) can be exchanged and rearranged in the order of pattern layer

(3) and the side shaft spindle arranged to facilitate

Space (4) stretch and fill subelements

(5) aligned along the container

Flex layout applications:

Layout (1) of the body element, the maximum container layout setting longitudinally aligned and laterally arranged inner block element

.container{

display: flex; // flex usage

/ * Flex-direction: column; * / longitudinally aligned

/ * Flex-direction: row; * / laterally aligned

/ * Flex-direction: row-reverse; * / laterally reversed arrangement is reversed

flex-direction: column-reverse; longitudinal arrangements are reversed upside

}

(2) view components

Adaptive component is a view, normally, the width is 100%, the height is the height of the container you specify the height is adaptive, as the size of your specified container varies

(3) justify-content property

Is mainly controlled alignment of subelements

justify-content: flex-end; // downwardly aligned

justify-content: flex-start; // upwardly aligned

justify-content: center; // Align

justify-content: space-between; // by side head to tail and intermediate elements distributed equidistantly arranged corresponding to an average

justify-content: space-around; // equally spaced from the element by side on both sides of the head and tail is not equal subelements

(4) and the cross-axis spindle of flex

This can be understood from an example, the sub-element is both centered and centered in the case of the vertical direction in the horizontal direction,

align-items: center; // intersecting the axial direction

justify-content: center; // main axis direction

(5) flex in wrap

Layout in the flex, flex process automatically adapts the width of the screen. To narrow the width of your child elements, how can we maintain a set of sub-elements size, it is necessary for the trip, in the flex, the element wrap is flex-wrap

flex-wrap: wrap; // Wrap

flex-wrap: nowrap; // default does not wrap