This article is from the Tencent bugly developer community . Please do not reprint without the author's consent .
Author: peggy
Applet overview
On the evening of November 3, the WeChat team announced that the WeChat applet is open for public beta. Developers can log in to the WeChat public platform to apply, and after the development is complete, they can submit for review.
We also did small program development some time ago, and now let ’s summarize the previous development experience.
1. What is an applet?
The WeChat applet is a hybrid between a native app and a web app. Loading through WeChat achieves smoothness similar to native apps. Compared to native apps, applets are more lightweight, updated in real time, and cross-platform; compared to web apps, applet resources are offline, and the experience is smoother.
The design goal of the WeChat applet is to allow developers to develop services with a native APP experience in WeChat in the simplest and most efficient way possible.
Without saying that much, let's take a look at the effect of the applet:
After reading the results, are you curious about development ~
2. The realization mechanism of applets
The development of applets is based on a set of application frameworks provided by WeChat. By encapsulating the basic functions of the file system, network communication, task management, and data security provided by the WeChat client, WeChat provides a complete set of Javascript APIs to the upper layer, which allows developers to easily use all kinds of WeChat client Basic functions, quickly build an application. The frame design is as follows:
The framework provides its own view layer description languages WXML and WXSS, and a logic layer framework based on JavaScript, and data transmission between the view layer and the logic layer through one-way data binding , so that developers are more focused on data and logic .
3. Supported features
Next, let's take a look at the specific features provided by the WeChat framework:
wxml: everything is a component (view component)
view component (similar to div in H5)
input component (type = digit, there is a 9-square keyboard with decimal point)
modal popup component (corresponding wxml, effect is as follows) (This component has been changed to js to achieve wx.showModal ()
For more wxml components, please check the WeChat public platform applet documentation
4. Functional API:
Pay
Access to WeChat information
Network request
recording
Upload / download files
webSocket
Visit album
For more detailed API, please check the WeChat public platform applet document
5. Others:
Send message notification
Brief statistics (pv, uv)
Now let's develop it ~
Applet development process
1. Get the AppID of WeChat Mini Program
Second, create a project
Creating a project needs to be done through developer tools. (The tool is downloaded on the WeChat Mini Program public platform)
Three, write code
First let's take a look at the directory structure of the applet:
WeChat has some regulations on the development of small programs:
The three files on the left of the above picture are placed in the root directory of the applet, and other files are freely controlled by the developer.
app.js is the script code of the applet, used to monitor and process the life cycle function of the applet and declare global variables
app.json is the global configuration of the entire applet, configure which pages the applet consists of, configure the window background color of the applet, etc.
app.wxss is the common style sheet for the entire applet
Among them, app.js and app.json are required.
The applet page is composed of four different suffix files with the same name under the same path:
The file with the .js extension is a script file
The file with the .json suffix is the configuration file
The .wxss suffix is the style sheet file
The .wxml suffix file is a page structure file
In H5 development, we are introducing the corresponding css, js in the page, and the applet development does not need to be introduced in wxml, they are through the same name, the page and logic js, style association and matching.
Next, let's start with specific development ~
Frame: WeChat frame is embedded in the applet, no additional frame is needed
Generally speaking, when we start development, we will start with the framework. The applet encapsulates a framework designed for the client. As the developer of the applet is based on this framework, the existing framework does not need to be considered, and does not need to be considered.
The existing frameworks are basically built on window and document objects. The applet does not have a window, document, or browser BOM as the host environment. You can understand that the host environment of the applet is similar to the node's host environment, not the browser client. For the design of this environment, interested children's shoes can refer to PWS
Modular: Formally supports CommonJs, loading references is more like ES6
The applet form supports CommonJS and is loaded via require, similar to node and seajs. However, what is loaded by require is the referenced assignment, not the value cache in CommonJS.
Module writing of applets:
The module of the small program runs (similar to node, the framework will automatically add an outer define):
Modularity: UI component design
During development, when the components related to the view are modularized, we may need to pay attention. For example, the bullet box, in H5, we generally package it into a module component, so that it can be reused. In the applet, the view can only be in wxml and cannot be dynamically generated.
First, let ’s take a look at the view component modal of WeChat ’s pop-up window. The API given by WeChat is like this (the component WeChat has been implemented in other ways, and it is used here to describe the problem):
Seeing this, do you have associations? If a page needs to use 100 bullet boxes, the developer needs to create 100wxml components, and register the corresponding 100 OK button events and 100 Cancel button events. This is obviously unreasonable.
Can it be encapsulated into a general component on the framework, developers only need to pass in the corresponding event handle? Later WeChat may consider encapsulation ~
NO~！
why? From the perspective of framework component design, the framework itself adopts state-oriented programming, and the component part is similar to redux design (actually not implemented by redux)
After the action of the component's view, the view can only be updated through the business process of the action. The framework is one-way data binding and cannot be updated automatically.
For this type of View component that comes with action, it is recommended that necessary re-encapsulation. Encapsulation can consider the dynamic registration & uninstallation of aop .
1. Define a common template for components
2. Aop way to encapsulate the logic of components
1) The default configuration of the component:
2) Encapsulation of components
3. Use of components:
1) Introduce the template of the component in the page wxml
2) In the page js, use the pop-up box at any time and unlimited times
At present, the component WeChat has been encapsulated (api: wx.showModal () calls the bullet box), but the feature that the action cannot be automatically updated still exists. Developers who still need to customize other UI components with interaction will still encounter the above problems. You can refer to the above solutions.
Specific page development
For the development of business pages, the page can be regarded as a page component. In this page component, the following work is completed:
Responsible for initializing the component state (WeChat)
Responsible for combining sub-view components to form page effects (developer)
Determine the data matching js and view (developer)
Responsible for registering business logic methods provided by business logic objects (developers)
Responsible for managing business logic objects (developers)
1） index.wxml
2） index.js
The communication between page wxml and page js is as follows (simplified the work of WeChat framework)
What we need to pay attention to in page development are:
The data in index.js is read-only
In page js, data data needs to be agreed to be read-only. The framework is one-way data binding. Modifying the data in data will not automatically update the View; to update the view, you need to use the setData () method. When setData () updates the View, the Diff is compared with the data in the data, and the difference will be updated. In this way, if you directly modify the data, it is easy to cause the data in the data to be inconsistent with the View.
The data set by setData in a single operation cannot exceed 1024kB, and it is necessary to avoid setting too much data at one time.
template, these templates have their own independent scope.
Support ES6 ... Expand module data.
｛｛… CardInfo｝｝, the data in the template ｛｛card_name｝｝, {{bank_simple_name}}, the data in the corresponding data is data: ｛cardInfo: ｛card_name "", bank_simple_name: ""｝｝, which is convenient for the pair View control.
This completes page-level development ~~ YES!
The difference between applet and H5
In writing the code, what is the difference between the applet and H5 development?
javascript：
(1) Restrictions:
The ability to execute code by passing in strings is disabled
For security reasons, the ability to execute code by passing in strings is disabled. The specific banned native functions are: new Function, eval, Generator. This is also effective to avoid problems like xss in H5.
The banned functions have a significant impact on our development: string to json. In the past, we used new function and eval to handle the return of background cgi. (The mobile terminal is generally encapsulated in a framework such as zepto). Small program development needs to change the specific implementation.
There are no APIs related to the browser BOM.
Among these BOMs, the biggest impact on development should be the absence of cookies. Because of other functions such as storage, applets have similar processing methods. The cookie is related to background login in web development.
There is no cookie in the applet. In order to be compatible with the login management of most web apps, cookies are used. When the applet requests to send, the client can dynamically set the cookie for the header to send the message to the request.
Note that the cookie itself cannot be read and written on the client side.
Because there is no cookie, the csrf problem in H5 is theoretically solved. Whether there are other client security problems in the applet requires technology and time to verify ~
(2) Optimization
log in:
In H5, the code is usually obtained through URL redirection through WeChat authorization; in the small program, the code is obtained through wx.login, which avoids the problem of previous login redirection.
storage：
The applet replaces localstorage and sessionstorage in H5 with storage. The size of storage for each small program is 10M, supporting synchronous and asynchronous.
WeChat payment path is no longer restricted
(3) Inconvenience
1) Each page needs to be manually registered in app.json. If there is no registration, the page will not be executed.
2) There are 5 restrictions on the opened pages, and the number of opened pages needs to be mainly controlled during development
wxss：
wxss no longer supports media queries
Added app flex layout
Introduce the concept of rpx
rpx (responsive pixel): Can be adaptive according to the screen width. The screen width is 750rpx. For example, on the iPhone6, the screen width is 375px, and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.
In wxss, background pictures cannot be used. This is related to the design idea of the framework that everything is a component
wxss animation is not supported (currently)
Multi-layer selectors are not supported. ClassA {} – supported; .classA .classB {} – not supported (api instructions indicate that only single-layer selectors are supported, sometimes multiple layers are supported for refactoring tests)
Four, debugging
After the development is completed, we debug and check the effect, which is similar to mobile development, and adds the log on the mobile terminal.
Development tool debugging:
Mobile client: Click the upper right corner to start debugging
V. Construction
The applet is a local loading module similar to node, no need to consider the module merge in seajs, only need uglify. Of course, if you use ES6 development, you still need to bebal.
6. Test environment
The specific WeChat is still being adjusted ...
Seven, release
In the development tool, make full submissions, and pass the WeChat review before final release on the WeChat applet platform. The process of publishing and loading files is as follows:
So the overall development and release of the small program is over ~
Personal views on small program products:
Advantage:
1. Low threshold download , as a part of WeChat, you can directly enter through WeChat and you can use it. It can almost be considered a web page, and there is no download threshold.
2. Cross-platform , WeChat client bottom package, support small program cross-platform
3. Low development cost , through the previous development comparison, the development of small program is lower than the development cost of web app, and the front-end resource storage, release operation All are integrated in WeChat (if combined with Tencent Cloud function, it is purely Lenovo ~~ Ha ha)
4. The page imitates the original, the experience is smoother
5. The applet can use the payment function of WeChat
Limitations:
1. The development is based on the WeChat framework, some functions are limited, and other existing third-party plug-ins are not supported;
2. The applet page can only be opened at the same time. If the interaction process is long, it is difficult to support;
3. The size of the applet package is limited to 1M (current), all only suitable for lightweight
For the specific content of the WeChat framework API, please refer to
It is recommended not to think with web app development thinking when developing small programs ~
Conclusion
Joined in the internal test development of the project since August, during which several turbulent adjustments and constant painful iterations have taken place. Fortunately, the framework and development tools have tended to be perfect and stable. Looking forward to the official appearance of the applet ~~
For more exciting content, please follow bugly 's WeChat public account:
Tencent Bugly is a quality monitoring tool built specifically for mobile developers to help developers quickly and easily locate online application crashes and solutions. The intelligent merge function helps the development students to classify the thousands of Crashs reported every day according to the root cause merge. The daily daily report will list the crashes that affect the number of users the most. The precise positioning function helps the development students locate the code lines that have problems. After the release, quickly understand the quality of the application, adapt to the latest iOS, Android official operating system, the engineers of the goose factory are using it, come join us!
This article is reproduced in Ape 2048: [Tencent Bugly dry goods sharing] WeChat small program development thinking summary-Tencent "credit card repayment" project practice