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

需求: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>
相关推荐
小毛驴85010 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce3 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
996幸存者3 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
JSON_L4 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊4 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选4 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
ᥬ 小月亮5 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
xptwop5 小时前
05-ES6
前端·javascript·es6