微信小程序代码复用技巧总结大全

更新时间：2026年03月23日 11:05:23 作者：yogalin1993

在微信小程序中,你可以创建自定义组件,这些组件可以在不同的页面和项目中重复使用,非常适合复用代码,这篇文章主要介绍了微信小程序代码复用技巧的相关资料,需要的朋友可以参考下

1.自定义组件复用

基本组件封装

// components/common-button/common-button.js
Component({
  properties: {
    // 定义属性
    type: {
      type: String,
      value: 'primary'  // primary/default/danger
    },
    text: String,
    disabled: Boolean
  },
  methods: {
    handleTap() {
      if (!this.data.disabled) {
        this.triggerEvent('tap')
      }
    }
  }
})

<!-- components/common-button/common-button.wxml -->
<button 
  class="common-btn {{type}} {{disabled ? 'disabled' : ''}}"
  bindtap="handleTap"
>
  {{text}}
</button>

/* components/common-button/common-button.wxss */
.common-btn {
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.common-btn.primary {
  background: #07c160;
  color: #fff;
}
.common-btn.disabled {
  opacity: 0.5;
}

使用组件

// 页面.json
{
  "usingComponents": {
    "common-button": "/components/common-button/common-button"
  }
}

<!-- 页面.wxml -->
<common-button 
  text="提交" 
  type="primary" 
  bindtap="onSubmit"
/>

<common-button 
  text="取消" 
  type="default" 
  bindtap="onCancel"
/>

2.Behavior（行为）复用

创建公共Behavior

// behaviors/loading-behavior.js
module.exports = Behavior({
  data: {
    isLoading: false
  },
  methods: {
    // 显示加载
    showLoading(text = '加载中...') {
      wx.showLoading({ title: text })
      this.setData({ isLoading: true })
    },
    
    // 隐藏加载
    hideLoading() {
      wx.hideLoading()
      this.setData({ isLoading: false })
    },
    
    // 带加载状态的请求
    async requestWithLoading(options) {
      this.showLoading()
      try {
        const res = await this.request(options)
        return res
      } finally {
        this.hideLoading()
      }
    }
  }
})

在多个组件中复用

// components/user-card/user-card.js
const loadingBehavior = require('../../behaviors/loading-behavior')

Component({
  behaviors: [loadingBehavior],
  methods: {
    async fetchUserInfo() {
      const data = await this.requestWithLoading({
        url: '/api/user/info'
      })
      this.setData({ userInfo: data })
    }
  }
})

// components/product-list/product-list.js
const loadingBehavior = require('../../behaviors/loading-behavior')

Component({
  behaviors: [loadingBehavior],
  methods: {
    async loadProducts() {
      const products = await this.requestWithLoading({
        url: '/api/products'
      })
      this.setData({ products })
    }
  }
})

3.Mixins模式实现

虽然小程序不直接支持Mixins，但可以通过Behavior模拟：

// behaviors/form-behavior.js
module.exports = Behavior({
  data: {
    formData: {},
    formErrors: {}
  },
  methods: {
    // 表单字段变化
    onFormChange(e) {
      const { field } = e.currentTarget.dataset
      const { value } = e.detail
      
      this.setData({
        [`formData.${field}`]: value,
        [`formErrors.${field}`]: ''
      })
    },
    
    // 表单验证
    validateForm(rules) {
      const errors = {}
      let isValid = true
      
      Object.keys(rules).forEach(field => {
        const value = this.data.formData[field]
        const rule = rules[field]
        
        if (rule.required && !value) {
          errors[field] = rule.message || '该字段必填'
          isValid = false
        }
        // 更多验证规则...
      })
      
      this.setData({ formErrors: errors })
      return isValid
    }
  }
})

4.高阶组件模式

创建高阶组件工厂

// utils/with-auth.js
function withAuth(Component) {
  return function(options) {
    const originalOnLoad = options.methods.onLoad || function() {}
    
    options.methods.onLoad = function(params) {
      // 检查登录状态
      if (!this.checkAuth()) {
        wx.redirectTo({ url: '/pages/login/login' })
        return
      }
      
      originalOnLoad.call(this, params)
    }
    
    // 添加登录检查方法
    options.methods.checkAuth = function() {
      const token = wx.getStorageSync('token')
      return !!token
    }
    
    return Component(options)
  }
}

使用高阶组件

// pages/user/user.js
import withAuth from '../../utils/with-auth'

const originalOptions = {
  data: { userInfo: {} },
  methods: {
    onLoad() {
      this.loadUserInfo()
    },
    loadUserInfo() {
      // 加载用户信息
    }
  }
}

// 包装原始配置
withAuth(Component)(originalOptions)

5.工具函数复用

按功能分类的工具函数

// utils/date-util.js
// 日期格式化
export function formatDate(date, format = 'YYYY-MM-DD') {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
}

// 相对时间
export function relativeTime(date) {
  const now = new Date()
  const target = new Date(date)
  const diff = now - target
  
  const minutes = Math.floor(diff / 60000)
  if (minutes < 60) return `${minutes}分钟前`
  
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`
  
  const days = Math.floor(hours / 24)
  if (days < 30) return `${days}天前`
  
  return formatDate(date)
}

// utils/request-util.js
// 统一的网络请求
export function request(options) {
  const token = wx.getStorageSync('token')
  const header = {
    'Content-Type': 'application/json',
    ...options.header
  }
  
  if (token) {
    header['Authorization'] = `Bearer ${token}`
  }
  
  return new Promise((resolve, reject) => {
    wx.request({
      url: `https://api.example.com${options.url}`,
      method: options.method || 'GET',
      data: options.data,
      header,
      success: (result) => {
        if (result.statusCode === 200) {
          resolve(result.data)
        } else {
          reject(result.data)
        }
      },
      fail: reject
    })
  })
}

6.组合式复用

复杂组件的组合

// components/smart-form/smart-form.js
const formBehavior = require('../../behaviors/form-behavior')
const validationBehavior = require('../../behaviors/validation-behavior')

Component({
  behaviors: [formBehavior, validationBehavior],
  
  methods: {
    // 继承自formBehavior的onFormChange
    // 继承自validationBehavior的validateForm
    
    async onSubmit() {
      if (!this.validateForm(this.data.rules)) {
        return
      }
      
      // 提交表单
      const result = await this.submitData(this.data.formData)
      
      if (result.success) {
        this.triggerEvent('success', result.data)
      }
    }
  }
})

7.模板复用

WXML模板

<!-- templates/empty-state.wxml -->
<template name="emptyState">
  <view class="empty-container">
    <image src="{{icon}}" class="empty-icon" />
    <text class="empty-text">{{text}}</text>
    <button wx:if="{{showButton}}" bindtap="onButtonTap">
      {{buttonText}}
    </button>
  </view>
</template>

<template name="loading">
  <view class="loading-container">
    <image src="/images/loading.gif" class="loading-icon" />
    <text>{{text || '加载中...'}}</text>
  </view>
</template>

使用模板

<!-- 页面.wxml -->
<import src="/templates/empty-state.wxml" />
<import src="/templates/loading.wxml" />

<view wx:if="{{isLoading}}">
  <template is="loading" data="{{text: '拼命加载中...'}}" />
</view>

<view wx:elif="{{isEmpty}}">
  <template 
    is="emptyState" 
    data="{{{
      icon: '/images/empty.png',
      text: '暂无数据',
      showButton: true,
      buttonText: '刷新试试'
    }}}" 
  />
</view>

8.样式复用策略

创建样式变量

/* styles/variables.wxss */
:root {
  --primary-color: #07c160;
  --danger-color: #fa5151;
  --text-color: #333;
  --border-color: #eee;
  --font-size-sm: 24rpx;
  --font-size-md: 28rpx;
  --font-size-lg: 32rpx;
  --border-radius: 8rpx;
}

复用样式类

/* styles/common.wxss */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hairline {
  position: relative;
}
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1rpx solid var(--border-color);
  transform: scaleY(0.5);
}

在页面中引入

/* 页面.wxss */
@import "/styles/variables.wxss";
@import "/styles/common.wxss";

.user-card {
  composes: flex-center;
  padding: 20rpx;
  border-radius: var(--border-radius);
  background: #fff;
}

9.数据状态复用

创建全局状态管理器

// store/user-store.js
class UserStore {
  constructor() {
    this._listeners = []
    this._userInfo = null
  }
  
  // 获取用户信息
  getUserInfo() {
    if (!this._userInfo) {
      this._userInfo = wx.getStorageSync('userInfo')
    }
    return this._userInfo
  }
  
  // 更新用户信息
  setUserInfo(userInfo) {
    this._userInfo = userInfo
    wx.setStorageSync('userInfo', userInfo)
    this._notifyListeners()
  }
  
  // 订阅变化
  subscribe(listener) {
    this._listeners.push(listener)
    return () => {
      const index = this._listeners.indexOf(listener)
      if (index > -1) this._listeners.splice(index, 1)
    }
  }
  
  _notifyListeners() {
    this._listeners.forEach(listener => listener(this._userInfo))
  }
}

// 导出单例
export default new UserStore()

在多个页面中使用

// pages/profile/profile.js
import userStore from '../../store/user-store'

Page({
  onLoad() {
    // 获取用户信息
    this.setData({ 
      userInfo: userStore.getUserInfo() 
    })
    
    // 订阅更新
    this.unsubscribe = userStore.subscribe((userInfo) => {
      this.setData({ userInfo })
    })
  },
  
  onUnload() {
    // 取消订阅
    this.unsubscribe && this.unsubscribe()
  }
})

10.复用最佳实践

1.按职责分层

utils/
  ├── date-util.js        # 日期处理
  ├── request-util.js     # 网络请求
  ├── validate-util.js    # 验证工具
  └── storage-util.js     # 存储工具

behaviors/
  ├── form-behavior.js
  ├── loading-behavior.js
  └── auth-behavior.js

components/
  ├── common/            # 通用组件
  ├── business/          # 业务组件
  └── layout/            # 布局组件

mixins/                  # 混合功能
templates/               # 模板文件
styles/                  # 样式文件

2.创建配置中心

// config/app-config.js
export default {
  // API配置
  api: {
    baseURL: 'https://api.example.com',
    timeout: 10000
  },
  
  // 页面路径
  pages: {
    login: '/pages/login/login',
    home: '/pages/home/home'
  },
  
  // 存储键名
  storageKeys: {
    token: 'user_token',
    userInfo: 'user_info'
  }
}

3.文档和示例

为每个复用组件创建示例页面：

components/common-button/
  ├── common-button.js
  ├── common-button.wxml
  ├── common-button.wxss
  └── example/
      ├── example.js      # 使用示例
      └── example.wxml

复用带来的好处

减少代码量：避免重复编写相同逻辑
便于维护：修改只需在一处进行
一致性：保证功能和行为统一
团队协作：提供标准化的开发模式
包体积优化：显著减少重复代码

通过合理的代码复用，不仅能减小包体积，还能提升开发效率和代码质量。建议在项目初期就规划好复用策略，建立代码规范。

到此这篇关于微信小程序代码复用技巧总结的文章就介绍到这了,更多相关微信小程序代码复用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现浏览上传文件的代码
本文通过实例代码给大家介绍了基于js实现浏览上传文件的代码，非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友参考下吧
2017-08-08
JS面向对象编程基础篇（二）封装操作实例详解
这篇文章主要介绍了JS面向对象编程封装操作,结合实例形式详细分析了JS面向对象封装操作的相关概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
2020-03-03
javascript 浏览器类型和版本号检测代码(兼容多浏览器)
果对javascript了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法，以飨观众!
2010-04-04
微信小程序template模版的使用方法
这篇文章主要给大家介绍了关于微信小程序template模版的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
JavaScript实现一个输入框组件
这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
JsRender for object语法简介
这篇文章主要介绍了JsRender for object语法,以实例形式讲述了for Object的用法,需要的朋友可以参考下
2014-10-10
小程序实现事件绑定的方法步骤
本文主要介绍了小程序实现事件绑定的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
es6和commonJs的区别解析
这篇文章主要介绍了es6和commonJs的区别,ES6的模块化规范更加先进、灵活，能够适应更多的应用场景，而CommonJS则更加简单、易用，广泛应用于Node.js开发中，在实际应用中，可以根据具体情况选择使用不同的模块化方案，需要的朋友可以参考下
2023-03-03
JS逆向之加密参数定位
越来越多的网站进行数据传输时不使用明文传输,本文主要介绍了JS逆向之加密参数定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
浅谈toLowerCase和toLocaleLowerCase的区别
下面小编就为大家带来一篇浅谈toLowerCase和toLocaleLowerCase的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08