Small program (two) appID access and project directory structure

The last article is mainly about the introduction of small program, advantages and disadvantages and installation environment, this article continues to introduce the development needs of small program and project directory structure.

Focus on Spring Boot+ micro services, mini programs, Flutter, Android, regularly share articles and video tutorials, reply to Java materials after attention, receive the learning dry goods carefully prepared for you!

1. Small program project creation

Create a small program project, open the small program development tool, select the left side of the small program, click on the right side of the plus sign for information Settings

1. Project name

2. Select a project storage directory

3. AppId required by the project

As the following:

The project name and store directory are easy to understand, but what is an appID?

AppId: It acts as your mini program’s “id card” in wechat. With it, wechat clients can determine your mini program’s “identity” and allow access to the advanced interface provided by wechat.

To obtain the AppID, you only need to register a small program account on the official website of wechat public platform (mp.weixin.qq.com) and log in. Then you can view the AppID of wechat small program in the “Development” – “Development Settings” of the website.

Note that appids for service numbers or subscription numbers cannot be used directly.

The procedure is as follows:

1. Log in or register an applet account

2. After entering the mini program account, the left development option —- “Development Settings –” appID (small program ID)

Once you get your appID, you can copy it to where you want to create your project.

If you don’t have your own applets account, you can use the test appID for temporary development

2. Applets directory structure

After creating the project, the interface display and structure are as follows

I. Introduction to file types

NavigationBarTitleText. WXML is a template file, which is equivalent to an HTML template.

.wXSS is a style file, equivalent to HTML CSS style sheets, (do interface style control)

.js is a JAVASCRIPT logic file, which is equivalent to THE JAVASCRIPT script of HTML, (do functional logic).

Two: general structure

file	mandatory	role
app.js	is	Small program logic
app.json	is	Applets common configuration
app.wxss	is	Common style sheets for applets

2. Multiple Pages describing their own pages(the Pages directory stores each page of the applet)

file	mandatory	role
Page name.js	is	Logic of this page
Page name.wxml	is	Page structure
Page name. WXSS	is	Page style sheet
Page name.json	is	Configuration page

Note:

1) To reduce configuration items, all four files on the description page must have the same path and file name.

2) It can be seen from the above that. Json,. WXML,. WXSS,. Js4 files can be included

Json configuration file, which is the configuration file for the current page,

By default, projects are created without a. Json configuration file at the bottom of each page because it is not a mandatory file

Index and logs pages

3. Project. Config. json in the root directory

1). The project profile or project IDE profile will write any configuration done in “wechat Developer Tools” to this file.

2). Application Scenarios:

Usually when using an IDE development tool, you will do some personalized configuration for your preferences,

For example, interface colors, compiler configuration, and so on, when you reinstall the tools on a different computer,

You have to reconfigure.

3). Solution: the project. Config. json project IDE configuration file

When you reinstall tools or switch computers, you simply load the same package of code for the project,

The developer tool will automatically restore you to the personalization you had when you were developing the project,

This includes options for editor colors, automatic compression when code is uploaded, and more

4. Shared program logic library (util directory)

This directory can have a custom name

Public js function file that exposes every page used under Pages via module.exports

You don’t need to write duplicate Js code for every page.

5. Summarize the composition

Three, app. Js

Details refer to the API documentation “logic layer/register” https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

But be warned:

1.App() must be registered in app.js, and no more than one must be registered.

2. Do not call getApp() inside a function defined in App(); use this to get the App instance.

3. Do not call getCurrentPages() at onLaunch when the Page has not been generated.

4. Do not call the lifecycle function after getting the instance from getApp().

4: app. Json file (configuration applets project)

Functions: Global configuration of wechat applets, determining the path of page files, window performance, setting network timeout, setting multiple tabs, etc.

Pages, Window, tabBar, networkTimeout, debug app.json

attribute	type	mandatory	describe
pages	String Array	is	Setting the page Path
window	Object	no	Sets the window appearance of the default page
tabBar	Object	no	Sets the performance of the bottom TAB
networkTimeout	Object	否	Set the network timeout period
debug	Boolean	no	Setting whether to enable

The debug mode

Pages attribute description:

The type is String Array, each of which is a String, to specify which pages the applets are made up of.

Each item represents the [path + filename] information of the corresponding page, and the first item of the array represents the initial page of the applet.

Adding or subtracting pages in a small program requires modifying the Pages array.

File names do not need suffixes, and the framework automatically matches.json,.js,.wxml,.wxss 4 files in the paths of the Pages array for integration.

Pages string array the first string page path [path + file name] is the first page displayed by the applet. For example:

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

(add/subtract pages in the miniprogram, need to modify the pages array) {

“Pages “: [// the first page here is displayed as “pages/index/index”,

“pages/logs/logs”

]

}

Other details refer to the API documentation “configuration” https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

Five: the JS logic layer of the page (login page)

Js files are logical files of small programs

Here we talk about the logical layer of the page:

The main function is the login page.

Use of js page registration: similar to the use of app.js registration applet project function APP (Object)

Page(Object)

Object specifies the initial data, lifecycle functions, event handlers, and so on for the page.

Specific details refer to the API documentation “logic layer/registration page” https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

Vi. Configuration of the page (file name.json)

Each page can also be configured with a. Json file for the window presentation of the page. The page configuration is much simpler than the app.json global configuration, just setting the contents of the window configuration item in app.json, which overrides the same configuration item in the window of app.json. Json of the page can only set window-related configuration items to determine the window appearance of the page, so the window key is not needed.

Json (page configuration), override the window configuration item of app.json (page configuration), override the window configuration item of app.json (page configuration), override the window configuration item of app.json. The title of each page, for example, also needs to be rewritten. Such as:

{ “navigationBarBackgroundColor”:”#ffffff”,

“navigationBarTextStyle”:”black”,

“NavigationBarTitleText “:” Application workplace function demo “,

“backgroundColor”:”#eeeeee”,

“backgroundTextStyle”:”light”

}

All app.json window configuration items can be overridden in the page. json, but the page. json configuration has its own properties that the app.json applet global configuration does not have

Seven: the view layer of the page

There are two main ones: WXML and WXSS

The specific use of reference API documentation “view layer/WXML” https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

API documentation “view layer/WXS” https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

8. Frame diagram

OK, this article we stop here, if you have any questions, please leave a comment. For more small program articles, please pay attention to the public number program workplace, if you have problems with your partner, you can pay attention to the public number program workplace, plus my wechat. At present, the small program article is updating the development of the project.

-END-

Workplace program

A dedicated workplace programmer