It’s a daily nightmare for many front-end developers.

Uni-app follows vue. js syntax, has one set of code, and is distributed in multiple applications, which effectively solves the pain points of many developers.

Since its launch in August, tens of thousands of developers have embraced uni-App and tens of thousands of apps have been created so far, with active developers generating tens of thousands of communication records in QQ groups every day.

After more than a month of work, UNI-App version 1.2 has been released to support distribution to H5 platform.

Uni-app now covers iOS, Android, applets and H5.

In addition, UNI-App has been open source since version 1.2. Welcome to star!

Sweep code experience

Example speaking, scan the following four TWO-DIMENSIONAL codes in turn, compare and experience:

Note: the Appstore cannot submit simple demos, so some additional features have been added to the iOS version.

Quick learning

Uni-app supports quick project creation via HBuilderX visual interface and VUE-CLI command line. Both modes support hot reloading when running on H5 platform.

Visual interface through HBuilderX

The visualizations are simple, and HBuilderX has built-in environment dependencies for lazy people.

1. Download HBuilderX (address), install and start it

2. Create a project, select uni-app type, and select Hello Uni-app template

3. Click on the top menu and run it to Chrome

4. HBuilderX then starts compiling and outputs the information to the console

Tips:

  • If Chrome has been opened in advance, you need to manually switch Chrome to mobile debug mode
  • If Chrome is not open, HBuilderX will try to switch Chrome to debug mode automatically, but there is a delay. If the page does not display properly, you will need to manually refresh it

Through vue-CLI command line

Those who are used to CLI scaffolding can create uni-app projects via VUe-CLI.

1. Install vue-CLI globally

npm install -g @vue/cli
Copy the code

2. Create uni-app project

vue create -p dcloudio/uni-preset-vue my-project
Copy the code

At this point, you will be prompted to select the project template. It is recommended to select the Hello Uni-app project template for the first time, as shown below:

3. Go to the directory and run it

cd my-project
npm run serve
Copy the code

After successful operation, the console will output the H5 website access address as follows:

4. Start Chromel and switch to mobile debugging mode.

Tips:

  • At presentcliScaffolding only supports compilation to H5 website, the next version will support compilation to wechat small program platform;
  • At the present stage, if you need to run the wechat mini program or App, you need to put thesrcFolder, drag and drop into HBuilderX, click “Run” menu to execute

H5 side configuration

Uni-app is distributed to H5 in SPA mode and supports the following configurations:

  • Custom page templates, support simple SEO configuration and Baidu statistics
  • Both hash and history route forward modes are supported
  • Supports custom page JS loading components

Other updates to this release

Uni-app version 1.2 also includes the following updates:

  • – Added conditional compilation #ifndef to stand for conditional compilation on a platform other than this one (e.g., non-H5, which is the app and applets currently supported by UNI-App)
  • New API tabBar support for setting red dots and corner markers
  • Added API to monitor network status changes
  • New open-type attribute of button component to support feedback value field
  • The new manifest. Json configuration navigateToMiniProgramAppIdList nodes, list of small programs can be configured to need to jump
  • Added nvUE support for third-party WEEX UI libraries
  • Added NVUE support for BindingX
  • Added NVUE support for top native navigation onNavigationBarButtonTap events
  • Fix the problem that parameter information is lost when uni. Request Method is PUT or DELETE
  • Fixed picker component cancel event not firing
  • Fixed component data rendering anomalies in complex scenarios
  • Fixed uni. CanvasToTempFilePath method setting parameter destWidth, destHeight does not take effect
  • Fixed an issue where nvUE initialization could not get storage
  • Fixed an issue where NvUE Android platform does not support Websocket
  • Fixed an issue where nvue Android page may display abnormally when titleNView is not set
  • Fixed an issue where nvUE iOS retractable area may not be correct after the soft keyboard is ejected
  • Fixed an issue where nvue iOS platform could not set data using uni.request
  • Optimized web-view component to add web page loading progress bar
  • Optimize web-view component title and page title synchronization
  • Optimized input component type=”number” to support input of decimal point on App side

Future plans

Uni-app will continue to iterate at a high speed, complementing the compatibility of Baidu and Alipay mini programs while continuing to improve the covered four terminals.

For more requirements planning, see uni-app Requirements Wall