在 uni-app 中，使用自定义组件与在标准的 Vue 项目中非常相似。uni-app 基于 Vue 和小程序的框架，使得开发者可以跨平台使用同一套代码。以下是关于如何在 uni-app 中创建和使用自定义组件的简要介绍。

创建自定义组件

1. 创建组件文件夹和文件：

   在 components 目录下创建一个新的文件夹，例如 MyComponent，并在其中创建一个 MyComponent.vue 文件。

   项目结构：
   ├── components
   │   └── MyComponent
   │       └── MyComponent.vue
   

2. 定义组件：

   在 MyComponent.vue 文件中定义组件的模板、脚本、和样式。注意 uni-app 默认使用的 Vue 语法，类似于标准 Vue 单文件组件。

   <template>
     <view class="my-component">
       <text>{{ message }}</text>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: 'Hello from MyComponent!'
       };
     }
   };
   </script>
   
   <style>
   .my-component {
     padding: 10px;
     background-color: #f0f0f0;
   }
   </style>
   

注册并使用自定义组件

3. 在页面中注册组件：

   在需要使用自定义组件的页面（或另一个组件）中，首先需要引入并注册该组件。

   <!-- 假设我们在 pages/index/index.vue 中使用 -->
   <template>
     <view>
       <MyComponent></MyComponent>
     </view>
   </template>
   
   <script>
   import MyComponent from '@/components/MyComponent/MyComponent.vue';
   
   export default {
     components: {
       MyComponent
     }
   };
   </script>
   

   注意：路径根据项目目录结构和文件位置有所不同。

4. 使用组件：

   在模板中，你可以像使用内置组件一样使用你刚才创建的自定义组件 <MyComponent />。

跨页面使用组件

如果需要在多个页面中使用同一个组件，可以将组件注册为全局组件，或在每个需要使用的页面中单独引入并注册。

注册为全局组件：

在 main.js 中注册组件：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent/MyComponent.vue';

Vue.component('MyComponent', MyComponent);

注意在 uni-app 中，main.js 可能有些不同，具体取决于项目手脚架的生成方式。

注意事项

• 在 uni-app 中，组件的样式默认是作用域样式，和标准的 Vue SFC 行为一致。
• uni-app 组件也可结合跨平台 API，如 GPS、文件系统等，使得组件更加强大。
• 为了保持跨平台兼容性，检查你的组件代码是否使用了所有目标平台支持的特性。

这样，你就可以在 uni-app 项目中使用自定义控件，大大提高了代码的重用性和项目的可维护性。