uniapp 开发中的的小技能收藏

1.点击事件冒泡穿透问题：

@click.stop与@click.prevent

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

百度一下   //阻止a标签跳转，仅执行函数test4

   //阻止表单提交，仅执行函数test5

         

2.uniapp在页面跳转时，若URL太长的字符串会导致数据传递失败

url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决，如下为encodeURIComponent示例的解决方法。

// 在下一个.vue页面接受参数
onLoad: function (option) {
    let item = JSON.parse(decodeURIComponent(option.item));
}

3. 后面的页面如何回传参数到前一个页面

在main.js中暴露这个方法出来全局使用，然后直接在后面的页面给前一个的属性或者新增一个方法来传值
const prePage = ()=>{
    let pages = getCurrentPages();
    let prePage = pages[pages.length - 2];
    // #ifdef H5
    return prePage;
    // #endif
    return prePage.$vm;
}

A页面跳转到B页面 在B页面中国传递参数data回A页面；

首先在A页面定义方法 acceptDataForBackPage（data）

然后B页面回传参数 this.$prePage.acceptDataForBackPage('carson2440');

4. uniApp解决回调方法执行过快，uni.showToast不显示问题，使用setTimeout可以解决

4.1 success : function(res){
        console.log(res)
        if(res.data.status == 1){
            uni.showToast({
                title:res.data.info,
            })
            setTimeout(function(){
                uni.navigateBack({delta:2})
            },2000)
        }
}
4.2 IOS系统在网络回调方法中调用showToast 不显示，在安卓中正常的解决办法。

封装请求时，hideLoading不要写在complete里

export const get = (url, data, callback) => {
    uni.showLoading({
        title:'加载中'
    })
    uni.request({
        url: url,
        header: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
            'ACCESS-TOKEN':token,//token
        },
        data: data,
        timeout: 10000,
        method: 'GET',
        success: (response) => {
            uni.hideLoading();
            callback(response.data);
        },
        fail: (error) => {
            uni.hideLoading();
            if (error && error.message) {
                uni.showToast({
                    title: error.message,
                    icon:'none',
                    duration: 2000
                });
            }
        },
        complete: () => {
            // uni.hideLoading();
        }
    });
}

5.子父组件传递参数：https://www.cnblogs.com/Alex-Song/p/12156989.html