【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接) - 白树_H5之家

微信商户通有这么一个需求，用户打开H5页面后，引导用户到电脑下载设计资源包，由于各种内部原因，被告知无后台资源支持，自己折腾了一段时间找了下面2个办法，简单做下笔记。

maito使用方法

1、基础写法

当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面

单击这里给peun发电子邮件

2、在收件人地址后用?cc=开头，你可以填写抄送地址(android存在兼容问题)

单击这里给peun发电子邮件

3、紧跟着抄送地址之后，写上&bcc=，就可以填上密件抄送地址(android存在兼容问题)

单击这里给peun发电子邮件

注意：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头

4、包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现

单击这里给peun发电子邮件

5、包含主题，用?subject=可以填上主题

单击这里给peun发电子邮件

6、包含内容，用?body=可以填上内容

内容包含文本，使用%0A给文本换行

单击这里给peun发电子邮件

内容包含链接，含http(s)://等的文本自动转化为链接

单击这里给peun发电子邮件

内容包含图片，PC端不支持

单击这里给peun发电子邮件

8、完整示例，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头

单击这里给peun发电子邮件

知道基本的用法后，回到微信商户通的需求点，有了以下的界面：

发送成功后，在QQ邮箱打开的界面：

体验二维码：

重点代码展示：

HTML

打开邮箱

javascript

缺点

于是在此缺点的上补充了手机自带的复制功能，保证用户可以拿到下载链接，完善后下载量也提升了~

长按a标签弹出系统默认菜单，点复制(拷贝)，保证用户有办法可以拿到下载链接：

重点代码展示：

HTML

?t=mobile/merchant/project/parking/download_tmpl

css

.copy{-webkit-touch-callout: default;}

javascript

mobilePreventA(e){ var system = { win: false, mac: false, xll: false, ipad:false }; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); if (!(system.win || system.mac || system.xll)) { e.preventDefault(); } } var copyBtn = document.querySelector(".copy"); copyBtn.addEventListener("click",function(e){ mobilePreventA(e); })

缺点

需要发送下载链接到PC的微信或者QQ等，操作不方便

调用QQ邮件分享功能

QQ邮件分享功能

重点代码展示：