preface

Today to talk about front-end skills – small program development.

From the earliest micro channel small program, to the later Alipay small program, bytedance small program, Baidu small program, QQ small program, and recently released 360 small program, in the face of so many sets of code, developers how to develop?

The cost of writing multiple sets of code for different ends is obviously very high when the business requires simultaneous presentation on different ends. At this point, the ability to adapt to multiple aspects of a single set of code is particularly needed.

Uni-app is a cross-end framework that uses Vue

Introduction to uni-APP Framework

Uni-app is a front-end framework for cross-platform application development using vue. js, which can be compiled to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding) and other platforms.

Uni-app has a strong competitive advantage in six key indicators: number of developers, cases, cross-end flatness, scalability flexibility, performance experience, surrounding ecology, learning cost and development cost:

  • More developers/cases
  • Cross-end flatness/scalability flexibility (conditional compilation, invoking proprietary capabilities without affecting other platforms)
  • Better performance experience (AppClient supportweexRender for a smoother user experience.
  • The surrounding ecosystem is rich (plug-in market is launched to provide more components and templates, which is really out of the box)
  • Low learning cost (vue.js syntax + applets API)
  • Low development costs (not only development costs, recruitment, management, testing costs are significantly reduced.)

Although the environment of different end frameworks is changeable, no matter the various applets, Weex, React-Native, Flutter and fast applications, they are always the same is the DESIGN idea of MVVM architecture. Uni-app wants to use one set of code to fulfill all end requirements and converge the same business logic to the same layer of system without compromising maintainability due to uniform project abstractions.

The development tools

HBuilderX provides a built-in environment through the HBuilderX visual interface, right out of the box, without the need to configure NodeJS.

Development of language

Vue. Js + small program API, for development.

  • Data binding and event handling are the same as the vue.js specification and complement the App and page lifecycle.

  • Uni-app encapsulates almost all applets for different platforms. Just replace the prefix with UNI for example:

Send a request on wechat:

wx.request({
  url: "https://www.example.com/request".// This is an example, not a real interface address
  success: res= > {
    console.log(res.data); }});Copy the code

Send a request in uni-app:

uni.request({
  url: "https://www.example.com/request".// This is an example, not a real interface address
  success: res= > {
    console.log(res.data); }});Copy the code

Understand the micro channel small program you, do not feel very simple? Uni. request is an all-purpose AJAX request API, minimizing learning costs for developers.

How to solve cross-end compatibility problems

Each platform has its own set of features, so there are some situations where you can’t cross platform.

Uni-app provides conditional compilation tools that elegantly implement platform personalization in a single project.

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>Will only compile to wechat applet</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>It only compiles to app</view>
  <! -- #endif -->
</view>
Copy the code

Nvue mode

Uni-app can use weeX components or small program components (uni-App components) according to compilation and configuration. Write pages with the suffix.nvue (native vue)

Uni-app Has a built-in WEEX rendering engine that provides native rendering capabilities for better performance on the app side.

Nvue supplements WEEX with a large number of uni-App components and apis, as well as rich Plus apis, native-js, and Native plug-ins. Learn more about NVUE

The official UI library, UNI-UI

Uni-ui is a cross-end UI library provided by DCloud. It is a vUE component-based, Flex layout, DOM-free cross-end UI library.

Some developers in Web development tend to do all their development with a SINGLE UI library, but in uni-App it is recommended that developers start with the higher-performing base components and then introduce the necessary extensions as needed. GitHub address: Uni-ui

Does this make you feel special? Don’t worry, let’s take a look at the uni-App development specification.

Uni-app development specification

In order to achieve multi-terminal compatibility, uni-App has agreed on the following development specifications in consideration of compilation speed and runtime performance:

  • Page file followingVueSingle file component (SFC) specification
  • Component labels are close to the applet specification, as detaileduni-appComponent specifications
  • Interface capability (JS API) close to wechat applets specification, but need to prefixwxReplace withuni, as shown in theuni-appThe interface specification
  • Data binding and event handling are the sameVue.jsSpecification, at the same time addedAppAnd the page life cycle
  • This parameter is recommended for compatible multi-terminal operationflexLayout development

It takes patience to learn the management rules of each end

Uni-app isn’t hard to learn, but we’ve noticed that many newcomers get restless as they adjust to the regulatory constraints of each platform.

Uni-app spans many ends, although the code layer can be developed once, generating many ends. Note that on each end, there are rules governing each end, which have nothing to do with development, but each developer still has to be patient with these rules.

  • For example, H5 browsers have cross-domain restrictions.
  • For example, wechat mini program will be mandatoryhttpsLinks, and all server domain names to be connected to the wechat whitelist;
  • Such asAppEnd,iOSStrict controls on privacy and virtual payments;
  • Such asAppEnd,Android, domesticromVarious compatibility differences, especially because Google services are walled, resulting in chaotic development pits such as push and location;
  • If you have aAppUse three partiessdkSuch as location, maps, payments, push… Follow their rules and restrictions;

conclusion

Uni-ui has two main advantages over other frameworks

  • How to handle more platforms with a limited number of front-end teams is the primary consideration, cross-end aspectuni-appMore mature.
  • Familiar with the teamvueTechnology stack more students, then useuni-appShort internal training time, low risk.

Development points to pay attention to

  • Pay attention to the differences at each end, a lot of things, H5 is right, on the real machine is wrong, the real machine is good, for small program is wrong, there are differences between different small programs, in short, is to consider different situations, the key is to read the document carefully.

  • Due to the uni-App framework’s integration with 5+API, some native functions of UNIAPP can also be implemented through 5+API.

  • A lot of pits or because of multiple incompatibilities, in addition to writing a bit more trouble, basically there are still can solve the strategy.

For more information about UNI-App, please refer to the official uni-App-Multiterminal Development Framework or go directly to the GitHub repository uni-App to view the uni-App documentation and related materials. Welcome to star or mention issue. Github address: github.com/dcloudio/un…

PS: I am writing a UI library, next I should write some how to implement a UI library from zero, welcome to have this experience friends exchange.