• uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】


    uniapp---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

    先上效果图:

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    1. 在封装方法的文件夹下新建一个js文件,然后把这些功能进行封装

    // 点击按钮拨打电话
    export function getActionSheet(phone) {
    	uni.showActionSheet({
    		itemList: [phone, '呼叫'],
    		success: function(res) {
    			console.log(res);
    			if (res.tapIndex == 1) {
    				uni.makePhoneCall({
    					phoneNumber: phone,
    					success: (res) => {
    						console.log('调用成功!')
    					},
    				})
    			}
    		}
    	})
    }
    
    // 点击按钮进行地图导航
    export function getMapAPP(lat, lng, address) {
    	const latitude = Number(lat)
    	const longitude = Number(lng)
    	uni.openLocation({
    		latitude: latitude,
    		longitude: longitude,
    		name: address,
    		scale: 12,
    		success() {
    			console.log('打开成功!')
    		}
    	})
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    2.在需要的页面中进行调用

    <u-icon name="phone" :color="color" size="22" @click="showActionSheet(item.tel)">u-icon>
    
    <u--image src="/static/image/frame.png" width="22" height="22" @click="toMapAPP(item.lat,item.lng,item.address+item.address_detail)">u--image>
    
    • 1
    • 2
    • 3
    import {
    		getActionSheet,
    		getMapAPP
    	} from '@/until/actSheet_mapAPP.js';
    methods: {
    	// 点击打电话
    	showActionSheet(phone) {
    		getActionSheet(phone)
    	},
    	//打开第三方地图
    	toMapAPP(lat, lng, address) {
    		getMapAPP(lat, lng, address)
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    注意点:

    1. 拨打电话需要进行app权限配置,设置完成后可以在正式版看到效果。(这几个最好都勾选上)
    在这里插入图片描述

    在这里插入图片描述

    2. 配置高德地图的app模块设置,这里的appkey需要到高德地图网站申请。

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    Python装饰器与面向切面编程
    xxl-job源码解读:触发器Trigger
    Python Whois 信息扫描
    猪齿鱼平台常用前端css实现方案
    基于J2EE的弹幕视频网站设计
    学习常见的反爬虫手段,如验证码、限制访问频率等
    数据结构——排序算法(C语言)
    type_traits元编程库学习
    Flutter 数据存储--shared_preferences使用详情
    分布式系统关注点:“熔断”以及最佳实践方法
  • 原文地址:https://blog.csdn.net/heavenz19/article/details/134224053