Introduction to the small program

Small programs are a new way to connect users and services that can be easily accessed and disseminated within WeChat, while having a great experience.

History of small program technology development

Small programs are not a concept that comes out of no sing. As WebView in WebView an important entry point for mobile Web, WeChat has JS API

Code Listing 1-1 Preview WeixinJSBridge

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        '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 JS API that calls WeChat native components to browse pictures, which is more JS efficient than the introduction of an additional library of JS picture preview components.

In fact, WeChat officials have not exposed such calls, API provided to Tencent's internal business use, many external developers found out, according to the Hulu painting, gradually become the factual standard of WeChat web pages. I n early 2015, WeChat released a web development kit called JS-SDK which opens dozens of APIs for shooting, recording, speech recognition, QR code, maps, payment, sharing, and API It opens a whole new window for all web developers to use WeChat's native capabilities to do things they couldn't or couldn't do before.

It is also called the native browsing picture, the call mode is as shown in the code list 1-2.

Code List 1-2 JS-SDK Call the picture preview component

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    '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 a packaging for the previous WeixinJSBridge as well as the release of new capabilities, and was switched from open to open to all developers, gaining great attention in a very short period of time. From the data monitoring point of view, the vast majority of mobile web pages spread within WeChat are using the relevant interface.

​JS-SDK the problem of insufficient mobile web capabilities, enabling Web developers to have more capabilities by exposing WeChat's interfaces, but beyond that, the JS-SDK model does not solve the problem of poor experience with mobile web pages. W hen a user visits a Web page, there is a white screen process before the browser starts displaying, which is more noticeable on the mobile side, limited by device performance and network speed. O ur team focused a lot of technical effort on how to help web developers on the platform solve this problem. So we designed an JS-SDK which has an important feature called WeChat Web Resource Offline Storage.

The following text refers to the document from the inside (no final opening):

WeChat Web Resources Offline Storage is an in-WeChat-based web acceleration solution for web developers. B y using WeChat offline storage, web developers can use the resource storage capabilities provided by WeChat to load web resources directly from WeChat without having to pull them from the service side, thereby reducing web load time and providing WeChat users with a better web browsing experience. All web apps under each public number can cache up to 5M of resources.

This design is a bit like Application Cache but it avoids some Application Cache

In internal testing, we found that offline storage can solve some problems, but there are still white-screen problems with some complex pages, such as pages loaded with a large number of CSS or JavaScript files. In addition to the white screen, there is a lack of operational feedback on issues that affect the Web experience, mainly in two ways: the stiffness of page switching and the sluggishness of clicks.

The problem with WeChat is how to design a better system so that all developers can get a better experience in WeChat. This problem is something JS-SDK couldn't handle, and it needed a completely new system to do it, and it needed to make it possible for all developers to:

- Fast loading

- More powerful capabilities

- Native experience

- Easy-to-use and secure WeChat data openness

- Efficient and simple development

That's where the little program comes from.

The difference between a small program and a normal web development

The primary development language for small programs is JavaScript, and the development of small programs is very similar to normal web development. For front-end developers, moving from web development to small programs is not expensive to develop, but there are some differences between the two.

Web development rendering threads and script threads are mutually exclusive, which is why long script runs can cause pages to lose their response, where as in small programs, they are separate and run on different threads. W eb developers can use doM APIs exposed to a variety of browsers for DOM selection and operation. A s mentioned above, the logical layer of the small program is separate from the render layer, which runs in JSCore and does not have a complete browser object, and therefore lacks the relevant DOM and BOM APIs. T his distinction has led to the front-end development of libraries that are very familiar, such as jQuery, Zepto, and so on, that cannot be run in small programs. JSCore's environment is also different from nodeJS's, so some NPM packages don't work in small programs.

Web developers need to face a wide variety of browsers, PC side need to face IE, Chrome, QQ browser, etc., in the mobile side need to face Safari, Chrome and iOS, Android systems of all kinds of WebView. The development of small programs need to face the two operating systems iOS and Android WeChat clients, as well as small program developer tools for auxiliary development, the three operating environments in small programs are also different, as shown in Table 1-1.

Table 1-1 The operating environment of the small program

Web developers only need to use the browser when developing web pages, with some accessibility tools or editors. The development of small programs is different and needs to go through the process of applying for a small program account number, installing small program developer tools, configuring projects, and so on.

Experience small programs

Developers can experience the small program code below the weChat client (6.7.2 and above).

View the sample source code for the small program