uni-app全局函数

前言

在应用开发过程中，为了尽量消除冗余代码我们往往会将一些通用的变量或者函数进行抽象以便进行复用，比如baseurl，通用的工具函数等。接下来就总结下uniapp中实现全局变量和全局函数的方法。

实现

1. 定义变量和函数
2. 在main.js中挂载公用属性和公用函数
3. 页面中使用

优缺点

优点是使用简单，直接将属性或者函数挂载到Vue.prototype，在vue页面中直接通过this.来访问，缺点是只支持vue，不支持nvue。

具体演示代码

1、util.js

//定义全局变量
const baseUrl= 'http://www.baidu.com'


/**
 * 消息弹窗
 * @author yj
 * 
 * @param {String} title: 标题
 * @param {String} icon: toast显示的图标, 可选值: success/error/fail/exception/loading/none
 * @param {Number} duration: 窗口动画持续时间, 单位为ms
 */
const toast = (title, icon = 'none', duration = 2000) => {
  uni.showToast({
    title,
    duration,
    icon
  });
}


/**
 * 保留当前页面，跳转到应用内的某个页面
 * @author yj
 * 
 * @param {String} url: 需要跳转的应用内非 tabBar 的页面的路径
 * @param {String} animationType: 窗口显示的动画效果
 * @param {Number} animationDuration: 窗口动画持续时间，单位为 ms
 */
const goto = (url, animationType = 'pop-in', animationDuration = 300) => {
  uni.navigateTo({
    url,
    animationType,
    animationDuration,
    success: function(res) {},
    fail: function(e) {}
  })
}

/**
 * 关闭当前页面，返回上一页面或多级页面
 * @author yj
 * 
 * @param {String} url: 需要跳转的应用内非 tabBar 的页面的路径
 * @param {String} animationType: 窗口显示的动画效果
 * @param {Number} animationDuration: 窗口动画持续时间，单位为 ms
 */
const goback = (delta = 1, animationType = 'pop-out', animationDuration = 300) => {
  let pages = getCurrentPages();
  if (pages.length < delta) {
    delta = pages.length-1
  }
  if (pages.length == 1) {
    return
  }

  uni.navigateBack({
    delta,
    animationType,
    animationDuration,
    success: function(res) {},
    fail: function(e) {}
  })
}


//注册定义的方法
export const util= {
  baseUrl,
  toast,
  goto,
  goback
}

2、main.js

import {util} from './common/util.js'
Vue.prototype.$util=util;

3、页面中使用

<script>
export default {
  data(){
    return{
      baseurl: this.$util.baseUrl
	}
  },
  onload(){
    this.$util.goto('/pages/index/index') // 页面跳转
    this.$util.goback(2) // 页面返回 2 层
    this.$util.goback() // 页面返回 1 层
    this.$util.toast('已修改'，'success') // 消息弹窗
    this.$util.toast('加载失败') // 消息弹窗
  }
}
</script>