vue实现微信扫码拨打电话

首先确定下要做什么~~
1.展示一张二维码
2.用户打开微信扫一扫，扫描这张二维码
3.用户手机上弹出拨打电话窗口
那么根据这几点，就有了几个问题：
1.如何生成二维码
2.用户扫码的时候如何弹出电话窗口

实现思路

首先生成二维码，二维码中存放当前服务器中的html资源地址，当用户扫码的时候，会自动解析该地址（http开头会识别成超链接，然后自动跳转），跳转到html页面后，通过a标签的href="tel:10086"属性来打开电话。

了解了该需求的主要内容和问题所在，那么就开始实现。

vue组件（基于el-popover）

 /**
*@Author: xieLiang
*@CreateDate: 2021/12/14
*@LastModifiedDate: 2021/12/14 11:53
*@Description: 弹出二维码，手机跳转到固定页面，调起打电话
*/
<template><el-popoverplacement="top-start"title="微信扫码，快速拨号"width="250"trigger="hover"popper-class="code-popover"><div><div class="qrcode" ref="qrCodeUrl" ></div></div><div slot="reference" ><slot></slot></div></el-popover>
</template><script>
import QRCode from 'qrcodejs2'export default {name: 'CallPhone',props: {// 电话号码phone:{type:[String,Number],defalut:''}},watch: {phone:{immediate:true,handler(newValue){if (newValue) {this.$nextTick(()=>{this.creatQrCode()})}}}},methods: {// 生成二维码creatQrCode () {/*** 获取当前所在服务器的地址* loaction.protocol: 协议* location.host: 端口号**/let qrcode = new QRCode(this.$refs.qrCodeUrl, {text: `${location.protocol}//${location.host}/lib/callPhone/index.html?phone=${this.phone}`, // 需要转换为二维码的内容width: 150,height: 150,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H})}}
}
</script><style lang="scss" scoped>
.qrcode {display: inline-block;img {width: 132px;height: 132px;background-color: #fff; //设置白色背景色padding: 6px; // 利用padding的特性，挤出白边box-sizing: border-box;}
}</style>
<style>
.el-popover.code-popover {text-align: center;
}
</style>

2.在vue的public下面新建个html文件

用于存放a标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>联系电话</title><style>#call {font-size: 38px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 400px;height: 160px;border: 1px solid #666666;line-height: 160px;text-align: center;text-decoration: none;}</style>
</head>
<body>
<a id="call">点击联系</a>
</body>
<script>
// 解析url上面的query参数
function parseSearchParams(searchParamsString){return searchParamsString.split('&').reduce((searchParams, curKV)=>{const [k, v] = curKV.split('=').map(decodeURIComponent);searchParams[k] = v;return searchParams;}, {});
}
// 解析出query的map实例
const search = parseSearchParams(location.search.substring(1))
// 获取a标签
const a = document.getElementById('call')
// 给a标签的href属性赋值
a.setAttribute('href', `tel:${search.phone}`)
// 自动调用一次
a.click()
</script>
</html>

vue实现微信扫码拨打电话相关推荐

Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
【Vue 调用微信扫码 IOS报错解决办法】
遇到一个问题,H5调用摄像头扫码,安卓环境下基本所有机型都可以调起摄像头,但是IOS 只有少部分机型才能调用,参考了网上很多例子比如以下两位老大哥的例子 Vue 移动端实现调用相机扫描二维码或条形码 ...
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
VUE实现微信扫码登录
获取access_token时序图: public中index.html引入 <script src="https://res.wx.qq.com/connect/zh_CN/html ...
Vue企业微信扫码登录
根目录下引入JS文件企业微信官方接口文档 index.html <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen ...
【Vue】微信扫码支付
步骤一,引入文件 npm install --save qrcode 页面使用 <div v-if="payshow"><div id="qrcode& ...
vue 网页微信扫码登陆前端全
引入位置在public>index.html文件内 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js ...
Nuxt - 实现微信扫码登录功能（SSR 服务端渲染项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Vue.js 版本的教程,请访问 Vue.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 0 ...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...

vue实现微信扫码拨打电话

vue实现微信扫码拨打电话

实现思路

vue实现微信扫码拨打电话相关推荐

最新文章

热门文章