[WeChat Mini Program] In-depth study of the basic directory files and code structure of the Mini Program

0️⃣ written in front

The goal of the Mini Program Framework is to enable developers to develop services with native APP experience in WeChat in the simplest and most efficient way possible.

The applet framework provides its own view layer description language WXML 和 WXSS, as well as JavaScript, and 在视图层与逻辑层间提供了数据传输和事件系统allows developers to focus on data and logic.

---

---

1️⃣The composition of the applet code

①Project structure

• pagesThe page used to store all applets
• utilsModules used to store tools (for example: custom modules for formatting time)
• app.jsThe entry file of the applet project
• app.jsonGlobal configuration file for applet projects
• app.wxssThe global style file of the applet project
• *project.config.json` project configuration file
• sitemap.jsonUsed to configure whether the applet and its pages are allowed to be indexed by WeChat

The official recommendation of the Mini Program is to store all the pages of the Mini Program in the pages directory and exist as a separate folder, as shown in the figure:

where each page consists of 4 basic files, which are:

• .jsFiles (script files of pages, storing page data, event processing functions, etc.)
• .jsonFile (the configuration file of the current page, the appearance and performance of the configuration window, etc.)
• .wxmlfile (template structure file for the page)
• .wxssfile (the style sheet file for the current page)

②JSON configuration file

JSON is a data format . In actual development, JSON always appears in the form of configuration files . Applet projects are no exception: through different .json configuration files, applet projects can be configured at different levels. There are four kinds of json configuration files in the applet:

1. app.jison file

app.jsonIt is the global configuration of the current applet, including all page paths, window appearance, interface performance, bottom tab, etc. of the applet.

effect:

• pages: used to record the path of all pages of the current applet
• window: Globally define the background color, text color, etc. of all pages of the applet
• style: Globally define the style version used by the applet component
• sitemapLocation: Used to indicate the location of sitemap.json

2. project.config.json file

project.config.jsonIt is a project configuration file, which is used to record the personalized configuration we made to the applet development tool.

in:

• settingThe configuration related to compilation is saved in
• projectnameis saved in the project name
• appidStored in is the account ID of the applet

3. sitemap.json file

WeChat has now opened search within the mini program, the effect is similar to the SEO of PC web pages. sitemap.jsonThe file is used to configure whether WeChat indexing is allowed on Mini Program pages. When the developer allows WeChat to index, WeChat will use crawlers to index the page content of the Mini Program . When the user's search keyword matches the index of the page successfully, the page of the Mini Program may be displayed in the search results.

4. The .json configuration file of the page

For each page in the applet, you can use .jsonthe file to configure the window appearance of this page , and the configuration items in the page will app.jsonoverride the same configuration items in the window of .

The method of creating a new applet page: add the storage path of the page in app.json -> pages , and the applet developer tool can help us automatically create the corresponding page file.

How to adjust the homepage of the project: You only need to adjust the order of the page paths in the app.json -> pages array to modify the homepage of the project. The applet will render the first-ranked page as the project home page.

③WXML template

WXML(WeiXin Markup Language) is a set of labeling languages ​​designed by the Mini Program framework , which is used to construct the structure of Mini Program pages, and its function is similar to HTML in web development.

So, what's the difference between the two?

label name is different

• HTML （div, span, img, a）
• WXML（view, text, image, navigator）

different attribute nodes

Provides a template syntax similar to that in Vue

• data binding
• list rendering
• conditional rendering

④WXSS style

WXSS(WeiXin Style Sheets) is a style language used to describe WXML component styles, similar to CSS in web development.

So, what's the difference between the two?

Added rpx dimension unit

• CSS needs to manually convert pixel units, such as rem
• WXSS supports the new size unit rpx at the bottom layer, and the applet will automatically convert it on screens of different sizes

Provides global styles and local styles

• app.wxss in the root directory of the project will act on all applet pages
• The .wxss style of partial pages only takes effect on the current page

WXSS only supports some CSS selectors

• .class and #id
• element
• union selector, descendant selector
• Pseudo-class selectors such as ::after and ::before

⑤JS logic interaction

In the applet, we handle user operations through .js files. For example: respond to the user's click, obtain the user's location, and so on.

The JS files in the applet are divided into three categories, namely:

• app.js
  It is the entry file of the entire applet project, and the entire applet is started by calling the App() function
• 页面的 .js 文件
  It is the entry file of the page, which is created and run by calling the Page() function
• 普通的 .js 文件
  It is an ordinary function module file, which is used to encapsulate public functions or properties for page use

---

2️⃣Mini program framework interface

①App(Object object)

1. Register the applet. Accepts a Objectparameter , which specifies the lifecycle callback of the applet, etc.

2. App() must be called in app.jsthe , must be called and can only be called once. Otherwise there will be unforeseen consequences

3. The corresponding app() parameters are below小程序生命周期中有指出

②AppObject getApp(Object object)

1. Obtain the globally unique Appinstance .

2. code example

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {
    
    GbaseUrl} =getApp()  //GbaseUrl是自己在app.js定义的全局变量

3. Object object

Attributes	type	Defaults	required	illustrate	minimum version
allowDefault	boolean	false	no	Returns the default implementation when Appundefined . When the App is invoked, the properties defined in the default implementation will be overwritten and merged into the App. Generally used for independent subcontracting	2.2.4

4. Notice

• Do not call within a function defined App()within , or Appbefore calling getApp(). Use thisto get the app instance.
• After getApp()getting the instance, don't call the lifecycle function privately

---

3️⃣ Contents of the Mini Program host environment

The host environment refers to the dependent environment necessary for the program to run . For example:Androidsystem and iOSsystemThe Android version of the WeChat App cannot run in the iOS environment.

Mobile WeChat is the host environment of the mini-program. With the help of the capabilities provided by the host environment, the mini-program can realize many functions that cannot be completed by ordinary web pages. For example: the mini program calls the API provided by WeChat to realize functions such as code scanning and payment.

The host environment of the applet contains the following contents:

• communication model
• operating mechanism
• components
• API

---