# Introduction to Small Programs

Mini Programs are a new way to connect users and services, which can be easily accessed and disseminated within WeChat, while having an excellent user experience.

# History of Small Program Technology

A Mini Program is not a concept that comes out of nowhere. When the WeChat WebView Gradually become mobile. Web An important entrance to the WeChat. JS API And...

Code Listing 1-1 use WeixinJSBridge Preview image

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/Newsapp _bt/0/1693121381/641',
    urls: [ // A list of URLs for all images, in 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 )
})

Code 1-1 is a call WeChat native component to browse pictures of JS API, compared to the introduction of an additional JS image preview component library, this call is very simple and efficient.

In fact, WeChat official is not exposed to the outside world so called, such API At first, it was provided to Tencent's internal business use, and many external developers found it, and it was used according to the gourd painting, and gradually became the de facto standard for WeChat web pages. In early 2015, WeChat released a complete set of web development kits, called JS-SDK, open shooting, recording, speech recognition, two-dimensional code, maps, payment, sharing, card vouchers and so on dozens of APIs. For all the Web Developers have opened a whole new window, allowing all developers to use WeChat's native capabilities to do things that were previously impossible or difficult to do.

Again, the native browse image is invoked as shown in Listing 1-2.

Code Listing 1-2 use JS-SDK Calling the Picture Preview Component

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // A list of URLs for all images, in 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 is a response to the previous WeixinJSBridge The release of new capabilities and the move from internal openness to openness to all developers has garnered a lot of attention in a short space of time. From the data monitoring point of view, most of the mobile web pages spread in WeChat use the relevant interface.

JS-SDK Solve the problem of insufficient mobile web capabilities, by exposing the interface of WeChat makes Web Developers can have more capabilities, but in addition to more capabilities, JS-SDK The model does not solve the problem of poor experience with mobile web pages. When a user visits a web page, there will be a white screen before the browser starts to show the process, in the mobile terminal, limited by the device performance and network speed, the white screen will be more obvious. Our team put a lot of technical effort into how to help web developers on the platform solve this problem. So we designed a JS-SDK Of the enhanced version, which has an important feature called “Weixin Web Resources Offline Storage”。

The following is a quote from an internal document (not ultimately open to the public):

Weixin Web Resource offline storage is geared toward Web Provided by the developer based on the WeChat inside Web Accelerated program.

By using WeChat offline storage, Web Developers can use the resource storage capacity provided by WeChat to load directly from WeChat local Web Resources do not need to be pulled from the server, thereby reducing page loading time and providing a better web browsing experience for WeChat users. All under each Official Account message template Web App Cumulative maximum cache 5M Of resources.

This design is similar. HTML5 of Application Cache, but is designed to circumvent some of the Application Lack of cache.

In our internal tests, we found Offline storage Can solve some problems, but for some complex pages will still have white screen problems, such as the page loads a lot of CSS Or is it JavaScript Documents.In addition to the white screen, the impact Web The problem of experience is the lack of feedback from the operation, mainly in two aspects: the rigidity of page switching and the hysteresis of clicking.

WeChat is facing the problem of how to design a better system, so that all developers can get a better experience in WeChat. This question is from before JS-SDK What can't be done requires a whole new system that enables all developers to do:

- Fast loading

- More powerful ability

- The Native Experience

- Easy to use and secure WeChat data open

- Efficient and simple development

This is the origin of the Mini Program.

# The difference between Mini programs and ordinary web development

The main development language for Mini programs is JavaScript , the development of Mini programs is very similar to the development of ordinary web pages. For front-end developers, the development cost of migrating from web development to Mini Programs is not high, but there are still some differences between the two.

The rendering thread and the scripting thread are mutually exclusive, which is why a long script run can cause a page to become unresponsive, while in Mini Programs, the two are separate and run in separate threads. Web developers have access to a variety of browsers exposed DOM API, carried out DOM Selected and operated. And as mentioned above, the logic layer and the rendering layer of the Mini Program are separate. The logic layer runs on the JSCore Does not have a full browser object, and therefore lacks the associated DOM API and BOM API。This distinction leads to some libraries that front-end developers are very familiar with, such as jQuery, Zepto Etc., cannot be run in the Mini Program. meanwhile JSCore The environment with NodeJS The environment is also different, so some NPM The package also does not work in the Mini Program.

Web developers need to face the environment is a variety of browsers, PCs End need to face IE, Chrome, QQ browser, etc., in the mobile terminal to face Safari, Chrome and iOS、Android Various types of systems WebView And the Mini Program development process needs to face the two major operating systems iOS and Android The WeChat client, as well as the Mini Program developer tools used to assist the development, the three operating environments in the Mini Program are also different, as shown in Table 1-1.

Table 1-1 Mini Program operating environment

Web developers in the development of web pages, just use the browser, and with some auxiliary tools or editors can be. The development of Mini programs is different, and needs to go through the process of applying for Mini Program accounts, installing Mini Program developer tools, configuring projects, and so on.

# Experience Mini Program

Developers can use WeChat client(6.7.2 And above version)Scan the code below the Mini Program code, experience Mini Program.

[View small sample source code](https://github.com/WeChat mini-program /miniprogram-demo)