The core features of uni-app

Core Features of uni-app

uni-app is a front-end framework for developing cross-platform applications using Vue.js. Developers can write one set of code and deploy it to iOS, Android, Web, and various mini-program platforms. Through conditional compilation and platform-specific handling, it achieves the true "write once, run anywhere" capability.

Cross-Platform Capability

The most notable feature of uni-app is its cross-platform capability. It supports compilation to multiple platforms:

• Mobile: iOS, Android
• Mini-Programs: WeChat, Alipay, Baidu, ByteDance, QQ, Kuaishou, JD.com, etc.
• H5: Web browsers
• Quick Apps
• Desktop: Windows, Mac, Linux (via uni-app's Electron extension)

// Example: Conditional compilation for different platforms
// #ifdef H5
console.log('This is the web version');
// #endif

// #ifdef MP-WEIXIN
console.log('This is WeChat Mini-Program');
// #endif

This cross-platform capability significantly reduces developers' workload, eliminating the need to develop separate codebases for each platform.

Vue.js-Based Syntax

uni-app adopts Vue.js as its development syntax, making it almost effortless for developers familiar with Vue. It supports:

• Vue's template syntax
• Vue's component system
• Vue's lifecycle (with extended application lifecycles)
• Vuex state management
• Vue Router-style page routing

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeMessage">Click me</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed'
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

Rich Component Library

uni-app provides a cross-platform component library. These components automatically render as native components on different platforms, ensuring performance:

• Basic components: view, text, image, button, etc.
• Form components: input, checkbox, radio, picker, etc.
• Media components: video, camera, live-player, etc.
• Map component: map
• Canvas component: canvas

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true">
      <swiper-item>
        <image src="/static/1.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/2.jpg"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

Powerful API System

uni-app offers a rich set of APIs covering device capabilities, UI interactions, network requests, and more:

• Device APIs: Get system info, network status, geolocation, etc.
• UI APIs: Show toast, modals, loading animations, etc.
• Media APIs: Take photos, record audio, play music, etc.
• File APIs: File read/write operations
• Data caching APIs: Local storage

// Example: Using uni-app API to get location
uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log('Current location:', res.latitude, res.longitude);
  },
  fail: function (err) {
    console.error('Failed to get location:', err);
  }
});

Conditional Compilation

uni-app's unique conditional compilation mechanism elegantly handles platform differences:

// Platform-specific code
// #ifdef H5
// H5-specific logic
// #endif

// #ifdef MP-WEIXIN
// WeChat Mini-Program-specific logic
// #endif

// #ifdef APP-PLUS
// App-specific logic
// #endif

Conditional compilation can also be used in styles:

/* #ifdef H5 */
.container {
  background-color: #f0f0f0;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.container {
  background-color: #ffffff;
}
/* #endif */

Plugin Ecosystem

uni-app has a rich plugin market where developers can find various functional plugins:

• UI component libraries: e.g., uView, ColorUI
• Functional plugins: Payment, push notifications, analytics, etc.
• Template projects: Industry-specific solutions
• Native plugins: Extend native capabilities

// Example: Using a third-party UI component
import uView from "uview-ui";
Vue.use(uView);

Performance Optimization

uni-app has made significant performance optimizations:

1. Virtual DOM: Efficient rendering based on Vue's virtual DOM
2. Native Components: Key components like video and map directly call native components
3. Automatic Subpackaging: Supports subpackage loading to optimize first-screen speed
4. Precompilation: Templates and styles are precompiled into platform-native code
5. On-Demand Packaging: Only packages used components and APIs

// Configure subpackages in manifest.json
{
  "subPackages": [
    {
      "root": "pages/sub",
      "pages": [
        "pageA",
        "pageB"
      ]
    }
  ]
}

Development Tool Support

uni-app provides a comprehensive development toolchain:

1. HBuilderX: Official IDE with powerful development features
   • Syntax highlighting
   • Code hints
   • One-click running
   • Real-device debugging
2. CLI Tools: Supports project building via command line
3. Chrome Debugging: H5 supports Chrome DevTools
4. Mini-Program Developer Tools Integration: Directly connects to various mini-program developer tools

Native Capability Extension

uni-app provides mechanisms to extend native capabilities:

1. Native.js: Directly calls platform-native APIs
2. Native Plugins: Integrates native modules via uni-app's plugin mechanism
3. uni_modules: Modular extension mechanism

// Example: Using Native.js to call Android native Toast
if(plus.os.name == 'Android') {
  var main = plus.android.runtimeMainActivity();
  var Toast = plus.android.importClass('android.widget.Toast');
  var toast = Toast.makeText(main, "Native Toast", Toast.LENGTH_SHORT);
  toast.show();
}

Multi-Platform Adaptation Solutions

uni-app offers various solutions for adapting to different screens:

1. rpx Unit: Responsive unit based on screen width
2. Flex Layout: Recommended for responsive design
3. Media Queries: Supports CSS media queries
4. uni.scss: Global style variable management

/* Using rpx units */
.container {
  width: 750rpx; /* Full-screen width in 750 design */
  padding: 20rpx;
}

/* Using flex layout */
.flex-container {
  display: flex;
  justify-content: space-between;
}

State Management

uni-app supports multiple state management solutions:

1. Vuex: Officially recommended state management library
2. Global Variables: Get app instance via getApp()
3. Local Storage: uni.setStorage/uni.getStorage
4. Event Bus: uni.$on/uni.$emit

// Example: Using Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// Using in components
this.$store.commit('increment');
console.log(this.$store.state.count);

Routing and Navigation

uni-app's routing system is based on mini-program routing, providing easy-to-use APIs:

1. Page Navigation: uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab
2. Page Return: uni.navigateBack
3. Route Parameters: Pass parameters via URL
4. Page Events: onLoad, onShow, onReady, etc.

// Navigate to a new page with parameters
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
})

// Get parameters in the target page
export default {
  onLoad(options) {
    console.log(options.id); // Outputs 1
    console.log(options.name); // Outputs test
  }
}

Cloud Development Support

uni-app integrates cloud development capabilities from major platforms:

1. uniCloud: Unified cloud development service provided by DCloud
2. WeChat Cloud Development: Supports WeChat Mini-Program cloud development
3. Alipay Cloud Development: Supports Alipay Mini-Program cloud development

// Example: Using uniCloud to call cloud functions
uniCloud.callFunction({
  name: 'getUserInfo',
  data: {
    userId: '123'
  },
  success(res) {
    console.log(res.result);
  },
  fail(err) {
    console.error(err);
  }
});

Internationalization Support

uni-app provides comprehensive internationalization solutions:

1. i18n Plugin: Supports vue-i18n
2. Multi-Language Files: Managed by language directories
3. Runtime Switching: Supports dynamic language switching

// Example: Using vue-i18n
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh', // Default language
  messages: {
    zh: {
      hello: '你好'
    },
    en: {
      hello: 'Hello'
    }
  }
})

// Using in templates
<template>
  <view>{{ $t('hello') }}</view>
</template>

Packaging and Publishing

uni-app provides one-click packaging and publishing for all platforms:

1. H5 Publishing: Generates static website files
2. Mini-Program Publishing: Generates code for various mini-program platforms
3. App Publishing: Generates iOS/Android installation packages
4. Automated Deployment: Supports CI/CD integration

// Example package.json configuration
{
  "scripts": {
    "build:h5": "uni-build --platform h5",
    "build:mp-weixin": "uni-build --platform mp-weixin",
    "build:app": "uni-build --platform app"
  }
}

Community and Ecosystem

uni-app has an active developer community and a mature ecosystem:

1. Official Forum: For technical discussions and Q&A
2. Plugin Market: Thousands of plugins available
3. Template Market: Various industry-specific templates
4. Training System: Official and third-party training resources
5. Commercial Support: Enterprise-level technical support

Continuous Updates and Maintenance

The uni-app team maintains frequent updates, continuously adding new features and improvements:

1. Regular Releases: Major updates every 1-2 months
2. Long-Term Support Versions: Provides stable version maintenance
3. Public Roadmap: Developers can view future plans
4. Quick Issue Response: Prompt handling of GitHub and forum issues

// Example: Updating uni-app dependencies
{
  "dependencies": {
    "@dcloudio/uni-app": "^3.0.0-alpha-30720210514001"
  }
}