uniapp H5打电话和发短信功能

拨打电话

makePhoneCall(mobile) {
    uni.makePhoneCall({
        phoneNumber: mobile 
    });
}

this.makePhoneCall('178xxxxxxxxx')

发短信

1. 使用Messaging模块，在manifest.json中的App模块配置勾选Messaging(短彩邮件消息)

2、代码如下：

sendSms() {
    let phone = '131xxxxxxxx'  // 手机号(可以是单个或则多个)
    let body = '测试' // 短信发送的内容
    
    // #ifdef H5
        //获取设备类型
        let platform = uni.getSystemInfoSync().platform
        window.location.href = platform === 'ios' ? `sms:/open?addresses=${phone}&body=${body}`: `sms:${phone}?body=${body}` 
    // #endif
    
    // #ifdef APP-PLUS
        let message = plus.messaging.createMessage(plus.messaging.TYPE_SMS)
        message.to = [phone] //这里数组中需要是字符串,否则ios会出现空白bug
        message.body = body
        plus.messaging.sendMessage(message)
    // #endif
}

组件：

<view class="service flex-align" :class="open?'active':'end'">
    <view class="flex-align" @click="statusChange">
        <image class="arrow" src="箭头" mode="heightFix"></image>
        <view class="title" v-if="!open">联系客服</view>
    </view>
    <view class="detail flex-align">
        <view class="item" @click="makePhoneCall(mobile)">
            <image class="img" src="图片" mode="widthFix"></image>
            <view class="text">拨打电话</view>
        </view>
        <view class="item" @click="sendSms(mobile)">
            <image class="img" :src="图片" mode="widthFix"></image>
            <view class="text">发送短信</view>
        </view>
    </view>
</view>

.active.service {
    right: 0;
    transition-duration: 0.5s;

    .detail {
        opacity: 1;
        transition-duration: 0.5s;
    }

    /* #ifdef H5 */
    @media (min-width: 768px) {
        width: 440rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateX(90rpx);
    }
    /* #endif */
}

.end.service {
    right: -400rpx;
    transition-duration: 0.5s;

    .detail {
        opacity: 0;
        transition-duration: 0.1s;
    }

    /* #ifdef H5 */
    @media (min-width: 768px) {
        width: 100rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateX(250rpx);
    }
    /* #endif */
}

.service {
    position: fixed;
    right: -340rpx;
    bottom: 310rpx;
    background: rgba(255, 255, 255, 0.1);
    z-index: 99999;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
    padding: 20rpx 40rpx 20rpx 20rpx;

    .title {
        color: #fff;
        font-size: 26rpx;
        writing-mode: vertical-rl;
        letter-spacing: 10rpx;
        word-spacing: 5rpx;
        margin-left: 10rpx;
    }

    .arrow {
        height: 17rpx;
    }

    .item {
        text-align: center;
        margin-left: 60rpx;

        &:last-child {
            margin-left: 100rpx;
        }

        .img {
            width: 92rpx;
        }

        .text {
            color: $base-color;
            font-size: 26rpx;
            margin-top: 15rpx;
            white-space: nowrap;
        }
    }
}

效果图：

参考链接：blog.csdn.net/qq_39062457…