preface

As a college student who is about to graduate, I know how many students with poor foundation do not finish their graduation project. In our own major, the graduation project is generally developed in the form of small programs or websites, and one person must carry out the whole process of development of the front and back ends.

Therefore, I conceived whether I could develop an open source small program with relatively wide coverage, rapid transformation, rapid migration and deployment, and relatively easy technology stack. At first, I thought of developing a small mall program, but the transformation of the mall is not strong, so I chose to develop a more versatile community forum program.

Why says the joker, you need to have a certain particularity, of course, but this and small program need joker, community small program can be very convenient to a variety of other types of small program, theme color change a black small program is the trend of the community, instead of a yellow is convenient campus small program, change to a red is small party school training program, Blue is the tech forum community.

😊 in short, science and technology to skin – based

Click here to get the source code at 👇

Oil Community Gitee warehouse link

As a result of personal developers can not be online, if you want to see the effect can be private letter I ha, below put a part of the small program display picture 👇

Home page

The sidebar

The article details

Personal home page

Release form

My attention

There are also some display of CMS background

Installation and Deployment

As there are still a few features under development, the installation and deployment process will be improved, welcome to pay attention to

Realized function

• Theme colors that can be quickly configured
• Home list display, round – cast chart
• Article, user search function
• Publish articles, edit and upload pictures
• Comment, like, share
• User login, logout, personal information editing, attention, personal home page
• Real-time message notification
• CMS background management system generated

Technology stack

Native wechat small program

Cloud development (eliminating the back end and backend)

Colorui Style Library (Focus, improve development efficiency)

The theme style

The default is #008080 turquoise

The development train of thought

Cloud development was chosen as the cloud development solves the graduation design in the back-end development and management background two problems, we can directly through the cloud function in a small program implementation and the database interactions, saves the backend server deployment process of language learning – not only that, background management system can be directly generated directly by CMS cloud development!

So our only task is to develop a small program!

The development of specification

Because cloud development CMS is not compatible with linked tables, most of the tables use redundant fields so that CMS can quickly query data.

In order to make it easier for developers to migrate and transform during development, I try to avoid some methods that must be executed in cloud functions, such as the lookup method, and choose almost all database methods that can be executed directly in the small program side.

The whole modular way can refer to my article # native applet also want to write cool ~ teach you how to elegant in the small program modular

How to use async await in small programs

The directory structure

Oil - community ├ ─ ─ cloudfunctions cloud function directory │ ├ ─ ─ post │ └ ─ ─ the user └ ─ ─ miniprogram ├ ─ ─ components common component directory ├ ─ ─ lib has nothing to do with general approach directory business ├ ─ ─ miniprogram_npm NPM package ├ ─ ─ pages all pages ├ ─ ─ the static static file directory ├ ─ ─ the template page template directory └ ─ ─ utils generic methods related to the business directoryCopy the code

utils

Common business-related methods are placed in the utils folder

router

Hops that require parameters and need to be reused are placed in the corresponding module in the utils/ Router directory

Here is one of the modules:

//post.js
module.exports = {
  showPostForm(type = "add", postId) {
    // Jump to article details
    wx.navigateTo({
      url: `/pages/form/post-form/post-form? type=${type}&postId=${postId}`,}}),showPostDetail(postId) {
    // Jump to article details
    wx.navigateTo({
      url: `/pages/post-detail/post-detail? postId=${postId}`,}}),showPostList({ title, type }) {
    wx.navigateTo({
      url: `/pages/post-list/post-list? type=${type}&title=${title}`,}}}Copy the code

request

Requests that require parameters and need to be reused are placed in the corresponding module in the utils/ Request directory

Here is one of the modules:

// request.js
const db = wx.cloud.database()
const _ = db.command
const $ = db.command.aggregate
module.exports = {
    getUser(userId) {
        const getUserInfo = db.collection("user")
            .doc(userId)
            .get()
        // Get the number of user posts
        const getPostNum = db.collection("post")
            .where({ userId })
            .count()

        // Get the total number of likes from the user
        const getFavorNum = db.collection("post").aggregate()
            .match({ userId })
            .group({
                _id: null.favorNum: $.sum('$favorNum')
            })
            .end()
        return Promise.all([getUserInfo, getPostNum, getFavorNum])
    },
    getUserList(match = {}, project = {}, lastTime = new Date().getTime()) {
        return db.collection("user") .aggregate() .project({ ... project,fansNum: true.avatarUrl: true.intro:true.nickName: true.createTime: true
            })
            .match({ createTime: _.lt(lastTime), ... match }) .sort({createTime: -1 })
            .limit(10)
            .end()
    }
}
Copy the code

lib

Business-neutral generic methods are in the lib directory. In fact, many lib methods should be generic methods in the utils directory, but personal habits distinguish methods in terms of whether or not they are coupled to the business

In the lib directory, all methods can be used directly even if they are migrated to another applet,

Here is one of the modules:

// modal.js generic popover method
const config = getApp().globalData.config
module.exports = {
    // A confirmation dialog box is displayed with a cancel button
    async showConfirm(title, confirmText = "Confirm") {
        const res = await wx.showModal({
            title,
            cancelColor: '#b6b6b6',
            confirmText,
            confirmColor: config.primaryColor,
        })
        if (res.cancel) {
            return false
        } else if (res.confirm) {
            return true}},// A dialog box is displayed without the cancel button
    async showMessage(content, confirmText = "Confirm") {
        await wx.showModal({
            title: 'tip',
            content,
            showCancel: false,
            confirmText,
            confirmColor: config.primaryColor,
        })

    }

}
Copy the code

When calling, my personal habit is to introduce on demand, that is, require a module separately in each JS. The usage is as follows:

//home.js
// Introduce methods
const app = getApp()
const debounce = app.require("lib/debounce")
const loginCheck = app.require("utils/loginCheck")

Page({
    / /... do someting
})
Copy the code

But if you want to be lazy, you don’t want to introduce it in modules, you want to reduce the code a little bit. You can also write an entry file called index.js for all common methods, and expose index.js to app.js and mount it after all modules have been uniformly introduced into index.js

Specific operations are as follows

// index.js
const fileSystemManager = wx.getFileSystemManager()
const moduleArr = fileSystemManager.readdirSync("/lib")
    .filter(item= > {
        return item.split(".") [1= = ="js"
    })
    .map(item= > {
        return { [item.split(".") [0]] :require(item) }
    })
module.exports = { ... moduleArr }Copy the code

Add it to app.js

const lib = require("./lib/index") App({ ... lib/ /... do something
})

Copy the code

Reference documentation

• Cloud Development Documentation