In-depth analysis: the difference between WeChat applet and H5

As a front-end engineer, from the perspective of the front-end, I will analyze the main difference between WeChat applet and HTML5 and the

first one is the difference in the operating environment.

The operating environment of the traditional HTML5 is a browser, including webview, while the operating environment of the WeChat

applet : HTML5 related technologies (not all) will be used in the development process. The

final release of the applet needs to be reviewed by WeChat. WeChat can update the applet into its own software without updating its own software, which is reminiscent of the React Native framework. , and some developers have found that the React and NodeWebkit libraries are used in the source code of the development tools of the WeChat applet. The

official document emphasizes that the window object and document object commonly used in the browser cannot be used in the script (based on this, like zepto /jquery, a library that manipulates DOM, has been completely abandoned)

So I personally think that the running environment of the applet is likely to be a built-in parser completely refactored by the WeChat development team based on the browser kernel. Optimization, with the development language standard defined by yourself, improves the performance of the applet.

However, since WeChat provides developers with development tools, and the development tools also have built-in programming, debugging, development environment, and publishing in one, we no longer need to discuss its final operating environment, as long as the development is done according to the official documentation. . And from the WeChat team's move to provide developers with development tools, I am reminded of the X-CODE development tools provided by Apple to developers. It is conceivable that WeChat's "ambition" is evident.

The second is the difference in development costs.

Here I raise a question, what do we need to consider when we are faced with an HTML5 web development requirement? Aside from development tools (vscode, sublimtext, Atom, etc.), there are front-end frameworks (Angular, react, vue, backbone, etc.), module management tools (Webpack, Browserify, etc.), task management tools (Grunt, Gulp, etc.), As small as UI library selection, interface calling tools (ajax, Fetch Api, etc.), browser compatibility, etc., we need to examine them one by one. If it is difficult to write H5 with jqery plug-in, we must also look for suitable jquery plug-ins in the development process. to match the project. Although these tools are highly customizable and improve the development efficiency of developers, I believe that the configuration work of project development has consumed a lot of energy. Although most developers have their own configuration templates, it has long been a problem for projects. The cost of version iteration and version upgrade of various external libraries used in the system should not be low.

And when we face the development needs of a WeChat applet, what do we need to consider? The WeChat team provides developer tools and standardizes development standards. The common HTML and CSS on the front end have become WeChat’s customized WXML and WXSS. Although all of the WXML are custom tags, there are clear usage introductions in the official documents. , I believe it should be very easy to get started; the writing in WXSS, JSON and JS files is slightly limited, but the overall is similar. After unifying these standards, as a developer, you will find that you only need to focus on writing programs:

when you need to call the back-end interface, call the request API

when you need to upload and download, call the upload and download API

when you need data When caching, calling the local storage API

to import the map, using the compass, calling the payment, calling the scan code and other functions can directly use the

UI library, the framework naturally has its own weui library addition

And when using these APIs, you no longer have to worry about browser compatibility, and you don't have to worry about unexpected bugs in the production environment. It can be seen that the development cost of WeChat applet is indeed much lower than that of previous web development.

The third is the difference in obtaining system-level permissions.

Compared with HTML5 web application, WeChat applet can obtain more system permissions, such as network communication status, data caching capability, etc. These system-level permissions can be seamlessly connected with WeChat applet, which is officially claimed to have the smoothness of Native App. Performance, and this happens to be where HTML5 web applications are often criticized, which is why most application scenarios of HTML5 are positioned in simple business logic and single function.

The fourth item is the smoothness of the application in the production environment.

This is the most intuitive feeling for both users and developers. For a long time, when HTML5 applications face complex business logic or rich page interaction, its experience is always unsatisfactory, and it is necessary to continuously optimize the project to improve the user experience. However, due to the independent operating environment of the WeChat applet, although html+css+js is also used for development, the final rendering of the parser of WeChat is the effect of native components, and the natural experience will be further improved.

quote
"H5 Program Club" is a WeChat public account that focuses on WeChat applet learning and communication, and the release of related outsourcing/recruitment needs information




Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326445161&siteId=291194637