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实现一键拨号、一键发短信及上传头像兼容性问题的更多相关文章

  1. a标签实现一键拨号、发短信、发邮件、发起QQ会话

    a标签href的妙用:   <a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321 ...

  2. eclipse 拨打电话、拨号,发短信

    1.拨打电话,拨号 //拨打电话Intent intent = new Intent(); intent.setAction(Intent.ACTION_CALL); intent.setData(U ...

  3. 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程

    如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url href链接的方式,实现在Safa ...

  4. html5拨打电话及发短信

    1.最常用WEB页面一键拨号的电话拨打功能 <a href="tel:15088888888">拨号</a> 2.最常用WEB页面一键发送短信功能: < ...

  5. html5页面中 触发 拨打电话、发短信 的方式

    <a href="tel:18688888888">拨号</a> <a href="sms:18688888888">发短信 ...

  6. html5开发手机打电话发短信功能

    原文:http://www.open-open.com/code/view/1449843459332 在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用h ...

  7. html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释

    在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...

  8. html5 安卓拨打电话 发短信

    方法一: <input name=”phone_no” format=”*m” value=”13″/> <do type=”option” label=”呼出号”> < ...

  9. html页面通过特殊链接:打电话,发短信,发邮件详细教程

    采用url href链接的方式,实现在Safari  ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1. 拨打电话 在电话号码 ...

随机推荐

  1. Netty-新连接接入源码解读

    本片博文来看Netty的服务端是如何处理新连接接入问题的 什么是新连接接入?以及新连接接入前,Netty处于什么状态 netty的服务端NioServerSocketChannel初始化,注册在Bos ...

  2. 《ElasticSearch6.x实战教程》之简单搜索、Java客户端(上)

    第五章-简单搜索 众里寻他千百度 搜索是ES的核心,本节讲解一些基本的简单的搜索. 掌握ES搜索查询的RESTful的API犹如掌握关系型数据库的SQL语句,尽管Java客户端API为我们不需要我们去 ...

  3. Python学习3——Python的简单推导

    列表推导是一种从其他列表创建列表的方式,类似于数学中的集合推导,列表推导的工作原理非常简单,类似于for循环.(以下代码均在IDLE实现) 最简单的列表推导: >>>[x*x for ...

  4. HDFS读写数据流程

    HDFS的组成 1.NameNode:存储文件的元数据,如文件名,文件目录结构,文件属性(创建时间,文件权限,文件大小) 以及每个文件的块列表和块所在的DataNode等.类似于一本书的目录功能. 2 ...

  5. vijos P1911 珠心算测验

    #include<iostream> using namespace std; int main() { int n; int sum = 0; int num[200]; cin > ...

  6. zstack源码编译安装(1.7.x版本)

    图片没粘贴过来,请看本人gitbook吧https://www.gitbook.com/book/jingtyu/how-to-learn-zstack-code 运行环境 zstack的安装方式有很 ...

  7. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  8. 【iOS】this class is not key value coding-compliant for the key ...

    一般此问题 都是由 interface build 与代码中 IBOutlet 的连接所引起的. 可能是在代码中对 IBOutlet 的名称进行了修改,导致 interface build 中的连接实 ...

  9. Js面向对象原型~构造函数

    脑袋一团浆糊,但希望写点啥,所有就有了这篇博文了,抱歉哦....开始吧!!!!  什么是构造函数??   所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造 ...

  10. MySQL5.7运行CPU达百分之400处理方案

    用户在使用 MySQL 实例时,会遇到 CPU 使用率过高甚至达到 100% 的情况.本文将介绍造成该状况的常见原因以及解决方法,并通过 CPU 使用率为 100% 的典型场景,来分析引起该状况的原因 ...