Mini program architecture

I don’t know how everyone writes mini programs. I was writing WeChat mini programs a few months ago. I created a structure, or framework, by myself. The native architecture of WeChat is like this

├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │ ├── index.js │ │ ├── index.json │ │ └── index.wxss │ └── logs │ ├── logs.wxml │ └── logs.js └── utils

Why not use WeChat’s native writing method?
Mini programs are similar to mobile apps, they all have a tabBar, right? WeChat’s official tabBar is configured globally in app.json. There is no problem in general development, but when it comes to a complex tabBar, it cannot be implemented using the official native one, and it cannot be loaded dynamically, such as the photo and video function in the middle of a video app. This means that we cannot use the tabBar provided by the official, we need to write our own At first, my approach was to keep the original structure and just write the tabBar myself, so the page code was written in a file. The first screen was displayed by default, and the others were hidden. When switching pages, the corresponding page was displayed, the others were hidden, and the data was dynamically rendered. But there is a problem. If you have a small project, there will be no big problem. But if it is a large project, the amount of code is very large, and it is all written in one file. It is difficult to maintain later, so this method was eventually passed.

Later, the method of switching pages was changed to jump (wx.switchTab, etc.), and the codes of different pages were placed in different files. However, there was another problem. The switching would also flash. Every time the page was switched, it was like reopening a web page. The tabBar was re-rendered, so it would flash. pass

As a result, there is now a new architectural approach: Define all the files under /pages/index/ as entry files, js entry, css entry, and view entry. Files for different pages should be placed in different locations. For easier management, a new template folder is created to store the code between different pages. The structure is the same as the official one but the page structure is the same. app.js in the root directory is used to store global functions, and other page calls only require getApp() js entry file

const app = getApp(); var index_js = require("../../template/index/index.js"); var types_js = require("../../template/types/types.js"); var Global_Data = []; Page({ data: { active: 0, show: { index: true, types: false, course: false, user: false } },

onLoad(options) {
    this.setData({
        Global\_Data: index\_js.getData()
    })
},

// Bottom nav switch
tabbar\_onChange(event) {
    var key = '';
    this.data.show = {
        index: false,
        types: false,
        course: false,
        user: false
    };
    console.log(event)
    switch (event.detail) {
        case 0:
            key = 'index';
            Global\_Data = index\_js.getData();
            break;
        case 1:
            key = 'types';
            Global\_Data = types\_js.getData()
            break;
        case 2:
            key = 'course';
            Global\_Data = index\_js.getData();
            break;
        case 3:
            key = 'user';
            Global\_Data = index\_js.getData();
            break;
    }
    this.data.show\[key\] = true;
    console.log(Global\_Data)
    this.setData({
        show: this.data.show,
        Global\_Data: Global\_Data
    })
},

});

wxml entry file