浅谈VUE uni-app 核心知识

什么是uni-app？

uni-app 是一款基于Vue.js开发的跨平台应用开发框架，使用uni-app可以同时构建出能运行于多个平台（包括iOS、Android、H5等）的应用程序。

uni-app与其他跨平台开发框架相比，其最大的特点是具有接近原生应用的性能体验，同时具有极高的开发效率和代码复用性。此外，uni-app提供了一整套生命周期、组件、路由等基础功能库，可以极大方便开发者完成移动应用的开发。

开始使用uni-app

安装uni-app

使用uni-app开发需要先安装HBuilderX，它是一个基于atom的IDE，具有智能代码提示、代码完成、版本管理等功能，同时内置了uni-app独有的模拟器，可以实时预览代码效果。HBuilderX可以在所有支持的平台上下载安装，包括Windows、macOS和Linux。

创建一个新的uni-app项目

在HBuilderX中，点击“文件”->“新建”->“uni-app项目”，然后根据提示输入项目名称、描述和路径等信息。新的uni-app项目将会被创建在指定路径下，并且整个目录结构已经被自动生成，包括了自定义组件、生命周期和路由等配置。

开始编写代码

在HBuilderX中打开uni-app项目，然后修改App.vue组件，添加自己的视图和逻辑。在uni-app中，所有的vue单文件组件都可以使用小程序语法编写，还可以在同一个项目中混合编写小程序、微信公众号和H5页面。

uni-app核心知识

生命周期

uni-app中的生命周期和Vue.js中的生命周期一致，分为“创建”、“挂载”、“更新”和“销毁”四个阶段。uni-app中常用的生命周期包括：

• created：组件创建时执行
• mounted：组件首次挂载时执行
• updated：组件更新时执行
• destroyed：组件销毁时执行

<script>
export default {
  created() {
    console.log('组件已经被创建')
  },
  mounted() {
    console.log('组件已经被挂载')
  },
  updated() {
    console.log('组件已经被更新')
  },
  destroyed() {
    console.log('组件已经被销毁')
  }
}
</script>

组件通信

在uni-app中，组件通信和Vue.js中的组件通信一致，常用的方式有Props、Events和Vuex等。

• Props：父组件向子组件传递数据

```
// 父组件传递数据

// 子组件接收数据

```

• Events：子组件向父组件发送事件

```
// 子组件发送事件

// 父组件接收事件

```

• Vuex：全局状态管理

```
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment(state) {
state.counter++
}
},
actions: {
increment({commit}) {
commit('increment')
}
}
})

// App.vue

```

示例说明

编写一个简单的登录页面

<template>
  <view>
    <form>
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button type="submit" @click="handleLogin">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 发起登录请求
      // ...
    }
  }
}
</script>

以上是一个简单的登录页面，包含了用户名、密码输入框和登录按钮。其中，v-model用于实现数据的双向绑定，@click用于监听登录按钮的点击事件。

使用uni-ui组件库

<template>
  <uni-list>
    <uni-list-item
      title="标题"
      thumb="https://placehold.jp/100x100.png"
      extra="附加信息"
      @click="handleItemClick"
    >
    </uni-list-item>
  </uni-list>
</template>

<script>
import { uniList, uniListItem } from 'uni-ui'

export default {
  components: {
    uniList,
    uniListItem
  },
  methods: {
    handleItemClick() {
      // 处理点击事件
      // ...
    }
  }
}
</script>

此处是一个使用uni-ui组件库的例子，包含了uni-list和uni-list-item两个组件，相当于一种高度封装的列表视图，@click用于监听列表项的点击事件。这里需要额外注意的是，需要通过import语句引用uni-ui中的模块并注册为vue组件，之后才能在页面中使用。