Foreword

Today to talk about the front end of the skills required - a small program development .

From the earliest release of small micro-channel program, later Alipay applets, byte beating applets, small programs Baidu, QQ small program, as well as the recent release of 360 small programs, faced with so many sets of code, developers how develop it?

When business requirements at the same time to be displayed in different end time, the cost to write multiple sets of code for different end obviously very high. At this time only write one set of code, ability to adapt to the many-fold is particularly needed.

Today to tell you a use of Vuecross-end of the frame - UNI-App

uni-app framework Introduction

uni-appIt is to use a Vue.jsfront-end development framework for cross-platform applications can be compiled into the iOS, , Android, H5and a variety of small programs (micro-channel / Alipay / Baidu / headlines / QQ / nails) and other platforms.

uni-app in the number of developers, case, cross-end of the smooth, expansion flexibility, performance experience, the surrounding ecology, learning costs, development costs have a strong competitive advantage over other six key indicators:

More number of developers / Case
Cross-end smooth degree / expansion flexibility (via conditional compilation, calling capability without affecting other proprietary platforms)
Experience better performance ( Append support for weexrendering, delivering a smoother user experience.)
Surrounding ecosystem rich (the introduction of plug-in market , providing more components and templates, truly out of the box)
Lower learning costs (using Vue.js grammar + applet API )
Low development costs (more than development costs, recruitment, management, testing all aspects of the costs are substantially reduced.)

Although different ends of the ever-changing environment framework, regardless of all kinds 小程序, , Weex, React-Native, Flutter, 快应用they remain the same it is the MVVMarchitectural design. uni-appBoth hope to complete all end with a set of code requirements, the same business logic to complete the system which converge to the same level, but will not lead to the same project abstract maintainability worse.

development tools

By HBuilderX visual interface, HBuilderX built-related environmental, out of the box, no configuration nodejs.

Development language

Use Vue.js + applet API , for development.

Data binding and event handlers with Vue.jsspecification, adding a Appand 页面的生命周期.
uni-appHelp us to different platforms of 小程序APIalmost all packaged up and need to be replaced with a prefix unito illustrate:

In the micro-channel transmission in the requestrequest:

wx.request({
  url: "https://www.example.com/request", //仅为示例，并非真实接口地址
  success: res => {
    console.log(res.data);
  }
});

In the uni-apptransmission requestrequest:

uni.request({
  url: "https://www.example.com/request", //仅为示例，并非真实接口地址
  success: res => {
    console.log(res.data);
  }
});

Understand the micro-channel applet you, is not feeling very simple? Nothing more than the wxprefix replaced uniit, and uni.requestthe whole end of the common ajaxrequests APIOh, developers reduce the cost of learning the maximum extent.

How to solve the cross-end compatibility issues

Each platform has some of its own characteristics, so there will be some situations can not be cross-platform.

uni-app It provides conditional compilation means, in a project completed in elegant personalized implementation platform.

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只会编译到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只会编译到app</view>
  <! -- #endif -->
</view>

nvue mode

uni-appAccording to the configuration where different compiler can use weexthe components, you may also be used a small program components (i.e., uni-appcomponents). When writing a page page suffix .nvue(abbreviation of native vue)

uni-appApp end of the built-in weexrendering engine that provides native rendering capabilities, allowing uni-app perform better in the App end.

nvue equivalent to weexadd a lot uni-appof components and api, and rich Plus API, Native.jsnative plug-ins. Learn more nvue

Government how ui Hyogo, uni-ui

uni-uiIt is DClouda cross-end ui library, which is based vuecomponents flex, without layout of domthe cross-all-end uidatabase .

web development, some developers accustomed to using a ui library to complete all development, but in the uni-appsystem, the developers recommend the use of higher performance first base component, then expand as needed to introduce the necessary components. GitHub Address: UNI-ui

You see here is not that particularly heart of it? Do not worry, let's look at uni-appthe development of norms.

uni-app development specifications

In order to achieve compatible multiport, considering the compilation speed, operating performance and other factors, uni-appwe have agreed on the development of the following specification:

Page file follows the Vuesingle-file assembly ( SFC) specification
Components applet tag close to specification, detailed uni-appcomponent specification
Interface capabilities ( JS API) near the small micro-channel program specification, but it needs to prefix wxreplaced uni, see uni-appInterface Specification
Data binding and event handlers with Vue.jsspecification, adding the Applife cycle and the page
Is compatible with multi-terminal operation, it is recommended to use flexlayout for development

Rules on the management of each end requires patience to learn

uni-app Not difficult to learn, but we noticed a lot of new people very anxious in adapting rules limit each platform.

uni-appA lot of cross-end, although the code level can be developed once, to generate many-fold. But note that each end, there are rules governing each end, which has nothing to do with development, but each developer to master these rules still have to be patient limit.

Such as H5 end of the browser cross-domain restrictions;
Such as micro-channel program will be mandatory for small httpslinks, and all to be networked server domain name to be assigned to the white list of the micro-channel;
Such Append, iOSprivacy control and virtual payment control is very strict;
For example, Append Android, made romall kinds of compatibility differences, especially push, positioning development chaotic pit wall is because Google services, resulting from;
If you Appwant to use the three parties sdk, such as positioning, maps, pay, push ... but also to follow their rules and restrictions;

to sum up

uni-ui compared to other framework has two main advantages

How to get more platforms in a limited number of front-end team, the reason is the need for a primary consideration, inter-end aspects uni-appmore mature.
Team familiar with the vuetechnology stack of the students a little more, use uni-appa short internal training time and low risk.

Development point to note

Note the differences in each end, a lot of things, h5 is right, wrong aiming machine, really good with the machine, for small programs are wrong, there are small differences between the different programs, in short, it is good considering different situations focus is to carefully read the document.
Since uniapp integrated frame 5 + API , some of the native functionality required can also uniapp 5 + API to be implemented.
Many pit or incompatible because many-fold, in addition to writing a little trouble, basically still can be solved strategy.

About uni-appmore information, refer to the official documentation uni-app - multiport development framework , or go directly to the GitHubwarehouse uni-app to view uni-appdocuments and related materials. Welcome to go staror mention issueKazakhstan. github Address: https://github.com/dcloudio/uni-app/

PS: I'm writing a ui library, then I should write some aspects of how to achieve a ui library from zero article, welcome experience in this area of the little friends communicate with each other about.

Cross-end development pain points? Send you a Vue most popular cross-end framework --uni-app