Youth Training Camp | "Complete Guide to Mini Program Technology" Notes

Finally, the course I've been looking forward to has arrived~~

Course Objectives:

Understand and learn about the business product value of mini programs
Learn and master the technical principles related to mini programs

Development History of Mini Programs#

Development History#

Core Data#

Mini Program Ecosystem#

Business Value#

Differences from WEB#

Has fixed syntax and unified version management, making it easier for the platform to review
The platform can control various entry points, such as QR codes, embedded articles, and in-app sharing. This also brings a better user experience at the entry points.
Mini programs are based on a special architecture, providing a smoother experience than WEB, with better navigation experience.

Three Major Values#

Channel Value#

Convenient traffic diversion

Due to the convenience of mini programs, relying on super platforms, mini programs can effectively divert traffic for many scenarios. For example, the traffic share brought by Meituan and Meituan Preferred WeChat mini programs is 40% and 80%, respectively.

Business Exploration Value#

Rapid trial and error

Compared to native apps, the development difficulty and cost of mini programs are significantly lower, creating many scenarios where developers can use mini programs to quickly trial and error, continuously exploring new business values.

Digital Upgrade Value#

Large margin for error, wide coverage

How to transition from offline to online? From light consumption fast food and tea drinks to large consumption like real estate and automobiles, mini programs have shown good margins for error. The coverage of mini programs in offline scenarios is very broad.

Technical Analysis of Mini Programs#

Principles of Mini Programs#

What is the simplest and most convenient way for third-party developers to create applications?

WebView + JSBridge
- WebView: The environment provided by mobile devices to run JavaScript, equivalent to a browser page within the app.
- JSBridge: As the name suggests, it serves as a bridge for developers to call some APIs of the app itself.

Several issues:

Poor experience in offline situations
Poor experience when switching pages
How to control and ensure security

Mini programs solve these problems through the following methods:

Low development threshold——HTML+JS+CSS
Near-native user experience——resource loading + rendering + page switching
Security control——independent JS sandbox: isolates DOM operations
- How to control page rendering without manipulating the DOM?
- Data -> Process DOM based on data -> Page

Syntax of Mini Programs#

As shown: For example, Byte mini programs use TTML/JS/TTSS, while WeChat mini programs use WXML/JS/WXSS, corresponding to HTML/JS/CSS.

Implementing a Simple Pomodoro Timer#

Let's try to implement a Pomodoro timer as shown in the image on WeChat mini programs~ (the syntax of different mini programs is largely similar).

Code Snippet

Pomodoro Timer.gif

Writing tomatoClock.wxml (html)#

First, let's create a simple interface using HTML~

<view class="container">
  <view class="clock">{{timeText}}</view>
  <button wx:if="{{running}}" class="button" bindtap="onReset">Reset</button>
  <button wx:else class="button" bindtap="onStart">Start</button>
</view>

{{timeText}} implements two-way binding between the page and the data in JS (when this data updates, the page will also render~).

Writing tomatoClock.js#

Write JS to bind event functions and the data for this page.

// pages/apply/tomatoClock/tomatoClock.js
const DEFAULT_TIME = 25*60;	// 25 minutes
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const mText = `0${minutes}`.slice(-2);
  const sText = `0${seconds}`.slice(-2);
  return `${mText} : ${sText}`;
}

By truncating from the back to achieve leading zero completion, we can display two-digit time (learned!).

Next is event handling. The setTimer function sets a timer with a 1s interval, initializing time to the default time, decreasing the current time by 1 every second (the page will also refresh), the onStart event sets the timer and sets running to true when starting, and the onReset event clears the timer, sets running to false, and resets timeText to the default time when resetting.

Page({
  /**
   * Initial data for the page
   */
  data: {
    timeText: formatTime(DEFAULT_TIME),
    running: false
  },
  setTimer:function() {
    this.timer = setInterval(() => {
      this.time = this.time - 1;
      if(this.time < 0) {
        clearInterval(this.timer);
        return;
      }
      this.setData({
        timeText: formatTime(this.time)
      })
    }, 1000);
  },
  // Event function to set the timer and set running to true when starting
  onStart: function() {
    if(!this.timer) {
      this.time = DEFAULT_TIME;
      this.setTimer();
      this.setData({
        running: true
      })
    }
  },
  // Event function to clear the timer, set running to false, and reset timeText to default time when resetting
  onReset: function() {
    clearInterval(this.timer);
    this.timer = null;
    this.time = DEFAULT_TIME;
    this.setData({
      timeText: formatTime(DEFAULT_TIME),
      running: false
    });
  },
  // else lifecycle function (page loading, rendering, etc.)
})

Writing a bit of wxss (css)#

You can implement global common CSS like container in app.wxss.

/**app.wxss**/
page { background-color: #97ABFF; }
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 200rpx 0;
  box-sizing: border-box;
  background-color: #97ABFF;  
}

In the page's own CSS (index.wxss), write the CSS needed for that page~

/**index.wxss**/
.clock {
  line-height: 400rpx;
  width: 400rpx;
  text-align: center;
  border-radius: 50%;
  border: 5px solid white;

  color: white;
  font-size: 50px;
  font-weight: bold;
}

.button {
  margin-top: 200rpx;
  text-align: center;
  border-radius: 10px;
  border: 3px solid white; 
  background-color: transparent;

  font-size: 25px;
  color: white;
  padding: 5px 10px;
}

What is a cross-end framework?

Complex application construction
One-time development can be cross-end (WeChat mini programs, various mini programs, etc.)

Introduction to Cross-End Frameworks#

Principles of Cross-End Frameworks#

Compile Time#

AST Syntax Tree#

Abstract Syntax Tree - Wikipedia

In computer science, an Abstract Syntax Tree (AST) is an abstract representation of the syntax structure of source code. It represents the syntax structure of programming languages in a tree-like form, where each node in the tree represents a structure in the source code. The term "abstract" refers to the fact that the syntax does not represent every detail that appears in the actual syntax. For example, nested parentheses are implied in the structure of the tree and are not presented as nodes; conditional jump statements like if-condition-then can be represented using nodes with three branches.

In contrast to the abstract syntax tree is the concrete syntax tree (often referred to as parse tree). Generally, during the translation and compilation of source code, a parser creates a parse tree, which is then used to generate the AST. Once the AST is created, additional information can be added during subsequent processing, such as in the semantic analysis phase.

Parsing -> Generating AST Syntax Tree -> Generating Page

For example:

<View>{foo ? <View /> : <Text />}</View>

-> Transformed into Byte mini program syntax

<view><block tt: if={foo}><view /></block><block tt:else><text /></block></view>

Natural flaw: cannot completely smooth out differences!

Mini programs themselves have many limitations.
Therefore, most solutions are runtime solutions.

Runtime#

Virtual DOM#

Essentially an object in JS, containing many properties and tags from the DOM, through which we can generate our actual DOM.

Template Components#

Dynamically generated templates provided in mini programs.

Runtime Structure#

Runtime solutions are not perfect either.
In some scenarios, performance may be worse than the native mini program syntax.
In most scenarios, it works well!

Summary and Reflections#

This lesson roughly explained the development history and technical analysis of mini programs, and implemented a simple Pomodoro timer mini program~

Most of the content cited in this article comes from Teacher Zhang Xiaowei's class.