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. 简单的量子算法(二):Simon's Algorithm

    前情回顾: 简单的量子算法(一):Hadamard 变换.Parity Problem 好的,现在开始正版的故事,Simon's Algorithm 问题: 有一个secret string,是n位的 ...

  2. http面试笔试常考知识点(二)

    接上一篇随笔 1. https协议为什么比http安全? 内容加密:建立一个信息安全通道,确保信息传输安全: 身份认证:确保网站的真实性: 数据完整性校验:防止内容被第三方冒充或者篡改 2.常见状态码 ...

  3. C#3.0新增功能10 表达式树 06 生成表达式

    连载目录    [已更新最新开发文章,点击查看详细] 到目前为止,你所看到的所有表达式树都是由 C# 编译器创建的. 你所要做的是创建一个 lambda 表达式,将其分配给一个类型为 Expressi ...

  4. SQL Server 设置默认数据库

    STEP 1 调用系统函数 查看SQL Server的当前用户名 SELECT SUSER_NAME(); NOTE : 系统函数的调用跟sql语句执行一样 Paste_Image.png 运行结果 ...

  5. 《VR入门系列教程》之2---VR头显

    什么是虚拟现实?     虚拟现实的目标:让人们相信真实地处于一个虚拟世界中.要达到这个目标就得让人们的大脑(负责视觉和运动感知部分)欺骗他们.不同技术合在一起才可以创造这种幻觉,包括:     全立 ...

  6. configASSERT( uxCriticalNesting == ~0UL );问题

    今天在单步调试FreeRTOS时,一直进入port.c 中的configASSERT( uxCriticalNesting == ~0UL ):函数.照片如下 上网一查,并且结合这个英文注释,才发现, ...

  7. vue.js带复选框表单的增删改查

    近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...

  8. JavaScript Boolean(逻辑)对象

    Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false). 实例 检查逻辑值 检查逻辑对象是 true 还是 false. 完整的 Boolean 对象参考手册 我们提供 J ...

  9. 【iOS】containsString iOS7 报错

    前几天发现了这个问题,原来是因为 containsString 只支持 iOS8.0 以后的系统,不支持 7... 有些地方可以用其他方法替代,如下: NSString *urlString = [[ ...

  10. 一个C++的ElasticSearch Client

    ElasticSearch官方是没有提供C++的client的:因此决定自己写一个,命名为ESClient https://github.com/ATinyAnt/ESClient(手下留星 star ...