實現純前端寄信功能

前言

最近為了做一個簡單的寄信功能找了許多方法，目標是：

• 免費
• 簡單的信件版面調整
• 純 JavaScript 即可完成

為此紀錄一下這個快速又容易上手的套件，EmailJS。

操作流程

• Step1：進入 EmailJS 的官網 https://www.emailjs.com 建立一個帳戶。

• Step2：在右側選擇你要創建的 Email services，這邊我們就選較普遍的 Gmail。

• Step3：接著點擊 Connect account 連接你的 Gmail 帳戶，接受存取權後按下 Add Service。

• Step4：接著點擊左側選單的 Email Templates，信件編輯區非常簡潔直觀，參數的部分普通文字使用雙花括號包裹，html 內容則使用三個花括號，編輯完成後按下右上角的 Save 即可。

在 Vue CLI 裡使用

接下來進入程式碼的部分，框架選用的是 Vue，首先我們先安裝

npm install emailjs-com --save

安裝完成後我們可以在要使用 EmailJS 的元件內 import 就好

import emailjs from 'emailjs-com';

接著是代碼的部分：

emailjs.send 函數接受四個參數：

1. service_id：是我們一開始選擇的 gmail

2. template_id：

3. templateParams：模板參數的部分，在此範例 templateParams.user 是用戶的姓名，templateParams.userMail 是用戶的信箱，templateParams.emailContent 是信件的內容，這邊以 html 示範

4. user_id：

都準備好後就可以試寄看看

這樣就成功囉！

如果還想知道更多的玩法可以參考他們的文件 https://www.emailjs.com/docs/ 裡面也有 Angular、React 以及 jQuery 的代碼示範。