uniapp小程序 bug整理-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序 bug整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

//详情页
<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.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：扫描二维码文章来源地址https://www.toymoban.com/news/detail-806441.html

到了这里，关于uniapp小程序 bug整理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！