360 Front-end Star Project-Big World of Small Programs (Liu Guanyu)

1 Introduction

1.1 What problem does the applet solve

Insert picture description here

1.2 Applet technology stack

  • HTML/CSS/JavaScript
  • NodeJS
  • Mobile adaptation
  • HTTP protocol / HTTPS
  • OAuth2 authentication
  • GIT

1.3 The main applet platform

Insert picture description here

1.3 Technology like applets

  • Cordova: rendering through webview, calling system services through plugins
  • PWA:Service Worker和Push API
  • React Native / Weex: JavaScript is executed through JavascriptCore, etc. and interacts with Native components through Bridges
  • Flutter: Dart directly interacts with the UI library of the independent system

2. Small program technical architecture

2.1 File structure and its meaning

  • .json后缀的JSON配置文件
    Insert picture description here
  • .wxml后缀的WXML模板文件
    • Essentially HTML template
    • Has a specific label
    • Take over some simple logical judgments
    • JS does not directly manipulate the DOM, only responsible for set data based on data-driven mode
  • .wxss后缀的WXSS样式文件
    • Provide rpx unit Provide screen width and 750 ratio
    • Streamlined CSS
    • Provide global and local CSS
  • .js后缀的JS脚本逻辑文件
    • Responsible for logical interaction
    • Three constructors of APP, Page and Component
    • Callable system API

2.2 Dual thread model

Insert picture description here

2.3 Life cycle

Insert picture description here

2.4 Components

Insert picture description here

2.5 Other

  • Plugin mechanism
  • Cloud functions
  • Games

3. Development and release process

WeChat Mini Program

  • The developer registers the applet on the applet platform to obtain the APPID
  • Initialize the code and complete the code warehouse configuration
  • Develop code and debug
  • Upload and post

4. Development of small programs

4.1 Multi-terminal isomorphic framework

  • Significance: Write multiple adaptations at one time, and synchronize each end at one iteration
  • Take advantage of the Web and dynamically adapt to various platforms

kbone :Insert picture description here

4.2 Automation

  • Control the applet to jump to the specified page
  • Get applet page data
  • Get applet page element status
  • Trigger applet element binding event
  • Inject code snippets into AppService
  • Call any interface on wx object

4.3 Hardware framework

Insert picture description here

4.4 Alipay Cloud IDE

Alipay Cloud IDE

4.5 W3C Mini Program Working Group

Insert picture description here

Published 8 original articles · Likes0 · Visits 48

Guess you like

Origin blog.csdn.net/liu_ye96/article/details/105464601