UniApp跨平台开发实战：5个高效组件封装技巧

1. 基础组件封装：带图标按钮

创建可复用的图标按钮组件：

<!-- components/icon-button.vue -->
<template>
  <button class="icon-btn" @click="$emit('click')">
    <uni-icons :type="icon" size="20" />
    <slot>默认文字</slot>
  </button>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.icon-btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}
</style>

<!-- 使用示例 -->
<icon-button icon="star" @click="handleClick">收藏</icon-button>

2. 适配多端的条件编译

处理不同平台的UI差异：

<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <button open-type="share">微信分享</button>
    <!-- #endif -->
    
    <!-- #ifdef APP -->
    <button @click="nativeShare">原生分享</button>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  methods: {
    nativeShare() {
      // APP端原生分享逻辑
    }
  }
}
</script>

3. 高级组件：下拉刷新上拉加载

封装列表组件：

<!-- components/scroll-list.vue -->
<template>
  <scroll-view 
    scroll-y 
    @scrolltolower="loadMore"
    @refresherrefresh="refresh"
    refresher-enabled
  >
    <slot name="content"></slot>
    <view v-if="loading" class="loading">加载中...</view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    loading: Boolean
  },
  methods: {
    loadMore() {
      this.$emit('load-more')
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

4. 全局组件自动注册

使用Vue插件自动注册组件：

// components/index.js
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  './', true, /.vue$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = upperFirst(
    camelCase(fileName.replace(/^./(.*).w+$/, '$1'))
  )
  
  Vue.component(componentName, componentConfig.default || componentConfig)
})

// main.js中导入
import '@/components'

5. 组件性能优化

<template>
  <view>
    <!-- 使用v-show替代v-if -->
    <view v-show="active">内容</view>
    
    <!-- 复杂计算使用计算属性 -->
    <view>{{ computedData }}</view>
    
    <!-- 大数据列表使用虚拟滚动 -->
    <uni-list :data="bigData">
      <template v-slot="{ item }">
        <uni-list-item :title="item.name" />
      </template>
    </uni-list>
  </view>
</template>

<script>
export default {
  computed: {
    computedData() {
      // 复杂计算逻辑
    }
  }
}
</script>

通过合理封装组件，可以显著提升UniApp项目的开发效率和可维护性，真正实现”一次开发，多端运行”的目标。