In 2019, Uni-App version 1.4 has been released, adding support for Baidu and Alipay mini apps, opening up the plug-in market, and injecting more excellent features. This is a great gift for developers!

Support for more applets

Uni-app 1.4 adds support for Baidu and Alipay mini programs. From now on, you can release mini programs (wechat/Alipay/Baidu), H5, APP (iOS/Android) 6 platforms!

Uni-app has been supported in HBuilderX development tools in a very friendly and efficient way. It provides a visual operation menu and easy and convenient details of publishing various applets. This article mainly explains how to compile and distribute various applets through VUe-CLI.

Before compiling to each applet using CLI, you need to install vue-CLI and create uni-app project. The main commands are as follows:

# npm script
# Global install VUE - CLI
$ npm install -g @vue/cli
Create uni-app project, you will be prompted to select project template
$ vue create -p dcloudio/uni-preset-vue my-project
Enter the project directory
$ cd my-project
Copy the code

Tips: If you’ve used an older version beforeuni-app cliPlug-ins, then passnpmwilluni-appUpgrade to the latest version, you can get the originaluni-appThe ability of projects to convert to various applets

Support alipay small procedures

Use the following command to compile and preview alipay applet and release packaging

# npm script
# dev mode, compile preview
$ npm run dev:mp-alipay
# Build mode, release package
$ npm run build:mp-alipay
Copy the code

To publish to Alipay applet, you need to download and open the Developer tool of Alipay applet, and then select the project compilation directory (dev mode, build mode compilation directory is different, see the description below) for preview or release.

Differences between Dev and Build:

  • In dev mode, the compile directory is in the project root directory/dist/dev/directory
  • In build mode, the build directory is in the project root directory/dist/build/directory
  • Dev mode has SourceMap to facilitate breakpoint debugging
  • Build mode will compress the code, making it smaller and more suitable for release as a full-release application

Hello Uni-App has launched alipay mini program. You can open Alipay and scan the following QR code for experience:

Support Baidu intelligent small program

Baidu intelligent small program is compiled in the same way as Alipay small program, simply replace the platform identifier (MP-Baidu).

You can use the following command for Baidu intelligent small program compilation preview and packaging:

# npm script
# dev mode, compile preview
$ npm run dev:mp-baidu
# Build mode, release package
$ npm run build:mp-baidu
Copy the code

Release to Baidu intelligent small program, you need to download and open Baidu developer tools, and then select project compilation directory for preview or release.

Tips: Dev mode, build mode difference is the same as Alipay applets

Support cli command line compilation to wechat small program platform

Uni-app has long supported publishing to wechat applets, but within the HBuilderX development tool; Uni-app version 1.4 supports vuE-CLI compilation to wechat applet in the same way as Alipay applet.

You can use the following command to compile, preview and package wechat applet:

# npm script
# dev mode, compile preview
$ npm run dev:mp-weixin
# Build mode, release package
$ npm run build:mp-weixin
Copy the code

Similarly, publishing to wechat applet requires you to download and open wechat developer tools, and then select the project compilation directory for preview or publishing.

Other Features

Uni-app plugin market launched! Support front-end components, JS SDK, page templates, project templates, native plug-ins and other types, but also support the cloud packaging of native plug-ins, details.

The plug-in market, which serves as a platform for people who need and make wheels, will increase the efficiency and reuse of all UNI-App developers.

Uni-app 1.4 also includes a number of modifications to conditional compilation, H5 platform, etc., as shown below:

  • Conditional compilation of static support platform directory, different platforms can define their own unique static file details
  • New conditional compilation Support for multiple platforms “or” operator: | |. For example: / / # ifdef MP – WEIXIN | | MP – they represent the WeChat small programs and BAIDU small programs are effective
  • Json support conditional compilation. Pages that are not referenced in pages. Json are not packaged, allowing you to more freely manage the packaging strategy for files on different platforms.
  • Fixed conditional compilation using ifndef causing compilation errors
  • New Added permission configuration in manifest.json (under the mp-Weixin node) for the permission related Settings of wechat apPLETS interface
  • Added bluetooth related API details
  • Added details about low power Bluetooth APIS
  • Added iBeacon related API details
  • Optimized CSS compilation error message
  • Fixed v-for item partial compilation failure
  • H5 platform added canvas component and related API
  • H5 platform optimized navigation bar custom buttons support float property
  • H5 platform fixes uni. ShowModal excessive display off-screen
  • H5 platform fixed error reporting when picker component does not set value property value
  • H5 platform fixed bug where TabBar page onHide hook function would not trigger
  • H5 platform fixed issue where marker images were not displayed in map component
  • H5 platform fixed an AudioContext event listener error
  • H5 Platform fixed swiper does not switch after the swiper component is dynamically set to current
  • H5 fixed abnormal display of previous-margin and next-margin attributes in swiper component Settings
  • H5 platform fixed an issue #103 where the picker component displayed incorrect selections
  • H5 platform fixed an issue where the picker component displayed abnormally after setting the height dynamically
  • H5 platform fixed issue #119 where radio component color attribute Settings did not take effect
  • H5 platform fixed issue where picker component columnchange event was not triggered

The future planning

Uni-app will adapt byteDance applets as soon as possible, and further smooth out the platform differences between H5 applets, allowing developers to release as smoothly as possible on multiple platforms.

Uni-app has adapted mpvue and Megalo from the mini app. Thanks to meituan-Dianping team and Kaola team for their contribution to the open source community!

Uni-app will continue to be open source at github.com/dcloudio/un… ; To help UNI-App grow better and serve better developers, you are welcome to give uni-App feedback on improvement or Star encouragement.