# Weixin Mini Program Introduction

Weixin Mini Program is a new way to connect users and services that can be easily accessed and distributed within WeChat while providing a great experience.

# Weixin Mini Program History of Technology

Weixin Mini Program is not a concept that just came out of nowhere.When WebView in WeChat gradually became an important portal for the mobile Web, WeChat has the relevant JAPI.

Listing 1-1 Preview images with Weixin JSBridge

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 a JS API that calls the WeChat native component to browse images, which is very simple and efficient compared to introducing an additional library of JS image preview components.

In fact, WeChat has not been officially exposed as such, and such APIs were originally made available for some internal Tencent businesses, and many outside developers discovered them and used them as they pleased, gradually becoming the de facto standard for web pages in WeChat.In early 2015, WeChat released a web development kit, called JS-SDK, which includes dozens of APIs such as photography, recording, speech recognition, QR code, map, payment, sharing, card voucher, etc. It opens a new window for all web developers, so that all developers can use the native capabilities of WeChat to accomplish something that was impossible or difficult to do before.

Again, the native view image is called in the manner shown in code Listing 1-2.

Listing 1-2 Calling the Picture Preview Component with JS-SDK

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)
  }
})

The JS-SDK, a packaging of the previous Weixin JSBridge and the release of new capabilities and a transition from internal to open to all developers, garnered great attention in a very short period of time.From the data monitoring point of view, most of the mobile web pages spread in WeChat have used the relevant interface.

The JS-SDK solves the problem of inadequate mobile web capabilities by exposing the WeChat interface to enable web developers to have more capabilities, but beyond the increased capabilities, the JS-SDK's pattern does not solve the problem of poor experience with mobile webpages.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 an enhanced version of JS-SDK with an important feature called "WeChat Web Resource Offline Storage."

The following text is quoted from internal documents (which were not eventually opened to the public):

WeChat Offline Storage of Web Resources is a WeChat based web acceleration solution for web developers.

By using WeChat offline storage, web developers can use the resource storage capabilities provided by WeChat to load web resources directly from WeChat locally without having to pull them from the service, thereby reducing page load times and providing a better web browsing experience for WeChat users.All web apps under each Official Account can cache up to 5 megabytes of resources.

This design is similar to the HTML5 ApplicationCache, but circumvents some of the shortcomings of ApplicationCache in design.

In internal tests, we found that offline storage solved some problems, but still had white screen problems for complex pages, such as pages that loaded large amounts of CSS or JavaScript files. In addition to the white screen, the problem that affects the Web experience is the lack of operational feedback, mainly in two aspects: the stiffness of the page switch and the lag of the click.

The problem facing WeChat is how to design a better system so that all developers can get a better experience in WeChat.This is a problem that the previous JS-SDK couldn't handle, and requires a completely new system that will enable all developers to:

- Quick loading

- More powerful capabilities

- Native Experience

- Easy-to-use and secure WeChat data open

- Efficient and simple development

This is where Weixin Mini Program comes from.

# Weixin Mini Program Difference from Normal Web Development

Weixin Mini Program The main development language is JavaScript. Mini Program development has many similarities to ordinary web development. For front-end developers, the cost of migrating from web development to Mini Program development is not high, but the two are still somewhat different.

In web development, rendering and scripting tasks are mutually exclusive, which is why long scripting can cause a page to lose its response, whereas in Weixin Mini Program, they are separate and run in different threads. Web developers can use the DOM APIs exposed by various browsers for DOM selection and manipulation. As mentioned above, the Mini Program's logic layer and the rendering layer are separate, and the logic layer runs in a separate JS runtime that is different from the rendering layer, so it cannot use the DOM API and BOM API directly. This distinction has led to libraries that front-end developers are very familiar with, such as jQuery, Zepto, etc., not being able to run in Mini Programs. At the same time, the JS runtime of the logical layer is not the same as the NodeJS environment, so some NPM packages can not be run in the Mini Program.

Web developers need to face the environment is a variety of browsers, PC side needs to face IE, Chrome, QQ browser, etc., in the mobile terminal needs to face Safari, Chrome, iOS, Android system in all kinds of WebView. While the Weixin Mini Program development process faces the WeChat clients of the two major operating systems, iOS and Android, as well as the Mini Program developer tools to aid development, the three major Mini Program runtime environments are also different, as shown in Table 1-1.

Table 1-1 Operating environment for Weixin Mini Program

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

# Experience Weixin Mini Program

Developers can use WeChat guest (6.7.2 and above version) to scan the code below Weixin Mini Program code to experience the Mini Program.

View Weixin Mini Program sample source code