uniapp写公共方法的地方

1. 前言

在uniapp的开发过程中，我们往往会用到一些公共的方法，比如操作缓存、时间格式化等等。这些方法的重用可以提高开发效率和代码的可维护性。本文将介绍uniapp中写公共方法的地方，并且以实际的例子来演示如何编写公共方法。

2. uniapp写公共方法的地方

2.1 放在组件中

我们可以将公共方法封装在组件中。这样，在不同页面中使用这个组件时，就可以直接调用这个组件里面的方法。例如，我们创建一个包含时间格式化方法的组件：

// 时间格式化方法
function formatDate(time, format) {
  // code...
}
export default {
  methods: {
    formatDate: formatDate
  }
}

然后，我们在需要使用这个方法的页面中引入这个组件，即可调用里面的方法：

<template>
  <my-component />
</template>
<script>
import MyComponent from '@/components/MyComponent'
export default {
  components: {
    MyComponent
  },
  mounted() {
    const now = new Date()
    const formattedTime = this.$refs.myComponent.formatDate(now, 'yyyy-MM-dd hh:mm:ss')
    console.log(formattedTime)
  }
}
</script>

注意：在上述代码中，我们通过this.$refs来访问组件中的方法。

2.2 放在mixins中

可以将公共方法封装在mixins中。将多个组件需要的公共函数，放在mixins里可以让多个组件共用。

示例代码如下：

// mixin.js
// 时间格式化方法
function formatDate(time, format) {
  // code...
}
export default {
  methods: {
    formatDate: formatDate
  }
}

组件中引入mixins：

import mixin from '@/mixins/mixins'
export default {
  mixins: [mixin],
  mounted() {
    const now = new Date()
    const formattedTime = this.formatDate(now, 'yyyy-MM-dd hh:mm:ss')
    console.log(formattedTime)
  }
}

2.3 放在store中

将公共方法封装在store中。在vue中，组件之间的通讯是通过props、$emit等等来实现的，但是对于非父子关系的组件之间的通讯，这种方式就不太适用了。这个时候，就需要用到vuex。

例如，我们创建一个包含用户信息管理方法的store：

// user.js
const state = {
  userInfo: null
}
const mutations = {
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  }
}
const actions = {
  // code...
}
// 用户信息管理方法
const user = {
  getters: {
    getUserInfo: state => state.userInfo,
  },
  mutations,
  actions
}
export default user

将store引入到vue项目中：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  }
})
export default store

在组件中使用store中的方法：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  mounted() {
    console.log(this.userInfo)
  }
}

3. 编写公共方法的示例

3.1 操作缓存

在uniapp中，我们可以使用uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync等方法来操作缓存。但是这些方法在不同项目中会有重复的代码，可以将其封装成公共方法。下面，我们演示如何封装操作缓存的公共方法。

在/utils/storage.js中创建如下的公共方法：

const setStorage = (key, value) => {
  //... code
}
const getStorage = (key) => {
  //... code
}
const removeStorage = (key) => {
  //... code
}
export {
  setStorage,
  getStorage,
  removeStorage
}

在/mixins/mixins.js中引入storage.js中的方法：

import { setStorage, getStorage, removeStorage } from '@/utils/storage'
export default {
  methods: {
    setStorage: setStorage,
    getStorage: getStorage,
    removeStorage: removeStorage
  }
}

在需要使用操作缓存的页面中引入mixins即可使用：

import mixin from '@/mixins/mixins'
export default {
  mixins: [mixin],
  mounted() {
    this.setStorage('key', 'value') // 存储key/value到缓存中
    const value = this.getStorage('key') // 从缓存中取出key对应的value
    console.log(value) // => 'value'
    this.removeStorage('key') // 从缓存中移除key对应的缓存数据
  }
}

3.2 时间格式化

在uniapp中，时间格式化方法可以通过moment.js、day.js等第三方库来实现。但是我们在开发小程序的时候，为了减少小程序包的大小，不推荐使用第三方库。下面我们演示如何编写时间格式化公共方法。

在/utils/date.js中创建如下的公共方法：

const formatDate = (time, format) => {
  //... code
}
export {
  formatDate
}

在/mixins/mixins.js中引入time.js中的方法：

import { formatDate } from '@/utils/date'
export default {
  methods: {
    formatDate: formatDate
  }
}

在需要使用时间格式化的页面中引入mixins即可使用：

import mixin from '@/mixins/mixins'
export default {
  mixins: [mixin],
  mounted() {
    const now = new Date()
    const formattedTime = this.formatDate(now, 'yyyy-MM-dd hh:mm:ss')
    console.log(formattedTime)
  }
}

4. 总结

将公共方法封装在组件、mixins、store中都是可行的。但是在实际开发中，根据具体情况，可能需要结合使用不同的方式来实现公共方法。

以上是编写uniapp公共方法的地方以及对公共方法进行了实际演示的总结，希望能够对uniapp开发中的公共方法的编写有所帮助。