Introduction to Mini Program

Mini Program is a completely new approach to connecting users with services. It can be easily accessed and shared within WeChat, offering an excellent user experience.

History of Mini Program Technology Development

Mini Program did not emerge out of thin air. As the WebView in WeChat gradually became an important entry point for mobile web, WeChat already had relevant JS APIs available.

Code List 1-1: Previewing Images Using WeixinJSBridge

WeixinJSBridge.invoke('imagePreview', {
 current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
 urls: [// List of all image URLs 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 demonstrates a JS API that calls WeChat’s native component to view images. Compared to introducing an additional JS image preview library, this approach is much simpler and more efficient.

In fact, WeChat never officially exposed such a calling method. These APIs were initially provided for internal Tencent services. After some external developers discovered them, they adopted similar approaches, which eventually became the de facto standard for web pages in WeChat. In early 2015, WeChat released a comprehensive web development toolkit called JS-SDK, exposing dozens of APIs such as camera access, recording, speech recognition, QR codes, maps, payment, sharing, and coupons. This opened up a brand-new opportunity for all web developers, enabling them to leverage WeChat’s native capabilities to accomplish tasks that were previously impossible or difficult to achieve.

For viewing images using native functions, the approach is shown in Code List 1-2.

Code List 1-2: Using JS-SDK to Call the Image Preview Component

wx.previewImage({
 current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
 urls: [// List of all image URLs 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 wrapper around the previous WeixinJSBridge, along with the addition of new capabilities. It shifted from being internal-only to accessible to all developers, attracting significant attention in a short time. According to data monitoring, the vast majority of mobile web pages distributed in WeChat utilize these interfaces.

JS-SDK addressed the limitations of mobile web capabilities by exposing WeChat’s interfaces, giving web developers greater functionality. However, despite these added features, the JS-SDK model did not solve the poor user experience associated with mobile web browsing. When accessing a webpage, there is often a blank screen before the browser content appears. On mobile devices, this blank screen issue is more pronounced due to hardware limitations and slower network speeds. Our team dedicated considerable technical effort to helping web developers on the platform resolve this problem. As a result, we developed an enhanced version of JS-SDK featuring an important feature known as “WeChat Web Resource Offline Storage”.

The following text is excerpted from internal documentation (not officially released to the public):

WeChat Web Resource Offline Storage is a web acceleration solution provided for web developers within WeChat.

By utilizing WeChat’s offline storage capabilities, web developers can directly load web resources from local storage in WeChat without needing to fetch them from servers, thereby reducing page loading times and delivering a better browsing experience for WeChat users. A total of up to 5M worth of resources can be cached across all Web Apps under a single official account.

This design is somewhat similar to HTML5’s Application Cache but addresses some of its shortcomings.

During internal testing, we found that offline storage could resolve some issues, but blank screens still occurred on complex pages, especially those with large amounts of CSS or JavaScript files. Besides blank screens, other issues affecting the web experience include a lack of feedback during interactions, manifested in two main aspects: abrupt page transitions and delayed click responses.

The challenge for WeChat was to design a system that ensured all developers could enjoy a superior experience within WeChat. This was beyond the scope of the previous JS-SDK and required a completely new system that would enable all developers to achieve:

• •Fast loading
• •Enhanced capabilities
• •Native-like experience
• •Easy and secure access to WeChat data
• •Efficient and straightforward development

This is how Mini Program came into being.

Differences Between Mini Program and Traditional Web Development

The primary development language for Mini Program is JavaScript. There are many similarities between Mini Program development and traditional web development, so the cost for front-end developers to transition from web development to Mini Program development is relatively low. However, there are still some key differences.

In traditional web development, rendering tasks and script tasks are mutually exclusive, which is why long-running scripts can cause pages to become unresponsive. In Mini Program, these tasks are separated and run in different threads. Web developers can use various DOM APIs exposed by browsers to select and manipulate the DOM. As mentioned earlier, Mini Program has a separate logic layer and rendering layer, with the logic layer running in an independent JS runtime distinct from the rendering layer. Therefore, DOM APIs and BOM APIs cannot be used directly. This distinction means that libraries commonly used in front-end development, such as jQuery and Zepto, cannot run in Mini Program. Additionally, the JS runtime of the logic layer differs from the NodeJS environment, so some NPM packages also cannot function in Mini Program.

Web developers must deal with a variety of browsers, including IE, Chrome, and QQ Browser on PCs, as well as Safari, Chrome, and various WebView versions on iOS and Android devices. In contrast, Mini Program development focuses on the WeChat clients for iOS and Android, along with the Mini Program developer tools used for assistance. The three runtime environments in Mini Program also differ, as shown in Table 1-1.

Table 1-1: Mini Program Runtime Environments

When developing web pages, web developers only need to use browsers along with some auxiliary tools or editors. Mini Program development requires additional steps, such as applying for a Mini Program account, installing the Mini Program developer tools, and configuring projects.

Experience Mini Program

Developers can use the WeChat client (version 6.7.2 or later) to scan the Mini Program code below to experience Mini Program.

View Mini Program Example Source Code