Introduction and Development Environment ​

Mini Program is a new way to connect users and services. It can be easily obtained and spread within the application, and it has an excellent user experience. Any ordinary developer can easily complete the development and release of a mini program after simple learning and practice.

1.Hello World ​

Before introducing the history and technical details of mini programs in detail, please follow our steps to complete the development of the Hello World example.

  • The first step is to download the corresponding installation package according to your operating system and install it.
  • The second step is to open the Luffa Cloud developer tool and choose to create a new mini program project. We don’t need to understand the concept of AppID first. When creating a new project, select No AppID and uncheck the option of 'Create a normal quick start template'.
  • The last step is to add the necessary code.
Create app.json in the root directory, and its content is as follows.
js
{

  "pages": ["pages/index/index"]

}
Create a new pages directory in the root directory, and then create a new index directory in the pages directory, and then create two files index.wxml and index.js in the index directory.

The content of index.wxml is as follows.

js
<text>Hello World</text>
The content of index.js is as follows.
js
Page({})
By writing the above few lines of code, Hello World is displayed on the simulator interface of the Luffa Cloud developer tool.

2.Introduction to Mini Programs ​

2.1 History of Mini Program Technology Development ​

From a technical perspective, Mini Programs are not a concept that came out of thin air. When WebView gradually became an important entrance to the mobile Web, JS API also came into being, as shown in the following code:

js

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // URL list of all images, array format
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})
This is a JS API that calls native components to browse images. Compared with the introduction of an additional JS image preview component library, this calling method is very concise and efficient.
In fact, Luffa has never officially exposed such calls to the outside world. This type of API was originally provided to some internal businesses of Luffa. After many external developers discovered it, they used it in the same way, and gradually became the de facto standard for web pages in Luffa.
The platform has a complete set of web development toolkits built in, called JS-SDK, which opens dozens of APIs such as shooting, recording, voice recognition, QR code, map, payment, sharing, and card coupons, opening a new window for all Web developers, allowing all developers to use the native capabilities in the host application to complete some things that were previously impossible or difficult to do.
The same is to call the native browsing image, the calling method is shown in the following code:
js

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // URL list of all images, array format
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})
JS-SDK solves the problem of insufficient mobile web page capabilities. By exposing the interface of the host application, Web developers can have more capabilities. However, in addition to more capabilities, the JS-SDK model does not solve the problem of poor experience when using mobile web pages.
When users visit a web page, there will be a white screen process before the browser starts to display. On the mobile side, due to the limitations of device performance and network speed, the white screen will be more obvious. Our team has put a lot of technical energy on how to help Web developers on the platform solve this problem. Therefore, we have designed an enhanced version of JS-SDK, which has an important function called 'Web resource offline storage'.
This design is somewhat similar to HTML5's Application Cache, but it avoids some of the shortcomings of Application Cache in design.
In internal testing, we found that offline storage can solve some problems, but for some complex pages, there will still be white screen problems. For example, the page loads a large number of CSS or JavaScript files, and the execution time of these files occupies a large number of UI threads. In this case, even if the resources are quickly loaded through offline storage, there will still be a white screen phenomenon on the page. At the same time, the cache of such divided files is more complicated when processing code file updates, and the requirements for developers are higher.
In addition to the white screen, the problem that affects the Web experience is the lack of feedback on operations, which is mainly manifested in two aspects: the stiffness of page switching and the hysteresis of clicks.
For some experienced Web developers, some SPA frameworks will be used to simulate the native page switching transition of the client. The usual way is to simulate multiple pages in a WebView, and achieve click feedback and page switching through CSS processing, plus refined script code, to obtain a better experience. However, not all developers have enough time and energy to make the page experience excellent.
The host application then faces the problem of how to design a better system so that all developers can get a better experience in the host application. This problem cannot be handled by the previous JS-SDK, and a new system is needed to complete it. It needs to enable all developers to do the following:
  • Fast Loading
  • More powerful capabilities
  • Native Experience
  • Easy-to-use and secure data openness
  • Efficient and simple development
This system is the mini program that needs to be elaborated in this book.

2.2 The difference between mini programs and ordinary web page development ​

The main development language of mini programs is JavaScript, so the development of mini programs is usually compared with ordinary web page development. The two have great similarities. For front-end developers, the development cost of migrating from web page development to mini programs is not high, but there are still some differences between the two.
The rendering thread and script thread of web development are mutually exclusive, which is why long-term script running may cause the page to become unresponsive. In mini programs, the two are separated and run in different threads. Web developers can use the DOM API exposed by various browsers to select and operate DOM. As mentioned above, the logic layer and rendering layer of mini programs are separated. The logic layer runs in JSCore, and there is no complete browser object, so there is a lack of relevant DOM API and BOM API. This difference has led to some libraries that are very familiar to front-end developers, such as jQuery and Zepto, not being able to run in mini programs. At the same time, the environment of JSCore is not exactly the same as that of NodeJS, so some NPM packages cannot run in mini programs.
Web developers need to face a variety of browsers. On the PC side, they need to face IE, Chrome, QQ browser, etc. On the mobile side, they need to face Safari, Chrome, and various WebViews in iOS and Android systems. In the process of developing mini programs, you need to deal with the host application clients of the two major operating systems, iOS and Android, as well as the mini program developer tools used to assist in development. The three major operating environments in mini programs are also different, as shown in the following table.
Operating environment
Logic Layer
Rendering Layer
iOS
JavaScriptCore
WKWebView
Android
X5 JSCore
X5 Browser
Mini program developer tools
NWJS
Chrome WebView
When developing web pages, web developers only need to use browsers and match them with some auxiliary tools or editors. The development of mini programs is different. It requires applying for mini program accounts, installing mini program developer tools, configuring projects, etc. to complete.

3.Features of mini programs ​

For ordinary users, mini programs make applications within reach. They can be opened directly by scanning QR codes, searching, or sharing with friends. With excellent experience, mini programs make service providers more accessible.
For developers, the mini program framework itself has fast loading and rendering capabilities, coupled with supporting cloud capabilities, operation and maintenance capabilities, and data aggregation capabilities, so that developers do not need to deal with trivial work and can focus on the development of specific business logic.

3.Mini Program Development Preparation ​

After developers create a mini program on the platform, the corresponding App ID will be automatically generated, and different versions of IDE download addresses will be provided. Developers can choose the appropriate version to download. Some operations can be referred to Quick Start