uni-app botton open-type="contact" 报Bug

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app botton open-type=“contact” 报Bug

开发环境 版本号 项目创建方式
Windows 23H2 HBuilderX

产品分类：uniapp/小程序/微信

示例代码：

示例代码：

<template>
<view class="center">  
    <view class="function">  
        <text class="title">常用功能</text>  
        <view class="functionBox">  
             <button open-type="contact" class="service">  
                 <uni-icons font-family="Service" class="family" :size="19" color="#f11">&#xe60c;</uni-icons>  
                 <text class="serviceText">平台客服</text>  
             </button>  

            <view class="service" [@click](/user/click)="address()">  
                <uni-icons type="location" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">我的地址</text>  
            </view>  

            <navigator url="/pages/my/myScore" class="service">  
                <uni-icons type="star" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">我的评价</text>  
            </navigator>  

            <navigator url="/pages/my/Chat" class="service">  
                <uni-icons type="chat" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">消息中心</text>  
            </navigator>  
        </view>  
    </view>  

    <view class="other_function">  
        <text class="title">其他功能</text>  
        <view class="functionBox">  
            <button open-type="contact" class="service">  
                <uni-icons type="shop" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">邀请朋友</text>  
            </button>  

            <button open-type="contact" class="service">  
                <uni-icons type="shop" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">成为摊主</text>  
            </button>  

            <button open-type="contact" class="service">  
                <uni-icons font-family="Comperate" :size="24" color="#f44">&#xe601;</uni-icons>  
                <text class="serviceText">商务合作</text>  
            </button>  

            <navigator url="/pages/my/Feedback" class="service">  
                <uni-icons type="compose" size="24" color="#f44"></uni-icons>  
                <text class="serviceText">意见反馈</text>  
            </navigator>  
        </view>  
    </view>  
</view>  
</template>  

<script setup>
function address(){  
    uni.navigateTo({  
        url:'/pages/my/addressPage/addressPage'  
    })  
}
</script>  

<style scoped lang="scss">
@font-face {
font-family: Service;
src: url('/static/Service.ttf') format('truetype');
}
@font-face {
font-family: Comperate;
src: url('/static/comperate.ttf') format('truetype');
}
.center{
.function,.other_function{
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #fff;
border-radius: 30rpx;
margin: 20rpx;
.title{
padding-left: 30rpx;
padding-top: 20rpx;
font-size: 28rpx;
}
.functionBox{
margin: 20rpx;
padding-bottom: 10rpx;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 30rpx;
.service{
all: unset; /* 重置所有样式 */
display: inline-flex; /* 重新设置显示属性 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.family{
padding: 5rpx;
}
.serviceText{
font-size: 22rpx;
}
}
}
}
.other_function{
margin-top: 40rpx;
}
}
</style>

操作步骤：

操作步骤：

尝试在botton外面添加view 没有用


预期结果：


## 预期结果：
无

实际结果：

实际结果：

找不到更好的办法！求助


bug描述：


## bug描述：
不管我点击什么功能他就跳转小程序客服 我的[@click](/user/click)不能用了，navigator也不能用点了就跳转小程序客服

Harmonyos Next教程
1 回复

针对你提到的 uni-app 中 button 组件的 open-type="contact" 报 Bug 的问题，通常这个属性是用于在微信小程序中直接打开客服会话。如果在其他平台（如 H5、App 等）使用这个属性，可能会因为平台不支持而导致错误。下面是一些可能的解决思路和代码示例，帮助你排查和解决问题。

1. 确认平台支持性

首先，确保你是在微信小程序环境下使用 open-type="contact"。如果你在其他平台（如 H5、App 端）遇到这个属性不起作用或报错，可以考虑使用条件编译来区分不同平台的实现。

<!-- #ifdef MP-WEIXIN -->
<button open-type="contact">联系客服</button>
<!-- #endif -->

<!-- #ifndef MP-WEIXIN -->
<button @click="handleContact">联系客服（非微信）</button>
<!-- #endif -->

2. 检查微信小程序的配置

确保你的微信小程序已经在微信公众平台上配置了客服功能，并且客服账号是有效的。

3. 错误处理

如果微信小程序中仍然报错，可以尝试捕获错误并给出用户友好的提示。由于 uni-app 没有直接提供错误捕获的 API 对于 button 的 open-type，你可以通过微信小程序的 onError 生命周期函数来捕获全局错误。

// 在 pages.json 或 main.js 中配置全局错误处理
App({
    onError(msg) {
        console.error('全局错误：', msg);
        // 可以根据错误信息进行特定的处理，比如显示Toast
        wx.showToast({
            title: '功能不可用，请稍后再试',
            icon: 'none'
        });
    }
});

4. 替代方案

对于非微信小程序平台，你可以实现一个自定义的客服功能，比如跳转到一个客服页面或者打开一个客服的联系方式（如电话、邮箱）。

methods: {
    handleContact() {
        // 跳转到客服页面或显示联系方式
        uni.navigateTo({
            url: '/pages/customerService/customerService'
        });
        // 或者直接提示联系方式
        uni.showModal({
            title: '客服联系方式',
            content: '客服电话：xxx-xxxx-xxxx\n客服邮箱：example@example.com',
            showCancel: false
        });
    }
}

总结

通过上述步骤，你应该能够定位并解决 uni-app 中 button 组件 open-type="contact" 报错的问题。如果问题依旧存在，建议查看 uni-app 和微信小程序的官方文档，或者在开发者社区寻求帮助。

回到顶部