Mini Program Technology Development Manual

The official explanation of the mini program given by WeChat is: "A mini program is an application that can be used without downloading and installing. With the concept of running away, users don’t have to worry about installing too many apps, apps will be everywhere and available at any time, but there is no need to install and uninstall.” Since the WeChat mini-program was officially launched on January 9, 2017, it has caused a lot of problems. extensive attention. The WeChat team also keeps updating the Mini Program. The advantages of WeChat mini-programs are very obvious. Mini-programs touch PC webpages, public accounts, H5, and APPs that cannot be touched. It does not need to be installed, and the concept of leaving after use can meet user needs and save mobile phone memory. From the standpoint of the owner of the mini program, its development cost is greatly reduced, and at the same time, the powerful traffic portal of WeChat can be used, thus reducing the difficulty of promotion. In general, WeChat mini-programs are a brand-new method that can better establish connections between users and services, and can be easily acquired and disseminated in WeChat, with a good user experience.

1. Preparations before the development of small programs

The Mini Program uses the same parsing technology as React Native and Weex. Developers can write a set of programs to run on multiple clients. At the same time, it has a better native experience than Official Accounts and WeChat Malls. After the application is fully open, developers who are enterprises, governments, media, other organizations or individuals can apply for and register Mini Programs. The subscription account, service account, and enterprise account of Mini Programs and WeChat are parallel systems with independent registration and release processes.

1. Mini Program Access Process

The access of the applet mainly has 4 steps.

(1) Mini-program registration: register on the homepage of the official website of the WeChat public platform (mp.weixin.qq.com), submit the registration information, complete the subject information and administrator information.

(2) Improve mini-program information: improve the basic information of the mini-program, such as name, avatar, and service scope. Before development, it is necessary to bind the developer and obtain the APP ID to ensure that the program can be scanned and tested through the mobile phone.

(3) Develop small programs: Download and install the WeChat developer tools. WeChat officially provides a complete development framework. Developers can develop and debug small programs according to the WeChat development documents.

(4) Code review and release: After the development of the applet is completed, it cannot be released directly. It is necessary to submit the code and development configuration information for review, and it can still be released after completion.

2. WeChat Web Developer Tools

The official WeChat development tool is called WeChat Web Developer Tools, and the mini program front-end development framework is the official framework provided by WeChat. The WeChat Web development tool is a framework based on the Native System system layer. Since it does not run in the browser, some JavaScript methods such as Document and Window on the Web cannot be used. In the past, HTML5 was loaded in the network environment. There will be some restrictions, you need to load HTML, CSS, JS step by step, then return the data, and finally render the page and display it in the browser. Users always have to wait for a long time, which greatly reduces the user experience. In contrast, the two threads of the applet: Appservice Thread and ViewThread will be simultaneously loaded and loaded in parallel, and even Appservice Thread will be executed earlier. When the view thread is loaded, Appservice will be notified, and Appservice will use the prepared data with setData method returns to the view thread. This optimization strategy of the applet can reduce the waiting time of the user and speed up the response speed of the applet.

The WeChat Web developer tool is different from the H5 development tool + browser Device Mode preview mode, but based on its own developer tool, it can realize a complete set of processes such as synchronizing local files + development and debugging + compilation preview + upload + release. At the same time, the applet has developed a set of WXML tag language and WXSS style language by itself, instead of directly using the standard HTML5+CSS3. At the same time, it provides many native APP components. The functions that need to be simulated in HTML5 before can be realized by directly calling the components in the applet.

2. The structure of the mini program and its core technology

1. The file structure of the applet

Create a new project using the WeChat Web development tool, and the framework will automatically generate an APP describing the overall program and page files describing multiple pages. The main components of a complete applet are: an entry file: app.js; a global style: app.wxss; a global configuration: app.json;

Divide the page installation folder under pages. There are 4 files in each page, namely: view layer: wxml file, wxss file; logic layer: js file, json file (page configuration, not required).

(1) app.js is the script file that controls the logic of the applet, and app.json is the configuration file of the applet, which is responsible for the global configuration of the applet. app.wxss is a global style sheet, and its scope is every page of the project.

(2) wxml is a language similar to xml format, with functions such as data binding, conditional rendering, list rendering, custom templates, event callbacks and external references. page.wxml mainly builds the page structure by using basic components.

The language of wxss and css format has similarities, and is used to describe the component style of wxml. The priority of page.wxss is higher than that of app.json. At the same time, WeChat has added a size unit rpx for the applet, rpx can be adaptive according to the screen width, rpx is actually a system-level rem (dividing the page into 750 parts proportionally, 1rpx=innerWidth/750).

page.json can set some properties for independently defined pages to meet actual needs. config.json can set some personalized configurations. When reinstalling the tool or changing another computer, as long as the same code package is imported, the development tool will automatically restore to the personalized settings when developing this project.

JS files are mainly used for user interaction, responding to user clicks, etc. In the applet, JS scripts are used to respond to user operations.

2. The framework of the applet

The development of WeChat applets is based on the framework. From the perspective of software design, the framework is a reusable software architecture solution, which specifies the architecture of the application and clarifies the components of each layer and its internal layers in the software architecture. The will relationship among them, responsibility assignment and control process, manifested as a set of interfaces, abstract classes, and methods of collaboration between instances, refers to the overall structure of the design and implementation of the subsystems for a part of the application system in a specified application field.

The core of the applet development framework is a responsive data binding system. It is divided into view layer (View) and logic layer (APP Service). The applet development tool provides view layer description languages WXML and WXSS, as well as JavaScript-based logic layer framework, and sets data transmission and communication between the view layer and logic layer. The event system allows developers to easily focus on data and logic. The place where business logic is handled is called the logic layer. In the WeChat applet, the collection of all .js script files constitutes the logical layer. The logic layer and the view layer cooperate with each other to complete data processing and receive event feedback. The view layer of the framework is written by WXML and WXSS and presented through components. For the applet itself, the collection of .wxml files and .wxss files constitutes the view layer. After the logic layer processes the data, it will be sent to the view layer for interaction with the user, and at the same time receive user feedback on the view layer. The view layer presents data in a given style and feeds back events to the logic layer, and data presentation is performed through components. The basic building blocks of views are components.

3. Relevant components of the applet

WeChat provides a series of basic components, which can be combined to develop mini programs. Here are a few more characteristic components.

(1) <view/> is similar to <div/> in html5, and is the most basic component in the layout. Any complex layout can be realized by nesting <view/> components. <view/> is A block-level container component, the default display: block, which is a box model, generally recommends display: flx in the layout process.

(2) <textarea/> is a multi-line input box. Unlike HTML, its value needs to be assigned to the value attribute instead of being wrapped by a label. It is a self-closing label. CSS animation is invalid for the <textarea/> component .

(3) <navigator/> is a page link, which is the same as the hyperlink tag <a/> in HTML, mainly for page jump control. The content of the link can be a word, word or a picture, and the page can be jumped by clicking on the content.

(4) <canvas/> is mainly used to draw graphics. It itself is a colorless and transparent area without the ability to draw. It is just a graphics container. It needs to adjust the relevant application programming interface (Application Programming Interface, API) to complete the actual drawing task.

4. The API and configuration of the applet

(1) Domain name configuration:

According to the components provided by the Mini Program, developers can design the UI interface as needed, but some functions of the Mini Program depend on the API provided by the framework. When using the API, you must first configure the server domain name for the applet. Each applet needs to set a communication domain name, and the applet can communicate with the specified domain name over the network. Currently supports HTTPS (request), upload file (uploadFile), download file (downloadFile) and WebSocket communication.

(2) Commonly used APIs:

1) wx.request(Object): Realize data interaction between the applet and the developer's server. The function of the request method is to initiate an HTTPS request. In the applet, only HTTPS requests can be used instead of HTTP requests. A WeChat applet can only have 5 network request connections at the same time.

2) WebSocket: The request method is to initiate a request to the server through the client, and the server responds and returns data to achieve the purpose of communication. The disadvantage of this method is that the server cannot actively send messages to the client. Therefore, polling is the only way to achieve instant communication between the server and the client, and the header of the request is very long, and it will take up a lot of bandwidth to transmit a small amount of data. In response to this situation, developers can create WebSockets through the WebSocket-related APIs provided by the applet. WebSockets only require the server and browser to perform a handshake through the HTTP protocol and then establish a Transmission Control Protocol (TCP) communication channel separately. Data transmission can be carried out, and a long connection can be realized to achieve the purpose of communication.

3. Project release of small program design

1. Mini Program release process

After the project development is completed, the administrator needs to manually package and upload the code, fill in the relevant configuration categories and submit the code for review. If the first review fails, submitting the review again will open the entrance for testing. This entry is provided by the developer. Log in when WeChat reviewers review WeChat Mini Programs. It can be published manually after review.

2. Mini-program upload principle

How does the administrator manually package and upload the code? The editor itself is implemented based on the web technology system. Simply put, it is node+webkit, node provides us with the ability of local api, and webkit provides us with the ability of Web, after the combination of the two, we can use JS+HTML to implement local applications. Now that there is nodejs, the functions in the packaging options are easy to realize. Among them, ES6 to ES5 is to introduce the node package of babel-core, CSS completion is to introduce the node package of postcss and autoprefixer, and code compression is to introduce the node package of uglifyjs.

epilogue

Standing on the shoulders of WeChat, which has 900 million monthly active users, the WeChat Mini Program has its own traffic trends, multiple entries, and simple and convenient functions. The rapid iteration of mini-program functions means that the development of mini-programs and the construction of ecological tools will be a huge opportunity for the mobile Internet. At present, many business units in various industries have joined in the development of small programs and opened the functions of small programs. Although many voices were not optimistic about the mini program some time ago, after the mini program was optimized, many entrances were opened, which made developers and users pay more attention. Even though some high-frequency and complex applications cannot be replaced by small programs for the time being, as long as the main functions of some low-frequency applications can be implemented on small programs, the APP can be completely uninstalled. Generally speaking, the current development space of WeChat mini-programs is very good, but the future development cannot be accurately predicted.

The above are the details of WeChat Mini Program development technology introduced by Shenzhen Zuchuang Microelectronics Co., Ltd. for you. If you have software and hardware function development needs for smart electronic products, you can rest assured to entrust them to us. We have rich experience in customized development of electronic products, and can evaluate the development cycle and IC price as soon as possible, and can also calculate PCBA quotations. We are a number of chip agents at home and abroad, including MCU, voice IC, Bluetooth IC and modules, wifi modules. We have hardware design and software development capabilities. Covering circuit design, PCB design, single-chip microcomputer development, software custom development, APP custom development, WeChat official account development, voice recognition technology, Bluetooth wifi development, etc. It can also undertake the research and development of smart electronic products, the design of household appliances, the development of beauty equipment, the development of Internet of Things applications, the design of smart home solutions, the development of TWS solutions, the development of Bluetooth audio, the development of children's toys, and the development of electronic education products.