解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题
HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题;
废话不多说,直接上案例代码;
HTML5实现一键拨号:
<a href="tel:151********" class="phone">
HTML5实现一键发短信:
<a href="sms:151********" class="message">
是的,你没看错,在HTML5中只需要通过a标签就可以直接实现一键拨号和一键发短信的功能,当然我们在项目中的需求一般都是要求动态的获取不同的手机号,需要动态的更改手机号的时候只需要双向绑定去动态的拼接即可,微信内置浏览器也是支持的,所以在开发webapp的时候不用太担心微信内置浏览器兼容性问题;
上传、更改头像功能也是我们经常会碰到的常用功能,我们知道可以直接用<input type="file>标签调用选择文件对话框,但是input输入框原生样式很丑,我们可以给输入框添加样式display:none来解决;
然后input输入框上传文件的时候会有兼容性问题,自带浏览器可以正常运行,一般的webapp是运行在微信内置浏览器中的,像<input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">这一段代码在微信内置浏览器中是不运行不触发的,我们可以这样修改:
<input id="photo" type="file" accept="image/*" capture="camera">
这样,我们只需要修改accept属性就可以在微信内置浏览器触发了;所以我们在做项目的时候需要问清楚是在微信上线还是在哪再决定选择哪个兼容方式;
上传头像的时候一般我们是需要跟后台进行数据交互的,今天在调用上传头像接口的时候,参数前台显示传输以base64格式进行编码传输,后台说没有收到,但是我们这边是看到正常的。通过查阅资料,我们最终把代码修改成了这样:
let formData = new FormData()
formData.append('name', this.name)
formData.append('idCard', this.idcard)
formData.append('phone', this.phone)
formData.append('icon', this.$refs.hiddenInput.files[0])
formData.append('payzfb', this.aliPay)
formData.append('tgm',this.qrCode)
console.log(this.$refs.hiddenInput.files[0]);
首先我们这种前台图片传输给后台的时候axios的方法需要是post,然后参数以FormData对象来进行传输,然后给FormData添加属性和值,icon就是我们的图片头像,我们直接传输url后台是收不到的,我们需要给img标签绑定ref="hiddenInput"然后通过this.$refs.hiddenInput.files[0]来作为值传输,这样传输后台是能够收到的;我们获取到的this.$refs.hiddenInput.files[0]通过控制台输出,我们可以看到:
好了,这篇博客就到这里了,今天的博客是属于日常开发中比较常见的场景的知识点,还有什么疑问,大家可以一起留言一起讨论!
解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题的更多相关文章
- a标签实现一键拨号、发短信、发邮件、发起QQ会话
a标签href的妙用: <a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321 ...
- eclipse 拨打电话、拨号,发短信
1.拨打电话,拨号 //拨打电话Intent intent = new Intent(); intent.setAction(Intent.ACTION_CALL); intent.setData(U ...
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url href链接的方式,实现在Safa ...
- html5拨打电话及发短信
1.最常用WEB页面一键拨号的电话拨打功能 <a href="tel:15088888888">拨号</a> 2.最常用WEB页面一键发送短信功能: < ...
- html5页面中 触发 拨打电话、发短信 的方式
<a href="tel:18688888888">拨号</a> <a href="sms:18688888888">发短信 ...
- html5开发手机打电话发短信功能
原文:http://www.open-open.com/code/view/1449843459332 在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用h ...
- html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释
在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...
- html5 安卓拨打电话 发短信
方法一: <input name=”phone_no” format=”*m” value=”13″/> <do type=”option” label=”呼出号”> < ...
- html页面通过特殊链接:打电话,发短信,发邮件详细教程
采用url href链接的方式,实现在Safari ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1. 拨打电话 在电话号码 ...
随机推荐
- Java编程思想:File类getCanonicalFile()方法,listFile()方法
import java.io.IOException; import java.util.*; import java.util.regex.Pattern; import java.io.File; ...
- 【Phabricator】教科书一般的Phabricator安装教程(配合官方文档并带有踩坑解决方案)
随着一声惊雷和滂沱的大雨,我的Phabricator页面终于在我的学生机上跑了起来. 想起在这五个小时内踩过的坑甚如大学隔壁炮王干过的妹子,心里的成就感不禁油然而生. 接下来,我将和大家分享一下本人在 ...
- 浅谈ActiveMQ与使用
一.什么是消息中间件 消息中间件顾名思义实现的就是在两个系统或两个客户端之间进行消息传送 二.什么是ActiveMQ ActiveMQ是一种开源的基于JMS(Java Message Servie)规 ...
- NOIP2018初赛题解 提高组
- win10 安装mysql(图文详情)避免卡在最后一步
win10 安装mysql 本人安装mysql一般都是在镜像文件夹中下载(http://mirrors.sohu.com/),最近系统重做了之后安装mysql5.5.msi,可以安装成功.但是在最后的 ...
- [leetcode] 62 Unique Paths (Medium)
原题链接 字母题 : unique paths Ⅱ 思路: dp[i][j]保存走到第i,j格共有几种走法. 因为只能走→或者↓,所以边界条件dp[0][j]+=dp[0][j-1] 同时容易得出递推 ...
- 基于 HTML5 WebGL 的民航客机飞行监控系统
前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...
- Redis(二)--- Redis的底层数据结构
1.Redis的数据结构 Redis 的底层数据结构包含简单的动态字符串(SDS).链表.字典.压缩列表.整数集合等等:五大数据类型(数据对象)都是由一种或几种数结构构成. 在命令行中可以使用 OBJ ...
- Linux系统安装MySQL——.rpm版
0.环境 本文操作系统: CentOS 7.2.1511 x86_64MySQL 版本: 5.7.13 1.下载 MySQL 官方的 Yum Repository 从 MySQL 官网选取合适的 My ...
- asn1学习笔记 约束
继续看asn1语法详解,今天主要看了约束部分,包含 1.单值约束,包含枚举类型 enumerated . 如: Two ::= INTEGER(2) Day ::= ENUMERATED { mond ...