常用工具封装与全局挂载

背景介绍

我们可以将一些常用的功能以对象形式封装为一个 js 文件，然后在 main.js 中利用 uni.工具对象的方式进行全局挂载。这样我们就可以在每个页面内放本地使用自己封装的工具。

实现步骤

1. 封装自己的工具

如 : 项目根目录下创建 /tools/ 文件夹并在此文件夹下创建 myTools.js，

示例代码 :

module.exports = {
	// 如 : 基于 uni-app uni.showToast api 封装一个 msg 方法
	msg : function(msg){
		uni.showToast({title:msg, icon:"none"});
	},
	// 如 : 基于 uni-app uni.showLoading api 封装一个 showLoading 方法
	showLoading : function (title) {
		uni.showLoading({  title:title , mask:true });
	}
}

2. 在 main.js 中全局挂载工具包

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

import myTool from './tools/myTool.js';
uni.myTool = myTool;

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

3. 在页面中直接使用封装的工具

<template>
	<view></view>
</template>
<script>
export default{
	onLoad:function(){
		uni.myTool.msg('hi...');
	}
}
</script>
<style>
</style>

是不是非常简单并好用呢~ 注意全局挂载基于 uni 对象，不要过大封装或者封装一些影响 uni 性能的代码。