zoukankan      html  css  js  c++  java
  • uni-app全局属性和方法

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

    实现方式大致分为:

    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

  • 相关阅读:
    《Java技术》第四次作业
    Java第三次作业——面向对象基础(封装)
    《Java技术》第二次作业
    #《Java技术》第一次作业
    Java第十次作业
    Java第九次作业
    Java第八次作业
    Java第七次作业
    Java第6次作业
    Java第五次作业
  • 原文地址:https://www.cnblogs.com/nanyang520/p/12066479.html
Copyright © 2011-2022 走看看