uniapp小程序 bug整理

原创已于 2025-05-30 09:49:25 修改 · 2.2k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2023-12-07 13:21:11 首次发布

本文介绍了uni-app中如何使用$on,$off和$once处理自定义事件，如页面跳转和参数传递。还讨论了textarea的输入限制、键盘遮挡问题、条件编译以及小程序分享传参和底部滑动阻止的方法。

1.返回上一页面并携带参数

uni.$on(eventName, callback)监听自定义事件。事件可以由 uni.$emit 触发。回调函数会接收 uni.$emit 传递的参数。

uni.$off(eventName, callback)移除自定义事件监听器。如果没有指定事件名，则移除所有事件监听器。如果提供事件名，则移除该事件的所有监听器。如果提供了事件名和回调，则只移除这个回调的监听器。

uni.$once(eventName, callback)监听一个自定义事件。事件只触发一次，在第一次触发之后移除事件监听器。

参考网址：uni.$on(eventName, callback) @$on | uni-app官网

方法1：通过事件监听

//详情页
<template>
    <view @back="back">点击按钮返回上一页</view>
</template>
<script>
    export default {
        methods: {
            back(){
                uni.$emit('getData', '666')
                uni.navigateBack({
					delta: 1
				});
            }
        },
        //不点击按钮返回上一页，二者存在一个即可
        onUnload: function() {
			uni.$emit('getData', '666')
		}
    }
</script>

//列表页接收详情页参数
<script>
    export default {
        onShow() {
			uni.$on('getData', function(data) {
				console.log('----------', data);
			})
		},
    }
</script>

方法2：通过getCurrentPages

//页面1
<view @click="toPage">跳页</view>
<view @click="getParams">获取前一页参数</view>

const toPage = () => {
    uni.navigateTo({
        url:'/pages/form'
    })
}
	
function getParams(e){
    const pages = getCurrentPages()
    console.log(pages[0].address);
}


//页面2
<view @click="toBack">返回</view>

function toBack() {
    const pages = getCurrentPages()
    var prePage = pages[pages.length - 2];
    prePage.address = {
        name: "长春市",
        id: 1
    };
    uni.navigateBack({
        delta: 1
    })
}

2.textarea最大长度限制真机bug

<template>
    <view class="textarea-box">
        <textarea :cursorSpacing="70" class="uni-dialog-input" v-model="val" type="text" @input="input" placeholder-style="color:#BFBFBF;" placeholder="请输入" />
        <view class="maxlength">
            <text class="min" :class="maxLength==textLength?'red':''">{{textLength}}</text>
            <text class="max">/{{maxLength}}</text>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			val: "",
            //实际输入长度
			textLength: 0,
            //限制最大长度
            maxLength:30
		}
	},
    methods:{
        input(e) {
			setTimeout(() => {
				this.val = e.detail.value.substring(0, this.maxLength)
				this.textLength= this.val.length
			}, 1)
		}
    }
}
</script>

3.解决真机输入框被键盘谈起遮住一部分的问题

添加cursorSpacing属性，调整相应值即可

<input :cursorSpacing="70" v-model="val" placeholder="请输入" />

4.解决输入框在小程序赋值不双向绑定的问题

添加setTimeout即可

5.条件编译处理多端差异

写法： 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

如下代码不会在 H5 平台上出现

// #ifndef H5
	this.isNvue = true
// #endif

如下代码会在 H5 平台上出现

// #ifdef H5
	this.isNvue = true
// #endif

如下代码会在 App 和 H5 平台上出现

// #ifdef APP-NVUE || H5
	this.isNvue = true
// #endif

具体参考网址：跨端兼容 | uni-app官网

6.弹出层禁止底部页面滑动

在弹出层标签上添加@touchmove.stop.prevent和@mousewheel.prevent事件即可

7.小程序分享到聊天传参，首次从分享进入接不到参数

//商品详情页面分享
onShareAppMessage: function(e) {
	return{
        path: '/pages/goods?id=1',
		title: title,
		imageUrl: imageUrl
    }
},
//商品详情页面接收分享参数id
onLoad(options){
    //options为undefined说明是分享
    if(options){
        console.log(options.id)
    }else{
        //获取到参数
        console.log(uni.getStorageSync('invite-id'))
    }
}


//App.vue
onLaunch: function(options) {
    console.log(options);
    if (options && options.scene) {
        uni.setStorageSync('invite-id', options.query.id)
    }
}

常见scene值说明

1001：发现栏小程序主入口，“最近使用”列表（基础库2.2.4版本起将包含“我的小程序”列表）
1005：顶部搜索框的搜索结果页
1006：发现栏小程序主入口搜索框的搜索结果页
1007：单人聊天会话中的小程序消息卡片
1008：群聊会话中的小程序消息卡片
1011：扫描二维码