全局变量和全局方法是软件开发中常用的技术点!

实现方式大致分为:

1、vuex实现,值变动灵活

2、建立js文件,页面内引用

3、挂载vue实例后使用

4、小程序中的globalData

5、本地存储

这里简单讲解下uni-app中挂载到vue实例的全局属性和方法:

在Main.js中创建:

Vue.prototype.$httpUrl = "https://xxx/";

//获取图片路径
Vue.prototype.getImgSrc = function(src){
var imgServer = "/pages/static/image/"
// #ifdef MP
imgServer = "https://xxx/";
// #endif
return imgServer + src ;
} //提示
const tipMsg =(title,icon,time,mask)=>{
title = title == undefined ? "系统繁忙" : title;
icon = icon == undefined ? "none" : icon;
time = time == undefined ? 1500 : time;
mask = mask == undefined ? true : mask;
uni.showToast({
title:title,
icon:icon,
mask:mask,
duration:time
})
} //验证手机号
const checkPhone = phone=>{
if(!(/^1[23456789]\d{9}$/.test(phone))){
uni.showToast({
title:"手机号格式不正确",
icon:'none'
})
return false;
}
return true;
} Vue.prototype.$uniApi={tipMsg,checkPhone};

在index.vue中使用:

onLoad() {
var _self = this;
console.log(_self.$httpUrl);
console.log(_self.getImgSrc("home/bg.png"));
_self.$uniApi.checkPhone("12345678910");
_self.$uniApi.tipMsg("听说你比我帅");
}

uni-app更多全局属性设定参考:https://ask.dcloud.net.cn/article/35021

uni-app全局属性和方法的更多相关文章

  1. JavaScript常用全局属性与方法

    最近,在学习JavaScript,Java作域链包含全局,记录下常用的全局属性与方法,就当是知识的积累,未列出全部,如需查看全部可参考JS相关的API文档. 常用的全局属性:  全局属性      作 ...

  2. javascript js全部的 全局属性 和 方法-window

    window method: open(URL,窗口名称,窗口风格)//打开一个新的窗口,并在窗口中装载指定URL地址的网页 close()//close方法用于自动关闭浏览器窗口 alert(提示字 ...

  3. JavaScript 全局属性/函数

    JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示 ...

  4. JavaScript全局属性/函数

    JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. und ...

  5. 原生JS:全局属性、全局方法详解

    全局属性.全局方法 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5853342.html 首先普及几个我总结的非常实用又很基础的知识:(呵呵,仅 ...

  6. C#中全局作用域的常量、字段、属性、方法的定义与使用

    场景 在开发中,经常会有一些全局作用域的常量.字段.属性.方法等. 需要将这些设置为全局作用域保存且其实例唯一. 注: 博客主页: https://blog.csdn.net/badao_liuman ...

  7. IE下全局对象报 脚本错误提示“对象不支持此属性或方法”解决方案

    原来是IE会把页面中的元素id可以直接当变量名一样使用,但是这个id变量不能被赋值. 例如: <body id='body'> <script type="text/jav ...

  8. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  9. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

随机推荐

  1. cnblog markdown 模式下调整图片大小

    流程 上传图片,获得图片链接,例如 ![](https://img2020.cnblogs.com/blog/2163507/202010/2163507-20201030205035211-7968 ...

  2. burp插件之跨站payload批量注入-xssValidator

    环境搭建 Phantomjs下载 csdn-burp使用xssValidator插件 cnblog-burp插件之xssValidator xssValidator使用 参考链接 cnblog-bur ...

  3. 阿里云的nginx的https配置问题

    server { listen 443 ssl; server_name www.xxx域名.com; root html; index index.html index.html; ssl_cert ...

  4. [转载]Redis 持久化之RDB和AOF

    原文链接:https://www.cnblogs.com/itdragon/p/7906481.html 温馨提示 在正式数据(当然是非生产环境啦)练习以下操作时,一定一定一定记得备份dump.rdb ...

  5. 解析MindMapper选项中的鱼骨选项

    MindMapper思维导图可以画鱼骨图,而且完成的相当漂亮,我们可以在选项设置中定义鱼骨图图的默认样式.下面本文就分析了MindMapper选项中可以更改哪些鱼骨图设置. 我们首先打开MindMap ...

  6. Folx专业版智能速控功能详解

    限速功能指的是,用户可以通过限制最大上传.下载速度来控制任务下载的带宽使用,减少因下载导致其他应用程序出现网络延迟的情况.Folx不仅为用户提供简单的任务限速功能,而且还提供更加智能的速控功能,供用户 ...

  7. 对于final修饰的类型运算时的表现

    我们知道,对于byte,char,这些数据类型加减时都会转化成int在运算,然而,对于final修饰过的数据是不会发生转换的. 比如说 byte b1=1; byte b2=2; byte b3=b1 ...

  8. C语言是如何诞生的?地位怎样?未来发展趋势?

      C语言的历史 C语言的原型是A语言(ALGOL 60语言). 1963年,剑桥大学将ALGOL 60语言发展成为CPL(Combined Programming Language)语言. 1967 ...

  9. A:与指定数字相同的数的个数

    总时间限制:  1000ms 内存限制:  65536kB 描述 输出一个整数序列中与指定数字相同的数的个数. 输入 输入包含三行:第一行为N,表示整数序列的长度(N <= 100):第二行为N ...

  10. LaTeX的字体字号设置

    字体属性: 字体族代码及注释: 显示效果: 字体系列设置及字体形状设置代码及注释: 显示效果: 字体大小及中文字号的设置代码及注释: 显示效果: ctex文档有关中文字号的排版: ctex文档的打开方 ...