vue移动端项目经验(三)

登录成功后跳转回上一页而非主页

评论页：
sendComment(){
    axios.get(`${common.commentapi}/comment?aid=${this.aid}`).then(res=>{
        if(res.data.code==200){
            this.$toast({
                message:'收藏成功',
                duration:2000,	
            })
        }else if(res.data.code==401){
            Dialog.confirm({
                message: '登录后才能收藏哦',
                confirmButtonText: "去登录",
                cancelButtonText: "下次吧"
            }).then(()=>{
                this.$router.replace({    //将当前页面路由替换成登录页路由，并将当前页面路由保存在query中为后面跳转回来做准备
                    path:"/user/login",
                    query: {redirect: this.$router.currentRoute.fullPath}
                })
            }).catch(()=>{})
        }
    })
}

登录页：
login(){
    axios.post(`${common.userapi}/login`,params).then(res=>{
        if(res.data.code==200){
            this.$toast({
                message:'登录成功',
                duration:2000,	
            })
            if(this.$route.query.redirect){  //判断若是路由中保存了上一页的路由信息，则执行以下代码跳转回上一页。这里注意route与router的区别使用
                this.$router.replace({path:decodeURIComponent(this.$route.query.redirect)})  //这里为什么用replace不用push？因为直接替换路由不会产生新的history记录。以防止产生新的history记录导致相关页面的router.go(-1)出现问题
            }else{
                this.$router.push('/')  //否则则跳往首页
            }
        }
    })
}

数据轮询，使用定时器每过60秒请求一次数据

data(){
    return{
        setTimeGet:null  //轮询定时器
    }
},
created(){
    this.getData()   //初始化页面时执行函数(不设的话，则初始时不执行定时器，在60000ms后开始执行)
},
beforeDestroy() {   //关闭页面之前清除定时器
    clearInterval(this.setTimeGet)  
},
//若该页面使用了keepAlive缓存，则beforeDestroy生命周期不可用，改为deactivated生命周期
//deactivated(){
//    clearInterval(this.setTimeGet)  
//},
methods:{
    getData(){
        axios.get(`${common.demoapi}/getdemo?id=${this.rid}`).then(res=>{  //初始化页面时请求一次
            if(res.data.code==200){
                ......
            }
        })
        this.setTimeGet=setInterval(()=>{   //设置定时器，继第一次请求之后，每60秒轮询一次
            axios.get(`${common.demoapi}/getdemo?id=${this.rid}`).then(res=>{
                if(res.data.code==200){
                    ......
                }
            })
        },60000)
    },  
}

获取验证码

getVerifyCode(){
    this.verifyImg=`${common.base}/getVerification?t=${Math.random()}`
}

router路由在新窗口打开页面

goIndex(){
    let goIndex=this.$router.resolve({name:'Index'})   //这里要用resolve方式。 push,go方式无效
    window.open(goIndex.href,'_blank')
}

银行卡号每四位空格显示

银行卡号正则：
if(/^([1-9]{1})(d{11}|d{15}|d{16}|d{17}|d{18})$/.test(this.cardId)==false){
    this.$toast('请检查您的银行卡号是否正确')
    return
}
使用slice或substr或substring分割达到每4位一个空格效果:
<div class="cardId"><span>银行卡号：</span><span>{{`${item.bankcardid.slice(0,4)} ${item.bankcardid.slice(4,8)} ${item.bankcardid.slice(8,12)} ${item.bankcardid.slice(12,16)} ${item.bankcardid.slice(16,20)}`}}</span></div>

substr,substring,slice的区别

https://blog.csdn.net/qq_38047742/article/details/82144266

axios设置请求头

zfbpay(){
    let config={   //配置请求头
        headers:{
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
    }
    let params=new URLSearchParams()
    params.append('money',this.moneyAmount)
    params.append('ispc',2)
    this.$axios.post(`${common.orderApi}/amstc/userRechargeAccountByAliPay`,params,config).then(res=>{
        if(res.data.code==200){
            let divbody=document.createElement('div')
            divbody.innerHTML=res.data.data
            document.body.appendChild(divbody)
            document.forms[0].submit()
        }
    }).catch(err=>{})
},

判断是否是微信

isWechat() {
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.iswx = true
    } else {
        this.iswx = false;
    }
}

判断是否是ios

iosCheck(){
    let u = navigator.userAgent;
    if (!!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.isIos=true
    }else{
        this.isIos=false
    }
},

移动端下载文件功能

注：移动端下载文件功能在微信内置浏览器中不可用，需要先判断网页是否在微信中打开，判断方法如上
download(url){
    window.location.href=url
}

全局部署404(在router/index.js添加)

import NotFound from '@/pages/notFound/notFound'   //404

export default new Router({
    mode: 'history',  //去掉url中的#
    routes: [
        {
            path: '/',
            name: 'Index',
            component: Index,
            meta:{title:'首页'}
        },
        。。。
        {                     //在路由最末尾部署，记住要在最末尾
            path:'/notFound',
            name:'NotFound',
            component:NotFound,
            meta:{
                title:'页面不存在'
            }
        },
        {
            path:'*',
            redirect:'/notFound',
        }
    ]

vue获取上一页路由和当前页路由

beforeRouteEnter(to, from, next) {
    next(()=>{          
        console.log(from)   //上一页路由信息
        console.log(to)   //当前页路由信息
    })
},

input框ios端去除输入法首字母大写状态

<input type="text" autocapitalize="off" autocorrect="off" />

微信分享后返回上一页(有上一页则返回上一页，没有则返回首页)

goBack(){
    if(window.history.length==1){
        this.$router.push('/')
    }else{
        this.$router.go(-1)
    }
},