preface

Why applets?

We from the Angle of the product, the small program was originally comes first in the WeChat, so why is comes first in the WeChat, rather than in the other APP, because it is a super WeChat APP, small program is the super APP development to a certain stage inevitable product, it is about the future commercial products related to ecological layout, the essence of it? It’s actually a carrier. It is not much different from the APP we download in the APP store, except that it is relatively closed, and it depends on the APP, can not exist without the APP, we load the small program in the APP, can mix with the APP, produce different value. Small program is based on the comprehensive ecology of a super APP, which can cover bus, subway, ant forest, registration, take-out and other functions. These small program apps have become more valuable platforms for users. After all, who doesn’t get up every day to steal energy ~😄

A small program and WEB differences

Small program classification

  • Design flow as the carrier (wechat)
  • Take information transmission traffic as carrier (Today’s Headlines)
  • Take transaction attributes as the carrier (Alipay)

Applets feature

  1. It’s within reach. It’s ready to go

Small program is a kind of application that can be used without downloading and installing, and can reach users at the lowest cost, greatly reducing the threshold of use.

  1. Traffic mutual conductance, function supplement

Small programs rely on the platform ecology, there are offline scanning code, sharing, search and other entrances. Help each platform to make the function supplement, but also bring more traffic to the platform.

  1. Improve the experience, comparable to the original

The small program adopts the mode of separating logic and rendering. Meanwhile, some components use Native for rendering, and through resource management and other ways, it helps the small program load faster and use more smoothly.

Technical differences between applets and the WEB

  1. Small programSome components are implemented directly via nativeCamera, Canvas, video, Map, Textarea, etc
  2. The applet will be inDo resource caching on the end, destroy, control the cycle of small programs, so that small programs can be loaded more quickly
  3. Applets in architectureLogic and rendering are separatedThe WEB is in the same process

Ecological differences between applets and the WEB

  1. Small programRestrictions have been tightened in all areasThe immediate consequence of separating rendering from logic is that much of what was previously available on the WEB can no longer be used directly and must be developed within the rules given by the platform to facilitate control by the platform.
  2. Each end provides an official entrance, including scan code, my small program, article embedded and so on, and can be quickly shared.
  3. Release is controlled by each platform, withUnified application version management

Applets Architecture (core content)

Before we go into applets architecture, let’s take a look at the process of applets development.

JSSDK was first provided by wechat. JSSDK is to open the capabilities on wechat through JS to use web pages. By introducing JSSDK to realize some functions, JSSDK improves the capabilities, but does not improve the experience. For example, when we open a web page in wechat, it is actually opened in the browser kernel of wechat. It’s not much different than when the browser is open, such as a blank screen, not as smooth when switching, and more importantly, security issues. To solve these problems, there are new development solutions. In the beginning, Wechat considered the react-Native solution instead of Swift or Java development. However, it finally abandoned the react-Native solution because of the many bugs and almost no maintenance. React – Natice does not support CSS, and React – Native has some problems, such as potential protocol risks

At the same time, we also had to solve the problem that the updated page could not operate DOM, because DOM could not be controlled once it was operated. Finally, we adopted the scheme of virtual DOM, and finally had the following architecture:

In applets, each page is an independent process, similar to the TAB in a browser, each page is independent. The advantage of this is that there is no need to reload resources when switching pages, so that the experience can be optimized.

Second, the development of small programs

Third, small program development scheme

3.1 Developer Tools

No matter which small program, we need the corresponding platform to register our developer account, we need to use a developer tool provided by the platform to develop small program.

3.2 Introduction to applets syntax — data binding

Rendering layer

<view>{{message}}</view>
Copy the code

Logic layer

Page({
    data: {message: 'Hello World! '}})Copy the code

3.3 Applets syntax introduction – list rendering

Rendering layer

<view tt:for="{{array}} tt:for-index="index" tt:for-item="item">
{{index}}:{{item.message}}
</view>
Copy the code

Logic layer

Page({
    data: {array: [{
            message: 'foo'}, {message: 'bar'}]}})Copy the code

3.4 Applets syntax introduction — conditional rendering

<view tt:if="{{length > 5}}">1</view>
<view tt:elif="{{length > 2}}">2</view>
<view tt:else>3</view>
Copy the code

3.5 Applets Syntax introduction – Page object

Page({
    data: {a: [].b: 2
    },
    onAdd(){
    // this.data.b = this.data.b + 1 does not cause view updates
    this.setData({
        b: this.data.b + 1})}})Copy the code

3.6 Other development schemes

How to improve development efficiency? Is there a framework like Vue and React for developing applets? The answer is yes

Taro is an open cross-end framework solution that allows us to use Vue and React to develop small applications. It helps us do transformations.

Writing contrast

Four, Taro principle simple analysis

React/Vue. Think about it a little bit.

Taro compile-time scheme – AST Abstract syntax tree

AST specific reliable reference:astexplorer.net

The downside of this compile-time scheme is thatYou can't completely erase the differences, there are writing restrictions.

Taro runtime solution – virtual DOM Template component

The downside of this run-time approach is thatPoor performance in some cases.

The last

⚽ this article with you to understand the process of small program and small program development programs, etc. ~ ⚾ if you are interested in this article welcome to praise attention + collection, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript