- Release Notes and Announcements
- Product Introduction
- Getting Started
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Accessing with Flutter
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
- Agreements
- Release Notes and Announcements
- Product Introduction
- Getting Started
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Accessing with Flutter
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
- Agreements
Mini program introduction and development environment
Last updated: 2024-05-10 11:26:34
Mini programs are a new way to connect users and services. They can be easily accessed and distributed within an application, and provide an outstanding user experience. Developers can easily develop and publish a mini program after learning.
1. Hello World
Before introducing the history and technical details of mini programs, follow our steps to develop this Hello World.
Step 1: Go to the corresponding to your own operating system to download and install the installation package.
Step 2: Open the TCMPP developer tool and click New Mini program Project. Leave alone the AppID and select No AppID when you create a new project and uncheck the option of "Create general quick startup template".
Step 3: Add necessary code.
Create `app.json` in the root directory, which reads as follows:
"pages": ["pages/index/index"]}
Create a new pages directory under the root directory, then create a new index directory under the pages directory, and then create two files index.wxml and index.js under the index directory.
The content of index.wxml: <text>Hello World</text>
The content of index.js: Page({})
By writing these lines of code, Hello World appears in the simulator of the TCMPP developer tool.
2. Mini program introduction
2.1 History of mini program
From a technical perspective, mini programs are not a concept that comes out of nowhere. When WebView became an important entry point for the mobile Web, the JS API came into being.
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 JS API calls the native components to browse the image. Compared to the introduction of an additional JS image preview component library, this method is very simple and efficient.
In fact, WeChat officials have not exposed such calls to users outside the Tencent company. This kind of API was initially provided to their internal business usage. After many external developers discovered that, they tried to use it, gradually becoming the actual standard of WeChat's web pages.
The platform has a complete set of built-in web development toolkit, named JS-SDK, including dozens of APIs such as shooting, recording, voice recognition, QR code, map, payment, sharing, vouchers, etc. It opens up a whole new world for Web developers to use native capabilities within the host application to do things that were previously impossible or difficult to do.
Call native images in the following way:
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 that mobile web page's capabilities are insufficient by exposing the host application APIs, allowing Web developers to have more capabilities. However, it does not fix the poor experience issues for mobile web pages.
When a user accessed a web page, a blank white screen would occur before the browser started displaying. And this problem became worse on the mobile platforms because of device performance and network speed. We focused on solving this problem by providing an enhanced version of JS-SDK, which includes an important feature named offline storage for Web resources.
This feature is similar to Application Cache of HTML5, but avoids some shortcomings.
In the internal test, we found that offline storage can solve some problems, but for some complex pages, the white screen issue still existed. For example, for pages loaded with a large number of CSS or JavaScript files, the execution time of these files take up a large number of UI threads. Under this circumstances, even though the offline storage can speed up resource loading, the white screen still displays. Additionally, the file-based Cache is more complicated when the code file is updated, and the capability requirement for developers is higher.
Except for the white screen, the poor web experience problems also include delayed page response, mainly manifested in two aspects: unsmooth page switch and delayed click responses.
For some experienced Web developers, they will use SPA framework to simulate native page switching in the client. They usually simulate multiple pages in a WebView, through CSS processing, combined with the refined script code to achieve smooth click response and page switching. However, not all developers have the time and energy to make the page experience great.
The problem that the host application faces is how to design a better system, so that all developers can get a better experience in the host application. This problem cannot be solved by previous JS-SDK and a new system is required for web developers to achieve:
Fast loading
Powerful capabilities
Native experience
Easy-to-use and secure data openness
Efficient and simple development
This system is the small program that will be explained in detail in this book.
2.2. Difference between mini program development and ordinary web page development
The primary programing language for mini programs is JavaScript, so mini program development is often compared to the traditional web page development. The two share many similarities, making it relatively easy for front-end developers to transit from the web development to mini program development. However, there are still some differences:
In web development, the rendering and scripting threads are mutually exclusive, which is why long-running scripts can cause unresponsive pages. In mini programs, however, the two are separate and run in separate threads. Web developers can use various DOM APIs exposed by browsers for DOM selection and manipulation. As mentioned above, the logical layer and rendering layer of the mini programs are separate, with the logical layer running in JSCore without a complete browser object, resulting in a lack of relevant DOM and BOM APIs. This difference means that some familiar libraries for front-end developers, such as jQuery and Zepto, cannot run in mini programs. At the same time, JSCore environment is different from the NodeJS environment, so some NPM package cannot run in mini programs either.
Web developers need to deal with various browser environment, such as IE, Chrome, QQ browser on the PC side, and Safari, Chrome and various WebViews in iOS and Android systems on the mobile side. For mini program developers, they mainly need to deal with the host application clients of the two major operating systems: iOS and Android, and mini program development tools. These three major running environments of mini programs are also different, as shown in the following table:
Operating environment | logic layer | render layer |
iOS | JavaScriptCore | WKWebView |
Android | X5 JSCore | X5 browser |
IDE | NWJS | Chrome WebView |
When web developers develop web pages, they only need to use a browser and use some auxiliary tools or editors. The development of mini programs is different. It needs to go through the process of applying for a mini program account, installing mini program developer tools, configuring projects, etc.
3. Mini program features
For ordinary users, mini programs make application accessible easily. Users can directly open them by scanning QR code, searching or a share from friends. The mini programs enhance service providers customer outreach with excellent user experience.
For developers, the fast loading and rendering capabilities of the mini program framework, along with the accompanying cloud capabilities, operational, and data aggregation capabilities, allow developers to focus on specific business logic development without dealing with trivial tasks.
4. Preparing for mini program development
Developers can automatically generate the corresponding App ID after creating a mini program on the platform, and provide different versions of IDE download addresses. Developers can choose the appropriate version to download. For details, please refer to Getting Started.
Yes
No
Was this page helpful?