探索uni-app的相关知识

uni-app的简单了解

介绍uni-app

Uni-app是由腾讯推出的一款跨平台开发框架，基于Vue.js生态构建，旨在帮助开发者使用一套代码同时构建iOS、Android、H5以及各种小程序平台的应用。Uni-app的核心思想是“一次开发，多端运行”，使开发者能够更高效地开发应用，同时降低开发成本和学习成本。

Uni-app在跨平台开发领域的地位：

在跨平台开发领域，Uni-app的地位日益突出。其基于Vue.js生态，具有丰富的组件库和开发工具，使得开发者能够使用熟悉的Vue.js语法进行开发，并且可以充分利用Vue.js社区的资源。由于Uni-app支持多端适配，开发者无需为不同平台编写不同的代码，大大提高了开发效率。因此，Uni-app在跨平台开发领域具有较高的竞争力和影响力。

uni-app的特点和优势

1. 一次开发，多端运行： Uni-app允许开发者使用一套代码开发多个平台的应用，包括iOS、Android、H5以及各种小程序平台。

2. 基于Vue.js生态： Uni-app基于Vue.js框架构建，开发者可以使用熟悉的Vue.js语法进行开发，并且可以充分利用Vue.js社区的生态资源。

3. 低成本、高效率： Uni-app降低了开发成本和学习成本，开发者无需学习多种开发语言和技术，只需掌握Vue.js和Uni-app即可快速开发应用。

4. 多端适配： Uni-app支持一次开发，多端运行，开发者可以轻松地将应用发布到iOS、Android、H5以及各种小程序平台上。

5. 性能优化： Uni-app在性能上做了不少优化工作，包括了渲染性能优化、打包体积优化以及运行时性能优化等，保证了应用的流畅性和稳定性。

6. 丰富的生态资源： Uni-app拥有丰富的组件库、插件以及开发工具，开发者可以充分利用这些资源来加速开发，并且可以与Vue.js社区进行交流和分享经验。

uni-app的基础知识

uni-app的开发规范

1. 项目结构规范：

   • 将页面文件放置在pages目录下，组件文件放置在components目录下，便于管理和维护。
   • 尽量遵循Vue.js项目的目录结构，如assets用于存放静态资源、utils用于存放工具函数等。

2. 命名规范：

   • 页面文件、组件文件、变量、方法等命名要具有描述性，使用驼峰式命名规范。
   • 组件名使用首字母大写的驼峰式命名规范，如MyComponent。
   • 页面文件和组件文件使用小写字母和连字符，如my-page.vue、my-component.vue。

3. 代码规范：

   • 遵循Vue.js的代码规范，如组件的data必须是一个函数，props应该尽量详细地定义类型和默认值等。
   • 避免在模板中使用过多的逻辑，尽量将逻辑处理移至JavaScript代码中。
   • 使用ESLint等工具进行代码检查，确保代码质量和一致性。

4. 注释规范：

   • 在关键代码块、复杂逻辑处添加注释，解释代码的作用和实现原理。
   • 组件内部的方法和属性要添加必要的注释，说明其作用和用法。

5. 样式规范：

   • 使用CSS预处理器，如Sass或Less，提高样式代码的可维护性。
   • 避免在样式中使用过于复杂的选择器，保持样式的简洁性和可读性。

6. 跨平台适配规范：

   • 注意不同平台之间的样式和布局差异，尽量使用Uni-app提供的跨平台样式规则来保持一致性。
   • 针对不同平台的特性进行适配，如小程序平台的限制和特有功能。

7. 性能优化规范：

   • 减少页面加载时间和渲染时间，优化图片和资源加载。
   • 避免使用过多的全局状态和响应式数据，合理使用组件的生命周期函数进行性能优化。
   • 使用uni-app提供的性能优化工具和插件，如uVue、uni-helper等。

了解uni-app的结构目录

 

 uni-app页面开发实践

页面创建

在 Uni-app 项目中，页面通常位于 pages 目录下。每个页面对应一个文件夹，文件夹中包含页面的 Vue 文件、样式文件以及其他相关资源。

uni-app-project/
│
├── pages/
│   ├── home/          // 首页
│   │   ├── home.vue   // 页面组件
│   │   └── ...
│   ├── about/         // 关于页面
│   │   ├── about.vue  // 页面组件
│   │   └── ...
│   └── ...
└── ...

路由配置

Uni-app 使用 pages.json 文件来配置页面路由。你可以在该文件中添加页面路径和页面的窗口样式等配置信息。

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

组件的使用

在页面组件中，你可以像在 Vue.js 中一样使用组件。你可以使用内置组件，也可以使用自定义组件。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <my-custom-component />
  </div>
</template>

<script>
import MyCustomComponent from '@/components/MyCustomComponent'

export default {
  components: {
    MyCustomComponent
  },
  data() {
    return {
      title: 'Welcome to Uni-app',
      content: 'Uni-app is awesome!'
    }
  }
}
</script>

<style scoped>
/* 页面样式 */
</style>

数据传递

在 Uni-app 中，数据传递可以通过 props、Vuex 或者事件总线等方式实现。以下是一个简单的示例，演示如何通过 props 传递数据：

<!-- 父组件 -->
<template>
  <div>
    <child :message="parentMessage" />
  </div>
</template>

<script>
import Child from '@/components/Child'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

uni-app组件开发的了解

创建组件

在 Uni-app 项目中，通常将自定义组件放置在 components 文件夹下。创建一个新的 Vue 组件文件，例如 MyComponent.vue，并在其中定义你的组件。

<template>
  <view class="my-component">
    <!-- Your component content here -->
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  props: {
    message: String // 定义一个名为 message 的 prop
  },
  data() {
    return {
      // Your component data here
    };
  },
  methods: {
    // Your component methods here
  },
  // 组件生命周期钩子
  created() {
    // Component created
  },
  mounted() {
    // Component mounted
  },
  // 其他生命周期钩子
};
</script>

<style scoped>
/* Your component styles here */
</style>

使用 Props 传递数据

在 Uni-app 中，可以使用 props 来向子组件传递数据。在父组件中使用子组件时，通过在子组件标签上绑定属性来传递数据。

<template>
  <view>
    <!-- 使用 MyComponent 组件，并传递 message 数据 -->
    <MyComponent :message="parentMessage" />
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    };
  }
};
</script>

 触发 Events 与监听

在自定义组件中，可以通过 $emit 方法触发事件，然后在父组件中监听并处理这些事件。

<template>
  <view>
    <!-- 组件中的按钮 -->
    <button @click="handleClick">Click me</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发名为 'click' 的事件，并传递参数
      this.$emit('clickEvent', 'Button clicked');
    }
  }
};
</script>

在父组件中监听并处理事件：

<template>
  <view>
    <!-- 使用 MyComponent 组件，并监听 clickEvent 事件 -->
    <MyComponent @clickEvent="handleClickEvent" />
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleClickEvent(data) {
      // 处理事件
      console.log(data); // 输出 'Button clicked'
    }
  }
};
</script>

组件生命周期

Uni-app 组件生命周期与 Vue 组件生命周期类似，包括 created、mounted、updated、destroyed 等生命周期钩子函数。可以在这些钩子函数中执行相应的逻辑。

<script>
export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  }
};
</script>

想了解更多知识请前往uni-app快速上手 | uni-app官网