【原】移動web頁面給用戶發送郵件的方法 (郵件含文本、圖片、鏈接)

微信商戶通有這么一個需求，用戶打開H5頁面后，引導用戶到電腦下載設計資源包，由於各種內部原因，被告知無后台資源支持，自己折騰了一段時間找了下面2個辦法，簡單做下筆記。

1. 使用mailto功能，讓用戶自己給自己發送一份包含資源包的下載鏈接
2. 調用QQ郵件分享功能，讓用戶自己給自己發送一份包含資源包的下載鏈接

 

mailto使用方法

1、基礎寫法

當瀏覽者點擊這個鏈接時，瀏覽器會自動調用默認的客戶端電子郵件程序，並在收件人框中自動填上收件人的地址下面

<a href="mailto:[e-mail]">單擊這里給peun發電子郵件</a>

2、在收件人地址后用?cc=開頭，填寫抄送地址(android存在兼容問題)

<a href="mailto:[e-mail]?cc=[e-mail]">單擊這里給peun發電子郵件</a>

3、緊跟着抄送地址之后，寫上&bcc=，填上密件抄送地址(android存在兼容問題)

<a href="mailto:[e-mail]?cc=[e-mail]&bcc=[e-mail]">單擊這里給peun發電子郵件</a>

注意：在添加這些功能時，第一個功能以"?"開頭，后面的以"&"開頭

4、包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現

<a href="mailto:[e-mail];[e-mail]">單擊這里給peun發電子郵件</a>

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

<a href="mailto:[e-mail]?subject=【邀請函】">單擊這里給peun發電子郵件</a>

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

內容包含文本，使用%0A給文本換行

<a href="mailto:[e-mail]?body=邀請您參加騰訊onepiece分享%0A%0A期待您的到來%0A%0Apeunzhang">單擊這里給peun發電子郵件</a>

內容包含鏈接，含http(s)://等的文本自動轉化為鏈接

<a href="mailto:[e-mail]?body=http://www.cnblogs.com/PeunZhang/">單擊這里給peun發電子郵件</a>

內容包含圖片，PC端不支持

<a href="mailto:[e-mail]?body=<img src='http://images.cnblogs.com/cnblogs_com/PeunZhang/286351/o_peunzhang_cnblogs_code.png' width='200' height='200'>">單擊這里給peun發電子郵件</a>

8、完整示例，如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的每一個都以“&”開頭

<a href="mailto:[e-mail];[e-mail];[e-mail]?cc=[e-mail];[e-mail]&bcc=[e-mail]&subject=【邀請函】&body=邀請您參加騰訊onepiece分享">單擊這里給peun發電子郵件</a>

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

發送成功后，在QQ郵箱打開的界面：

體驗二維碼：

重點代碼展示：

HTML

<a href="javascript:;" class="btn btn-green form-btn" id="sendBtn">打開郵箱</a>

javascript

var txt = "?subject=［微信支付停車場行業資源包v1.0］&body=停車場行業 - 微信支付行業設計方案資源包v1.0%0A%0A"
            + "http://action.weixin.qq.com/payact/readtemplate?t=/mobile/merchant/project/parking/download_tmpl%0A%0A"
            + "里面含有：%0A%0A1.停車場行業方案設計模版.ai%0A2.停車場前端頁面開發文件.html%0A%0A"
            + "您可以用源文件直接編輯后印刷或開發。%0A%0A"
            + "資源包如果有最新版本會第一時間更新。歡迎繼續關注微信支付行業設計方案，或者分享給您的商業伙伴。%0A%0A"
            + "微信支付行業設計方案：%0A%0A"
            + "<img src='http://ol.weixin.qq.com/public/demo/parking/parking_discount/img/code.png' width='200' height='200'>";

var sendBtn = document.getElementById("sendBtn"),
    sendName = document.getElementById("sendName");
sendBtn.addEventListener("click",function(e){
        sendNameVal = document.getElementById("sendName").value;
        if (filter.test(sendNameVal) == false) {
            e.preventDefault();
            removeClass(info,"hide")
        }
        else 
        if(filter.test(sendNameVal) == true){
            sendBtn.setAttribute("href","mailto:" + sendNameVal + txt);
        }
    })

缺點

1. 部分用戶打開郵箱后不知道是自己給自己發送郵件
2. 部分用戶沒有手機郵箱賬戶，點擊打開郵件后不會設置，放棄下載
3. 郵件成功后，被部分客戶端當做垃圾郵件處理，用戶找不到郵件

於是在此缺點的上補充了手機自帶的復制功能，保證用戶可以拿到下載鏈接，完善后下載量也提升了~

長按a標簽彈出系統默認菜單，點復制(拷貝)，保證用戶有辦法可以拿到下載鏈接：

重點代碼展示：

HTML

<a href="http://action.weixin.qq.com/payact/readtemplate?t=mobile/merchant/project/parking/download_tmpl" target="_blank" class="copy">http://action.weixin.qq.com/payact/readtemplate?t=mobile/merchant/project/parking/download_tmpl</a>

css

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

javascript

//檢測平台，PC端可點擊a，移動端禁止a 
    function 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);
    })

缺點

1. 需要發送下載鏈接到PC的微信或者QQ等，操作不方便

調用QQ郵件分享功能

QQ郵件分享功能

重點代碼展示：

<script type="text/javascript">
(function(){
var p = {
url:location.href,
to:'qqmail',
desc:'', /*默認分享理由(可選)*/
summary:'請打開http://www.cnblogs.com/PeunZhang/下載',/*摘要(可選)*/
title:'資源下載',/*分享標題(可選)*/
site:'白樹博客',/*分享來源 如：騰訊網(可選)*/
pics:'ttp://images.cnblogs.com/cnblogs_com/PeunZhang/286351/o_peunzhang_cnblogs_code.png' /*分享圖片的路徑(可選)*/
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(["<a target='_blank' ", 'href="http://mail.qq.com/cgi-bin/qm_share?', s.join("&"), '"', ' style="cursor:pointer;text-decoration:none;outline:none"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_share_01.png"/></a>'].join(""));
})();

缺點

1. 移動端並沒有做兼容，手機設備上操作難度大
2. 沒有設置viewport，頁面內容特別小
3. 沒有微信登陸授權操作，需要手動輸入QQ賬號

 

綜合考慮，最終選擇了mailto和a標簽長按復制方法的結合，如果大家有更好的方法請留言！