uniappWhat is? Why can it write wechat small program?

whyuniappYou can?

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Tiaotiao /QQ/ Nail) and many other platforms.

To quote the official introduction, why can it do this? If you’re familiar with vue.js, the core thing about Vue is that it automatically updates the data in the “object” that you use the data in when the data changes. On the browser, it corresponds to the browser DOM. It can correspond to different things on different platforms, which gives vue.js its cross-platform capability

The word “Object” is not an Object in Javascript. It is better understood as an Object in object-oriented programming. It can be described as an Object whether it is virtual or real. Can you imagine that someone has ported Vue to the underlying hardware with the display, and whenever the data in the Vue code is updated, the data on the display is notified as well.

Just so you know: When uniApp is compiled, it works cross-platform by mapping the base components in the Vue Template to the base components on different platforms.

uniappIs cross-platform a lot of hassle?

You must have doubts about Unipp’s ability. Yes, there must be pitfalls. However, it is not at the data level. Javascript engine parsing on different platforms is usually at the CSS style level or at the API level. Each platform has different SUPPORT for CSS and API. No amount of good compilation can completely eliminate the native gap. Therefore, it’s not because of itself, but because you don’t know the platform well enough to write incompatible code.

If you don’t think about compatibility, I can say that it doesn’t have any problems writing small programs. You’ll end up feeling pretty much the same as a small program, or even better.

Why would I definitely recommend ituniappWrite wechat small program?

Wechat small program with its grammar is not good? Why use Uniapp? What are the advantages of Uniapp

  • You can use the browser for debugging
  • VueSupport for almost all syntax
  • built-inVuex 和 Vue-router
  • All oF wechat’s apis are available

Other similar CSS animation, vue single file advantages are not said. Each point in bold is worth using UniApp.

The first point: if you debug the micro channel small program to know, after each modification is more slow compilation, expand dom is how troublesome, view data can only be a console. Log or debugger to debug. It builds quickly. You can use the official Vue plugin dev-Tool to view the V-Node tree, data state and Vuex. This is a real dimension reduction in development experience and efficiency. Now, even though I only develop mini programs for wechat, I usually don’t open the disgusting developer tools (crazy about wechat developer tools, every time I burst my memory), only use Chrome to debug styles and data, and only check if the styles are correct before debugging certain apis and submitting small program code

Second point: using Vue to write a program, your Vue level and understanding will also rise a lot, in the future to write web pages or other things, using Vue is also confident.

The third point: wechat small program does not have built-in functions similar to relatively complete Vuex, resulting in cross-page, cross-multi-level component sharing data will be very troublesome.

CSS support in newer browsers is a superset. Styles that can be used in small programs are fully compatible with Chrome and are more debug-efficient, but custom components should be aware that their width and height can only be supported internally.

uniappIs there a downside to writing small programs?

There is.

  • Wechat limits the size of small program packages to2mb, butuniappCompiled small program because of its ownVue VuexAnd so on, will be slightly more dozens of KB (do not know how much, the distribution will not be particularly many) but is not a particularly big problem.
  • The first rendering of the page is not as fast as the applet. After all, there is an extra layerVueTherefore, the first load is not as good as the native. But subsequent numeric updates, especially large data updates, becauseVueThere arediffThe algorithm greatly improves the efficiency of rendering.
  • Although I have not really written native micro channel small program, but I have seen a lot of code, found that micro channel small program in the template writing method is a lot of innovation, such as micro channel small program can dynamically bind events, and vUE template is only@+ event name cannot be dynamically bound. Wechat applet string writing is similar to template string, but Uniapp vUE is not support to write ES6 template string writing on the template. Small programs have the concept of custom event bubble, vUE is unable to bubble events and other subtle flaws.

However, the defects can not cover up the advantages of UniApp in development efficiency.

openuniappThe study of

Step 1: Download and install Hbuiderx (standard version) and wechat developer tools

Step 2: After hBuilderx is installed

The installationuniappPlug-ins, other plug-ins likescssCompile and so on can also be installed, full installation is no problem ha

Step 3: After installing the wechat developer tool and UniApp, open the wechat developer tool and log in to your account

To set the service port, first open your wechat developer tools -> upper bar -> Settings -> Security Settings -> service port -> open

Then hbuilderx navigation tools – > Settings – > source view Here you can see the right set of json to find the last line – > weApp. DevTools. “path” : “” here to fill in the absolute path WeChat developer tools For example, I: “E:/ wechat Web Developer Tool”

Step 4: After both Settings, in the upper left corner of the hBuilderx navigation bar: File -> New -> Project -> Select UniApp -> Template: Hello UniApp Demo Template -> Middle navigation bar: Run -> Run to applie, and you are ready to go

The following study can go to the official document to learn oh ~

Official documents