vue移动端H5调起手机发送短信（兼容ios和android）

最新推荐文章于 2025-03-16 19:33:53 发布

原创最新推荐文章于 2025-03-16 19:33:53 发布

· 2.5k 阅读

8 ·

版权

文章标签：

#vue.js #智能手机 #前端 #uni-app

前端同时被 3 个专栏收录

86 篇文章

订阅专栏

25 篇文章

订阅专栏

uniapp

18 篇文章

订阅专栏

文章讲述了在移动端H6页面中如何实现调用手机的发送短信功能，介绍了iOS和Android平台下不同的URL格式：iOS使用`sms:`后接地址和body，Android则为`sms:`地址?body。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端h5页面调起手机发送短信功能，ios和android的兼容写法不一样。

android

window.location.href = `sms:10086?body=${encodeURIComponent('Hello, 测试短信发送')}`

ios

window.location.href = `sms:10086&body=${encodeURIComponent('Hello, 测试短信发送')}`

//或者

window.location.href =`sms:/open?addresses=10086&body=${encodeURIComponent('Hello, 测试短信发送')}`;

<template>
   <view @click="openNewSmsPage"></view>
</template>

<script lang="ts" setup>
//点击唤起短信发送
const openNewSmsPage = () => {
  const phoneNumber = '10086' // 目标手机号码
  const message = 'Hello, 测试短信发送' // 短信内容
  let smsLink = ''
  const u = navigator.userAgent,
    isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
    isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    // window.location.href = 'sms:10086&body=' + msg
    smsLink = `sms:${phoneNumber}&body=${encodeURIComponent(message)}`
    //或者
    smsLink = `sms:/open?addresses=${phoneNumber}&body=${encodeURIComponent(message)}`;
  } else {
    // sms:后面跟收件人的手机号,body后接短信内容
    smsLink = `sms:${phoneNumber}?body=${encodeURIComponent(message)}`
  }
  window.location.href = smsLink
}
</script>