uniapp怎么封装公用方法

1. 总览

在uni-app中，我们可以通过封装公用方法来提高代码的复用性和开发效率。封装公用方法意味着将一些常用的功能逻辑封装在一个函数或者对象里，方便在多处地方使用。在本文中，我们将介绍如何封装公用方法并展示一些示例代码。

2. 封装全局函数

对于那些在整个应用程序中都需要使用的函数，我们可以将它们封装为全局函数。在uni-app中，我们可以在main.js文件中定义这些全局函数。下面是一个示例，展示如何封装一个全局函数来显示一个提示框：

// 在main.js文件中
Vue.prototype.$showToast = function(message) {
  uni.showToast({
    title: message,
    icon: 'none'
  });
}

通过以上代码，我们将一个名为`$showToast`的函数添加到Vue的原型链上，使得在整个应用程序中都可以通过`this.$showToast`调用该函数，实现显示提示框的功能。

3. 封装工具类

除了全局函数之外，我们还可以通过封装工具类来提供更多的公用方法。工具类一般是一个包含多个静态方法的对象。下面是一个示例，展示如何封装一个工具类来生成随机字符串：

// utils.js文件
export default {
  getRandomString(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }
}

通过以上代码，我们将一个名为`getRandomString`的方法封装在工具类utils中，使用ES6的export方式导出。在其他文件中，我们可以通过import语句引入该工具类，并在需要时调用`utils.getRandomString()`来生成随机字符串。

4. 封装组件公用方法

如果我们在uni-app中使用自定义组件，有时可能会需要在组件内部封装一些公用方法。下面是一个示例，展示如何封装一个组件公用方法来显示/隐藏一个loading动画：

// MyComponent.vue文件

通过以上代码，我们在MyComponent组件中定义了一个名为`toggleLoading`的方法，在点击按钮时会切换loading动画的显示和隐藏。可以根据实际需求，封装更多组件公用方法，来实现更多功能。

总结

通过封装公用方法，我们可以将常用的功能逻辑进行封装，提高代码的复用性和开发效率。在uni-app中，我们可以封装全局函数、工具类或者组件公用方法来实现这一目标。这样，我们可以在整个应用程序中或者特定的组件内部方便地调用这些封装好的方法，提高代码的可读性和维护性。