More and more people are using UNI-App for development. Are there many students who are ready to go into the pit of UNI-app but don’t know where to start? Too much content in the document, don’t know how to read? If in doubt, then I will take you into the pit uni-app from scratch.

If this is not enough to get you into uni-app, you can check out my video on THE MOOCs website. It’s a quick 5 hour introduction to uni-App. It’s not very in-depth, but it’s the most basic content.

Get to know UNI-App quickly

What is the uni – app

  1. uni-appIs a use ofVue.jsDevelop cross-platform application front-end framework, developers write a set of code, can compile toiOS,Android,H5, small programs and other platforms.Click on uni-app’s official documentation for details
  2. uni-appIt has a strong competitive advantage in six key indicators, including the number of cross-ends, expansion ability, performance experience, surrounding ecology, learning cost and development cost:
  • There are more cross-ends
  • Platform capabilities are not limited
  • The performance experience is better
  • Rich surrounding ecology
  • Low learning cost
  • Low development cost

Prerequisites for using UNI-App

Just because Uni-App can be multifaceted, don’t feel like it’s going to get harder. If you have developed small programs, and happen to know vUE, then your learning cost will be very low.

If you haven’t worked with vUE before, I suggest you take some time and look at their official documentation. Come back to uni-APP.

  • Wechat applets
  • VUE

App development, for native development understanding, do not need you to have a lot of native development experience.

For better cross-end development, refer touni-appUniform specification:

  • Page components we follow the Vue single file Component (SFC) specification
  • Component label close to wechat applets specification
  • Interface capability (JS API) is close to wechat applets specification
  • Data binding and event handling are closeVue.jsSpecification, and complement the App and page life cycle
  • It is recommended that you develop with a Flex layout for multiterminal compatibility

The development tools

It’s easy to visualize using the official HBuilderX editor, which has a built-in environment and requires no Node configuration right out of the box. Click on the download

Using the Vue. Js

Almost all support Vue official documentation: template syntax

Small programs (wechat, Alipay, Baidu, Toutiao)

If we want to develop applets, we need to know the applets specifications for different platforms. Once we know the specification, it’s relatively easy to develop. Uni-app encapsulates almost all applets for different platforms. Just replace the prefix with UNI for example:

We call the request request of wechat applet

wx.request({
    url: 'https://www.example.com/request'.// This is an example, not a real interface address
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' // Customize the request header
    },
    success: (res) = > {
        console.log(res.data);
        this.text = 'request success'; }});Copy the code

We use uni-app’s request request

uni.request({
    url: 'https://www.example.com/request'.// This is an example, not a real interface address
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' // Customize the request header
    },
    success: (res) = > {
        console.log(res.data);
        this.text = 'request success'; }});Copy the code

Did you notice anything different? So, except for the replacement of the prefix Wx with UNI, it is almost identical to the original specification. Uni-app smooths out the differences between applets as much as possible.

App (ios, Android)

Uni-app not only uses most of the api-related apis on the app side, but also uses the 5+API to complement some of the functions of applets that are not yet implemented. reading

Meanwhile, weeX engine is built into the App side, providing native rendering capability. Make your App perform better. reading

H5

H5 is basically the same as normal VUE development. The only thing to note is that some apis are not available in H5. Note the platform differences noted in the documentation.

How to implement cross-end

Although it is cross-terminal, there must be some cases that are not supported, such as some platform-specific API?

Don’t worry, uni-app has it all figured out for you: conditional compilation.

Conditional compilation

Uni-app: uni-app: uni-app: uni-app: Uni-App: Uni-App: Uni-App: Uni-App: Uni-App: Uni-App: Uni-App: Uni-App Personalization of the platform was achieved gracefully in a project.

Conditional compilation is implemented using comments, which can be written differently in different syntax. Js uses // comments, CSS uses /* comments */, and vue/nvue templates use
.

Here’s an example:

// #ifdef %PLATFORM%Platform specific API implementation// #endif


// #ifndef H5
// indicates that only H5 does not use this API
uni.createAnimation(OBJECT)
// #endif

Copy the code
<! -- #ifdef %PLATFORM% -->Platform-specific components<! -- #endif -->

<! -- #ifdef MP-WEIXIN -->
<! -- Only works in small programs -->
<view>I am wechat small program</view>
<! -- #endif -->

<! -- #ifdef APP-PLUS -->
<! -- Only works in app -->
<view>I am a app</view>
<! -- #endif -->

Copy the code
/* #ifdef %PLATFORM% */Platform-specific style/* #endif */

/* #ifdef MP-WEIXIN */
/* Only works in small programs */
.header {
	color:red
}
/* #endif */

/* #ifdef APP-PLUS */
/* Only works in app */
.header {
	color:blue } <! --#endif* /Copy the code

Matters needing attention

  • nonH5You cannot use browser native objects, such asdocument,window,localstorage,cookieEtc., more can not be usedjqueryDepend on the framework of these browser objects. Because none of the applets support these objects. Not having these browser native objects doesn’t affect business development,uniTo provide theapiEnough to complete the business.
  • uni-app 的 tagSame as small programtag, andHTML 的 tagDifferent, for exampledivTo change toview.spanTo change totext,aTo change tonavigator.

If you have any questions about UNI-App, please comment and reply. I will get back to you as soon as I see them. Thank you.

Be sensible. Don’t like it, but don’t spray it. Issues can be discussed, but zero tolerance for trolls.