轻松跨端开发小程序博客：uni-app 入门指南

2024-01-26 12:00:00

前言

uni-app 是一款跨平台应用开发框架，使用 Vue.js 开发，开发者编写一套代码，可发布到 iOS、Android、H5、小程序、快应用等多个平台。uni-app 通过条件编译和对应平台特有 API 的调用，可以完美兼容各个平台。

项目搭建

1. 安装 uni-app CLI

npm install -g @dcloudio/uni-app-cli

2. 创建项目

uni-app init uni-app-blog

组件库使用

1. 引入组件库

import uni from '@dcloudio/uni-ui'

Vue.use(uni)

2. 使用组件

在 Vue 组件中使用组件库组件，例如：

<template>
  <uni-button @click="handleClick">按钮</uni-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

引入 Vuex 状态管理

1. 安装 Vuex

npm install vuex

2. 创建 Vuex Store

import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

3. 在 Vue 组件中使用 Vuex

在 Vue 组件中使用 Vuex Store，例如：

<template>
  <div>{{ count }}</div>
  <uni-button @click="increment">+</uni-button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    ...mapActions([
      'increment'
    ])
  }
}
</script>