企业项目实训（三）在uniapp中进行的封装操作

在小组项目中，往往会出现一些重复性的代码、组件或者操作，这时我们便会想，能不能将这些代码、组件或者操作变成一个随时都可以调用的类似别人开发好的API一样的东西呢？
于是，就容易联想到“封装”，而我在小组项目中进行了如下几点封装操作，这些操作让我在需要用到这些代码、组件或者操作的时候，可以随心所欲地调取使用。

1、对网络请求进行封装

由于小组项目是采用前后端分离的模式进行开发，前端需要通过网络请求去请求后端接口并得到相关数据从而才能渲染到前端页面，所以我封装了两个不同作用的网络请求方法。

如下，该myRequest方法用于在用户还没登录进入主页面时向后端发起网络请求。

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: getApp().globalData.BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) => {
				resolve(res)
			},
			fail: () => {
				reject(res)
			}
		})
	})
}

不难看出，我并没有使用前端开发常用的网络请求框架（如axios、ajax），而是使用uniapp框架自带的uni.request方法，那是因为uniapp框架自带的API经过优化和测试，通常比第三方插件更高效、更稳定。

至于BASE_URL为什么没有在上图中提到，是因为我将其挂载到了App.vue文件，以便不用全局调用。

<script>
	export default {
		//全局变量
		globalData: {
			BASE_URL: 'xxxxxxxxx',
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

如下，该myRequestToken方法用于在用户登录成功进入主页面时向后端发起网络请求。

//携带token
export const myRequestToken = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: getApp().globalData.BASE_URL + options.url,
			method: options.method || 'GET',
			header: {
				Authorization: uni.getStorageSync('token')
			},
			data: options.data || {},
			success: (res) => {
				resolve(res)
			},
			fail: () => {
				reject(res)
			}
		})
	})
}

与myRequest方法不同的是新增了header方法头，在header中添加了token，因为在小组项目中需要使用token去进行鉴权等操作。
至于token的具体操作，可参考其他作者文章：什么是token？token是用来干嘛的？

2、对页面跳转进行封装

因为小组项目是采用前后端分离模式进行开发，所以页面跳转的实现就交给了前端来完成，uniapp框架也对其进行了api的开发，但每次都要调用、填url，总是很麻烦，于是便也进行了封装。

export default {
  // 关闭所有页面，打开到应用内的某个页面
  reLaunch(url) {
    return uni.reLaunch({
      url: url
    })
  },
  // 跳转到tabBar页面，并关闭其他所有非tabBar页面
  switchTab(url) {
    return uni.switchTab({
      url: url
    })
  },
  // 关闭当前页面，跳转到应用内的某个页面
  redirectTo(url) {
    return uni.redirectTo({
      url: url
    })
  },
  // 保留当前页面，跳转到应用内的某个页面
  navigateTo(url) {
    return uni.navigateTo({
      url: url
    })
  },
  // 关闭当前页面，返回上一页面或多级页面
  navigateBack() {
    return uni.navigateBack()
  }
}

3、对提示信息进行封装

在用户使用系统时，难免需要一些友好的提示弹窗对自己进行提醒，于是在开发过程中，也应该在用户体验这一方面下功夫，于是，对提示弹窗、错误信息等进行了封装。

export default {
  // 消息提示
  msg(content) {
    uni.showToast({
      title: content,
      icon: 'none'
    })
  },
  // 错误消息
  msgError(content) {
    uni.showToast({
      title: content,
      icon: 'error',
    })
  },
  // 成功消息
  msgSuccess(content) {
    uni.showToast({
      title: content,
      icon: 'success'
    })
  },
  // 隐藏消息
  hideMsg(content) {
    uni.hideToast()
  },
  // 弹出提示
  alert(content) {
    uni.showModal({
      title: '提示',
      content: content,
      showCancel: false
    })
  },
  // 确认窗体
  confirm(content) {
    return new Promise((resolve, reject) => {
      uni.showModal({
        title: '系统提示',
        content: content,
        cancelText: '取消',
        confirmText: '确定',
        success: function(res) {
          if (res.confirm) {
            resolve(res.confirm)
          }
        }
      })
    })
  },
  // 打开遮罩层
  loading(content) {
    uni.showLoading({
      title: content,
      icon: 'none'
    })
  },
  // 关闭遮罩层
  closeLoading() {
    uni.hideLoading()
  }
}

对了，以上三点的封装操作可各自编写在一个JS文件中，并将其注册到一个index.js当中。

import {myRequest} from './api'
import {myRequestToken} from './api'
import tab from './tab'
import modal from './modal'
import storage from './storage'

export default {
	install(Vue) {
		// 网络请求
		Vue.prototype.$myRequest = myRequest
		// 网络请求（携带token）
		Vue.prototype.$myRequestToken = myRequestToken
		// 页签操作
		Vue.prototype.$tab = tab
		// 模态框对象
		Vue.prototype.$modal = modal
		// 本地缓存
		Vue.prototype.$storage = storage
	}
}

最后再将三个JS文件以及index.js文件所在的文件夹挂载到main.js，并使用。

import Vue from 'vue'
import App from './App'
import utils from './utils'
Vue.use(utils)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App
})

app.$mount()

4、对可复用的页面/组件进行封装

在前端开发过程中，如xxx列表、xxx详情等，都是一些重复渲染的页面，对其进行封装可以减少开发人员进行重复性无意义操作的次数，如下为已经进行封装操作的组件。

这些组件可插入任何页面，只需要在需要使用的页面的script代码块的开头导入对应的组件文件，如MyCourseList.vue。

import myCourse_list from '../../components/MyCourseList.vue'

然后在script代码块的components中声明该组件，便可在template代码块中使用该组件。

components: {
	"myCourse": myCourse_list
}

<template>
	<view>
		<myCourse :reciveCourseInfo="mycourseInfo"></myCourse>
	<view>
<template>

最后，想再说一下封装操作的好处

• 可提高代码的安全性
  封装可以将数据和功能封装在类或对象内部，减少外部代码对数据的直接访问，保护数据不被意外修改或破坏。
• 可降低代码的耦合度
  封装可以将模块或对象的实现细节隐藏在内部，降低对象或模块之间的耦合度，使得系统更易于维护、升级和扩展。
• 可提高代码的复用性
  封装可以将公共代码封装在一起，从而提高它们的可重用性。这样可以避免代码重复而导致的资源浪费和代码质量问题。
• 可降低代码的复杂度。
  封装可以将代码封装成简单的组件，使得高级别的代码只依赖简单的组件，从而减少程序的复杂度。
• 可加强代码的可维护性
  封装可以将代码组织成逻辑上相对独立的单位，使得修改某个单元的时候，不会影响其他单元的实现。这样可以方便代码的调试、测试和维护。