“2.0” a person develops an app, the applet is from 0 to 1, file analysis

Time:2020-4-8

I wonder if you came across the four characters of “document analysis” and just came in to have a look? If so, I can tell you frankly, sincerely and responsibly: you’ve been cheated, you’ve been on a thief ship, and if you want to jump now, it’s too late. Anyway, in the boundless sea, sharks are short of people who do programs. You’re cheated because I can’t analyze it at all. I can only do analysis at best.

2.1 profile analysis

Quickly open wechat development tools and quickly enter the project window. Expand pages, index, logs, utils and everything that can be expanded. Only in this way can we see the whole project.

In the project, the project configuration file project.config.json can be used to configure appid, project name, debugging basic library, and the folder path of cloud development. As for others, almost no changes will be made.

In the project, the page index file sitemap.json can be used to configure whether the page can be indexed (searched). If the action is allow, it means agree; if the disallow, it means disagree; if the page is *, it means all pages, pages / index

/Index specifies a page.

In the applet project, in addition to configuration files, there are application files and page files.

2.2 page file analysis

An applet application is composed of index, logs and other pages. A page consists of JSON for configuration, wxml for layout, wxss for style and JS for business logic.

This is a story about 1 + 1 + 1 + 1 = 4, starting with the configuration file JSON.

2.2.1 JSON file

The JSON file configures the background color, title, title color of the navigation bar at the top of the window and introduces third-party components. The third-party component can only be used in the wxml file if it is introduced in the JSON file.

{

“usingComponents”: {

“mp-cells”: “../../components/cells/cells”,

“mp-cell”: “../../components/cell/cell”

},

“Navigationbartitletext”: “about”,

“navigationBarTextStyle”: “black”

}

2.2.2 wxml file

Wxml file, layout the mobile interface. Layout can be left to right, top to bottom; right to left, bottom to top; left green dragon, right white tiger, top picture, bottom button.

In the picture above and the button below, I want to realize the function, while left Qinglong and right Baihu are the assignments left for you. Remember to finish them on time. When you’re done, take a closer look at the code, and you’ll find a container that’s somehow there. Don’t worry, it’s reasonable to exist, but I haven’t talked about the wxss file yet.

<view class=”container”>

<image ></image>

< button > OK < / button >

</view>

2.2.3 wxss file

Wxss file is a good basic friend of wxml. It has been standing behind wxml and undertaking the work of makeup artist (style). That is, behind every successful wxml, there will be a reason for wxss. It is with the support of wxss that wxml can lay out the world with confidence and boldness.

Good looking leather bags are the same, interesting souls are one in a million, only layout and a beautiful appearance are not enough to achieve great achievements. If you want to achieve great success, you have to rely on JS files to achieve business logic.

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

2.2.4 JS file

JS file, realize the business logic and display the results in wxml, and announce to the world. If it is just to implement a simple task, such as computing 1 + 1 = 2, then a single JS should be OK, but the ideal is very full, the reality is very skeletal, and a small program application often has more functions than that.

In order to improve the development efficiency, some general functions can be put in a general JS file and placed under utils. When the JS file in the page needs to be used, use require to import it.

Since there are JS to share, is there wxss to share? Yes, the app.wxss file is.

const util = require(‘../../utils/util.js’)

Page({

/**

*Initial data of the page

*/

data: {

},

/**

*Life cycle function — listening to page loading

*/

onLoad: function (options) {

},

/**

*Life cycle function — listen to the completion of the first rendering of the page

*/

onReady: function () {

},

/**

*Life cycle function — monitor page display

*/

onShow: function () {

},

/**

*Life cycle function — monitor page hiding

*/

onHide: function () {

},

/**

*Life cycle function — monitor page unloading

*/

onUnload: function () {

},

/**

*Page related event processing function — listening to user pull-down action

*/

onPullDownRefresh: function () {

},

/**

*Handling function of page pull bottom event

*/

onReachBottom: function () {

},

/**

*Users click the upper right corner to share

*/

onShareAppMessage: function () {

}

})

2.3 app.wxss file

App.wxss file, which is the style configuration file of the whole application. The style configured here can be shared by all pages without any operation. It’s good that the product manager of wechat has finally done something that makes programmers worry less.

When it comes to worry free, you will be happy. When you are happy, you will forget about what you are doing. You will forget that app.js and app.json are not mentioned. These two guys are very important roles.

App.js, is a bandit who has the ability to do everything. If you want to enter the page, you have to go through app.js first. This way, he opens the tree and plants it. If you want to go from here, take off your pants.

That is to say, global content, global variables and global business logic are implemented here. As for the global configuration, please move to the app.json file.

//app.js

App({

onLaunch: function () {

//Demonstrate local storage capabilities

var logs = wx.getStorageSync(‘logs’) || []

logs.unshift(Date.now())

wx.setStorageSync(‘logs’, logs)

},

globalData: {

userInfo: null

}

})

2.4 app.json file

App.json file, the configuration file for the configuration of the entire application. Here, you can configure a uniform window style, including the background color of the page’s title bar, title (this is unlikely), and title color;

Configurable and mandatory page path; configurable global switch label; configurable permission declaration and authorization prompt information such as location; third-party plug-in can be introduced.

Can, can, can, thirsty drink water to go.

{

“pages”: [

“pages/index/index”,

“pages/logs/logs”

],

“window”: {

“backgroundTextStyle”: “light”,

“navigationBarBackgroundColor”: “#fff”,

“navigationBarTitleText”: “WeChat”,

“navigationBarTextStyle”: “black”

},

“permission”: {

“scope.userLocation”: {

“Desc”: “please grant location service permission for a better meal”

}

},

“tabBar”: {

“borderStyle”: “black”,

“backgroundColor”: “#ffffff”,

“color”: “#1b1b1b”,

“selectedColor”: “#2b2b2b”,

“list”: [

{

“iconPath”: “images/about.png”,

“selectedIconPath”: “images/about_p.png”,

“pagePath”: “pages/about/index”,

“Text”: “about”

},

{

“iconPath”: “images/my.png”,

“selectedIconPath”: “images/my_p.png”,

“pagePath”: “pages/my/index”,

“Text”: “my”

}

]

},

“sitemapLocation”: “sitemap.json”

}

Wait, I’ve been talking about it for a long time. Do you feel that there’s something missing? Yes, there’s no red envelope for me. Less about the source code generated by development tools, less about the wechat product manager.

OK, then I’ll check again, product manager of wechat applet, the code you generated, I can’t understand and don’t want to read it. In the next section, I’ll delete them all.