uniapp 挂载全局方法

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，所以语法方面跟Vue及其类似，本文章主要介绍关于在uniapp中如何使用全局方法。

需求

如果你想要自定义一个方法，并且希望该方法在项目的各个页面都可以直接使用，那么可以将其作为一个全局方法挂载到项目上

实现

简单的实现

（1）在main.js里面直接写你的全局方法，然后挂载到Vue去，如下

//挂载全局方法
Vue.prototype.$test = function(value){
  console.log(value)
}

（2）然后在代码里面可以直接这样使用

this.$test("全局方法挂载")

PS：这个 Vue.prototype.$test，带个“$”，不是必须的，只是为了跟普通方法做个区分，说明这是全局方法。

评价：这个实现方法虽然简单明了，但是直接写在main.js文件里面，如果每个全局方法都这么做的话，全局方法一多，不好扩展也不好管理，如果你的项目是体量较大的话不建议这么做。

稍微复杂的实现

（1） 新建一个文件 validate.js，在该文件里面写好你的全局方法，如果你有若干个全局方法，可以这样写，如下：

/**
 * validate.js，全局校验方法，不够可以补充
 */
export default {
        //数字校验
	isNumber: function(val) {  
		return true
	},
        //电话校验
	isPhone: function(val) {
		return true
	},
        //邮件校验
	isEmail: function(val) {
		return true
	}
}

（2）在main.js里面引入你的全局方法

import validate from 'validate.js'

// 挂载到全局
Vue.prototype.$validate = validate

（3）测试使用

this.$validate.isNumber(val)
this.$validate.isPhone(val)
this.$validate.isEmail(val)

评价：这个实现方法对比上个的直接实现，又委婉了下，将全局方法放到一个统一文件里，利于维护也利于管理，如果你在开发过程不赶时间的话，推荐这样做。

后记

• 黑猫白猫，能抓到老鼠就是好猫
• 开发一时爽，维护火葬场