vue3 + uniapp实现点击拨打电话、点击复制、点击导航的方法

小明在码鱼2025-03-03 0:35

需求：vue3 + uniapp实现点击拨打电话、点击复制、点击导航的功能

1、uniapp实现点击拨打电话，使用 uni.makePhoneCall() API方法

js 复制代码

<view @click="callPhone(key.value)">
      <text>联系电话：{{ key.value }}}</text>
       <uni-icons type="phone" size="18"></uni-icons>
</view>

<script setup>
  // 联系电话
const callPhone = (tel) => {
  uni.makePhoneCall({
      phoneNumber: tel,
    })
    .catch((e) => {
      console.log(e); //用catch(e)来捕获错误{makePhoneCall:fail cancel}
    });
};  
</script>

2、uniapp实现点击复制文本，使用 uni.setClipboardData() API方法

js 复制代码

<view @click="copy(key.value)">
   <text>文本：{{ key.value }}</text>
   <uni-icons type="wallet" size="18"></uni-icons>
</view>

<script setup>
 // 复制文本
const copy = (value) => {
  uni.setClipboardData({
    data: value,
    success: function () {
      //调用方法成功
      uni.showToast({
        title: "复制成功",
      });
    },
  });
};  
</script>

3、uniapp实现点击导航，使用 uni.getLocation() API方法

js 复制代码

<view @click="openMap(info.map)">
    {{ info.value }}
  	<uni-icons type="paperplane" size="18"></uni-icons>
</view>

<script setup>
//到店导航，item为经纬度的数组
const openMap = (item) => {
  // 打开地图，并将位置的经纬度传入
  uni.getLocation({
    success: (res) => {
      res.latitude = item[0];
      res.longitude = item[1];
      uni.openLocation({
        latitude: parseFloat(item[0]),
        longitude: parseFloat(item[1]),
        scale: 18,
      });
    },
  });
};
</script>