全程直擊：婚禮請柬 DIY 實錄

時間 2019-11-05

標籤全程婚禮請柬 diy 實錄简体版

原文原文鏈接

本文首發於掘金，轉載請註明出處，保留原文連接以及做者信息。javascript

前言

這篇文章不算是技術乾貨，你大能夠帶着看熱鬧的輕鬆心態來瞧瞧，我，一個新郎，是怎麼讓結婚這事兒變得更加艱難的。 php

就在上個月，我舉辦了婚禮，如願以償地和心愛的姑娘締結了一輩子的誓約。css

在籌備婚禮的時候，咱們就下定決心，要儘可能不落俗套，儘可能讓參加婚禮的親友感覺到咱們用心策劃了每個細節。做爲重要一環的電子請柬，固然也不能將就。html

現在，電子婚禮請柬已經是一種常見之物。這種請柬通常都是婚慶 App 生成的 H5 頁面，展現婚紗照和婚禮的時間、地點等，這兩年還增長了送禮物、發祝福彈幕之類的功能。相信你們常常會在朋友圈見到朋友分享的請柬。前端

我是一個喜歡折騰的人，我喜歡用我所學的知識解決生活中的問題。那些通用的模板顯然不能知足我。好巧不巧，我正好是一名前端開發者，出於敬業態度和極客精神，我決定本身作這份請柬。java

想一想也沒啥難度嘛：弄一臺雲服務器，簡單搭個網站，本身寫頁面，丟到服務器上，齊活。你看，一點都不難！ios

纔怪。git

前期準備

UI 模板

開頭吹的氣壯山河，但這第一腳就踢到了鐵板上 —— 我不會作 UI 設計。我審視着鏡子裏的本身：Photoshop 水平二半吊子、我的網站的配色曾被面試官說辣眼睛、惟一一次被誇畫畫好是幼兒園時候…… 資質魯鈍，如今纔開始提高審美、學習平面設計確定是來不及了。我着急啊，我上火啊，我一縷一縷地揪頭髮啊……程序員

等等，我是什麼來着？程序員啊，個人看家本領是什麼來着？面向搜索引擎編程啊！既然不能本身產出，只好踐行拿來主義了。因而我 Google 到了許多電子請柬的模板（關鍵詞：RSVP）。Why Google？防止和國內經常使用的模板撞臉。通過和新娘的反覆討論，咱們敲定了一套風格最吸引咱們的模板。github

總算是有米可炊了。

服務器

雲服務器我選的是阿里雲的 ECS。由於只是用來放靜態頁面，因此不須要豪華配置，簡單清爽（費用低）就好：

既然咱是前端工程師，那就正好藉助近水樓臺，用 Node.js 來搭建 Web 服務。參考阿里雲的官方文檔，我在 CentOS 裏安裝好了 Node 環境。框架方面我選用了 Express，由於它適合我（這種新手）。其實像電子請柬這種簡單的應用，框架並不是是必需品，但這是一個體驗新鮮事物的機會不是嗎？因而用 Express 搭建了簡單的服務：

let http = require('http');
let express = require('express');

let app = express();

app.use(express.static('html'));
http.createServer(app).listen(80);
複製代碼

域名註冊及備案

如今我能夠訪問到個人服務器中的網頁，只不過其連接是這種原始人形態：http://127.127.127.127:80。對於一封婚禮請柬來講，這也太影響氣質了吧。我把這樣的連接發給親友，人家還不覺得我是盜號的？

不行不行。

玉皇大帝說：要有域名。因而便註冊了域名。解析到服務器上後，就能夠經過域名訪問到本身的頁面了。

另外，網站是要進行 ICP 備案的。你會須要填寫一些表格，域名服務商（個人是阿里雲）會寄給你一張大大的藍色備案幕布，讓你在幕布前拍照上傳。這是一個不太複雜但必不可少、不算有趣但讓我莫名感受神聖的程序。最終你會獲得一串備案號（如京ICP證030173號）。

https

在去年的一次小嚐試中，我想把微信羣二維碼貼在牆上供鄰居掃碼加羣。但羣二維碼是有時效的，按期打印新的二維碼有點浪費紙。當時我剛好有本身的網站，就想了個辦法：紙上打印一個網址的二維碼，該網址指向個人網站中的一張圖片 —— 微信羣二維碼，這樣，我只須要按期上傳新的羣二維碼便可。但測試時發現微信會攔截 http 協議的外鏈，須要用戶確認訪問方可進入頁面（如今已經再也不攔截）。彼時我沒有餘力繼續研究 https，只好做罷。（如今想一想，用第三方圖牀的連接應該就能夠。）

因此 https 算是我不曾征服的疆土，此次我必定要把它拿下。

爲了不增長沒必要要的工（fèi）做（yòng），我選擇了免費的 SSL 證書：

一手交錢一手交貨，而後走個流程：

當流程走到最後一步 —— 下載證書時，卻沒有看到 Node.js 服務器專用的證書：

幸虧找到了一位前輩的文章，告訴我下載 Nginx 的就能夠。有前輩撐腰，腰不酸腿不疼，一口氣配完 https 不費勁：

let http = require('http');
let express = require('express');
let fs = require('fs');
let https = require('https');

//讀取證書文件
let options = {
    key: fs.readFileSync('./0000000_域名.key'),
    cert: fs.readFileSync('./0000000_域名.pem'),
};

let app = express();

app.use(express.static('html'));
http.createServer(app).listen(80);
https.createServer(options,app).listen(443);
複製代碼

如今就能夠用 https 協議的域名來訪問請柬啦！

部署工具

遠程鏈接服務器：XShell
文件上傳：XFTP
進程管理工具：PM2

PM2 能夠幫你在更新代碼後自動重啓服務，老省事兒了。

忙活完這些，後端支撐基本就緒，能夠開始着手開（魔）發（改）頁面了。

頁面開發

精簡模板

先請你們檢閱一下咱們夫婦的審美水平：這是咱們選中的模板。風格清新明快，傳達出舒適甜蜜的情感信息。

頁面中有些內容模塊是不適用於咱們的：

『Featured People』：此處展現了伴郎伴娘的頭像和信息，但彼時咱們還未敲定人選。
『Gifts Registry』：此處展現了新人預約禮品的商店 Logo —— 這個不太接地氣。
『RSVP』：這一部分是表單，用來確認受邀人的出席狀況。因爲表單的形式不靈活、不利於管理，咱們打算用微信和電話來確認出席狀況。
『主題顏色設置』：即釘在界面左側的轉動的小齒輪。咱們要作出的成品不須要提供換膚功能。

OK，砍掉這些無用部分，再將模板中的圖片和文案替換爲咱們本身的信息，一封屬於咱們的電子請柬就初具雛形了。

但僅僅這樣仍是不行的，還須要稍稍整理一下代碼。

字體壓縮

首先面臨的就是字體問題。

原模板使用的字體是 Oswald：

此款字體瘦高無襯線，效果優雅悅目，但不支持中文。恰當的字體可以提高用戶體驗，若是中文字體的風格與 Oswald 不符，總體感觀將大打折扣。我須要一款風格相近的中文字體。

我在字由中反覆檢索比對，終於挖到了寶藏 —— 方正俊黑，該系列的方正俊黑_纖和方正俊黑_粗很有原模板字體的神韻：

這兩款字體是非商用免費受權的，因此我能夠放心大膽地使用。

在方正官網上，想下載字體你得是設計師才行（見上圖字體名稱後面的 Tag）。但有趣的是，只要你註冊帳號時將身份勾選爲設計師便可，官方仍是挺厚道的。（從今天起我就是方正字庫認證的設計師了）

在 CSS 中將字體設置爲方正俊黑，頁面效果恰如我願。

可是！你們都知道，中文字體文件的體積，那簡直，五大三粗。

請柬內容並無那麼多字，若是線上使用完整的字體包，必然拖慢加載速度。我把這樣的請柬發給親友，人家還不覺得我是混子前端？

在百度上略微搜索就會發現，遇到這種問題的開發者不在少數，但網上的大多求助帖沒有獲得讓我滿意的解決方案。幾經展轉，我發現了字蛛+，這個工具能幫咱們自動分析並按需壓縮字體文件。只需將本地代碼路徑或線上連接寫進配置文件，而後運行 fsp run 便可完成。下圖是我將字體進行分析壓縮後的效果：

這樣的壓縮效果，真讓人神清氣爽啊~~~（至於 FZJunHJW_Cu.TTF 爲什麼沒變，容我先賣個關子）

視差滾動（Parallax）

視差滾動，這個效果你們確定不陌生吧？當你在模板頁面中上下滑動頁面時會發現，有些 section 的背景圖片與內容並非相對靜止的，這種效果大大增長了頁面的動（bī）感（gé），是我不管如何都想應用在請柬中的效果。

咱們發送請柬的途徑只有一個，那就是微信聊天。不管是熱衷於在手機上搶紅包的長輩，仍是習慣在工做時將微信掛在電腦上的同齡朋友，微信絕對是最有效率的傳達方式。

故此須要在桌面端（PC、Mac）和手機端的微信中測試個人請柬。

桌面端效果正常；但在手機端，視差滾動效果失靈了。

咱們知道，實現視差滾動效果最簡單的方式就是用 background-attachment: fixed;，而模板頁面的作法，是在此基礎上增長了動態修改 background-position，以實現滾動時背景圖片以較慢的速度跟隨（而不是 fix 在原地）。現在在移動端失效，想必是兼容性問題。讓咱們到 caniuse.com 中查證一下：

果不其然，微信內置的 QQ 瀏覽器 X5 內核不支持這一 CSS 特性。有種說法是這一效果會給移動端瀏覽器帶來性能上的壓力，影響體驗，因此乾脆不支持該特性。

若是在手機微信中打開的請柬沒有動感的效果，那將顯得多麼平庸啊。

在搜遍了古今中外全部技術貼而無果後，我決定用 JavaScript 來實現，正所謂以暴制暴、一力降十會……

思路是這的：

先將背景圖片以 <img /> 標籤的方式加載到頁面中，藏在視口上方；
監聽頁面滾動，當須要特效的 section 滾動到視窗範圍內時，將對應的圖片拉到視口內登臺表演；
當元素滾動出視口後，對應的圖片再退場，回到視口上方候場。

是否是感受有點兒懵？瞧我這嘴，笨得跟棉褲腰似的，給你看代碼你就懂了：

<!-- 背景圖片 -->
<img src='img.png' />

<!-- 應用特效的 section -->
<section id='section'>All eyes on me.</section>
複製代碼

img {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
}
複製代碼

$(document).scroll(function () {
    var windowScrlTop = $(window).scrollTop();
    var windowH = $(window).height();
    if (
        ($('#section').offset().top - windowScrlTop) <= windowH 
        && ($('#section').offset().top - windowScrlTop) >-$('#section').height()
    ){
        // 當 section 位於視口中時：
        $('img').css('transform', 'translateY(0)');
    } else {
        // 當 section 位於視口之外時：
        $('img').css('transform', 'translateY(-100%)');
    }
});
複製代碼

經過這樣的控制，就能夠在微信內置瀏覽器中實現視差滾動的效果。無從驗證這樣作是否比 background-attachment: fixed; 性能要好，但從真機測試來看，上下滑動流暢，未出現卡頓。

我把頁面優美、效果炫酷的請柬發給了新娘，已經準備好了接受洶涌而至的讚美和香吻 —— 「我們的請柬裏怎麼沒有地圖呀？我看人家的都有呢？」

😳哦，新需求是吧，好的我知道了。

地圖與導航

在請柬中加入地圖，目的就是明確婚禮地點的位置信息，方便親友抵達。這就須要：

在地圖上醒目標記地點位置；
點擊地圖能跳轉到路線導航頁面。

因爲主要在微信中使用，我就無腦選擇了騰訊地圖。在騰訊位置服務上註冊帳號、驗證身份、申請開發密鑰以後，便可開始開發。這裏我用的是 JavaScript 地圖 API。

先在請柬頁面中加載 API 服務：

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
//「YOUR_KEY」 即爲你本身的開發密鑰
複製代碼

再設置容器元素並指定指定寬高：

<div id="map" style="width:500px; height:300px"></div>
複製代碼

接下來須要初始化：

var centerLatlng = new qq.maps.LatLng(39.908551, 116.397743);//地圖的中心點的經緯度。
var myOptions = {
    zoom: 15,
    center: centerLatlng,
    mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("map"), myOptions);//地圖實例
複製代碼

此時，展現地圖的目的就達到了。可是爲了提高交互體驗，還須要作一些工做：

將婚禮地點標記出來。

//在地圖上添加標註：
var anchor = new qq.maps.Point(10, 10),//相對於標記點的位置
    size = new qq.maps.Size(24, 24),//顯示尺寸
    origin = new qq.maps.Point(0, 0),//相對於圖片左上角的相對像素座標
    icon = new qq.maps.MarkerImage('./img/center.gif', size, origin, anchor);//用於標記的圖片的路徑

var marker = new qq.maps.Marker({
    icon,
    position: centerLatlng,
    map,
});
複製代碼

用文字提示用戶標記點是支持點擊的：

var label = new qq.maps.Label({
    position: centerLatlng,
    map,
    content: '點擊紅點查看導航',
    style: {
        margin: '-18px -10px 0px 10px'
    }
});
複製代碼

實現點擊後打開 App 導航（移動端）或詳情地圖頁面（桌面端）的功能。若是是桌面設備，在新網頁中打開以婚禮地點爲中心的地圖便可；可要是移動端，就要稍微繁瑣一些：藉助微信內置的地圖服務調用第三方地圖 App（百度地圖、高德地圖等）展現導航路線 ——— 想拔出這根蘿蔔，可得帶出很多泥來。

恭喜我本身，解鎖了支線任務。

那麼，接下來的步驟就是：

註冊微信公衆號。
在公衆號的【設置 - 公衆號設置 - 功能設置】中配置 JS 接口安全域名。

獲取 access_token：

//服務端 Node.js 代碼：
const request = require('request');
request.get({
        uri: 'https://api.weixin.qq.com/cgi-bin/token',
        json: true,
        qs: {
            grant_type: 'client_credential',
            appid: YOUR_APPID, 
            secret: YOUR_APPSECRET
        }
    }, (err, res, body) => {
        if (err) {
            console.log(err)
            return
        }
        
        if (body.errcode) {
            return
        }
        console.log('返回值：',res);// {"access_token":"艾克賽斯_套肯","expires_in":7200}
    }
);
複製代碼

獲取 jsapi_ticket：

//服務端 Node.js 代碼：
const request = require('request');
request.get({
        uri: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
        json: true,
        qs: {
            access_token: access_token,
            type: 'jsapi'
        }
    }, (err, res, body) => {
        if (err) {
            console.log(err)
            return
        }
        
        if (body.errcode) {
            return
        }
        console.log('返回值：',res);
        /* 返回值示例： { "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 } */
    }
);
複製代碼

根據簽名算法生成簽名：

// 服務端 Node.js 代碼：
const crypto = require('crypto');

// sha1加密
function sha1(str) {
    let shasum = crypto.createHash("sha1")
    shasum.update(str)
    str = shasum.digest("hex")
    return str
}

// 生成時間戳
function createTimestamp() {
    return parseInt(new Date().getTime() / 1000) + ''
}

// 生成隨機串
function createNonceStr() {
    return Math.random().toString(36).substr(2, 15)
}

// 字典排序
function raw(args) {
    var keys = Object.keys(args)
    keys = keys.sort()
    var newArgs = {}
    keys.forEach(function (key) {
        newArgs[key.toLowerCase()] = args[key]
    })

    var string = ''
    for (var k in newArgs) {
        string += '&' + k + '=' + newArgs[k]
    }
    string = string.substr(1)
    return string
}

var ret = {
        jsapi_ticket: ticket,//上個步驟中獲取到的 jsapi_ticket。
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url:'www.url.com',//當前網頁的URL。
    };
    
var string = raw(ret);
const signature = sha1(string);//這就是咱們須要的簽名。
複製代碼

在頁面中引入 JS 文件：

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
複製代碼

權限驗證（所需參數應向後端請求獲得）：

//前端 JavaScript 代碼：
wx.config({
  debug: true, // 開啓調試模式。
  appId: '', // 必填，APPID
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，上個步驟中生成的簽名
  jsApiList: ['openLocation'] // 必填，須要使用的JS接口列表，此處爲地理位置接口 openLocation。
});
複製代碼

監聽點擊事件：

qq.maps.event.addListener(marker, 'click', function () {
        //判斷運行設備是移動設備仍是桌面設備
        if ((navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                ))) {
            //移動設備中調用 JSSDK 接口：
            wx.openLocation({
                latitude: 39.908551,
                longitude: 116.397743,
                name: '天安門',
                address: '北京市東城區東長安街',
                scale: 15, // 地圖縮放級別,範圍爲從1~28。
            });
        } else {
            //桌面設備中打開新網頁展現地圖：
            window.open('https://j.map.baidu.com/26/BK');
        }
    });
複製代碼

這一整套都操練完後，總算是實現了地圖導航功能。

姓名可定製

可能各位看官讀到這裏已經和我同樣累了 —— 費這麼大勁，作出來一個稀鬆日常的靜態頁面，真的值得嗎？

固然不止如此。

DIY 電子請柬的念頭剛剛萌生之時，我就下定決心要賦予這份請柬一個亮點：嘉賓姓名可定製。

想一想過年時你收到的羣發短信，禮貌有餘而誠意稍欠。你知道文字內容都是對方複製粘貼來的，因此那一行行氣氛熱烈的拜年話，你壓根不會仔細看。

而我要作的，是讓每一位嘉賓在請柬裏看到本身的名字，讓嘉賓明白：這封請柬是專屬於你的，跟別人的都不同。

這是我向受邀親友表達敬愛的方式，也是我爲了讓本身的婚禮儘可能不流於形式而作出的掙扎。

我將名字分爲三部分：

前綴，可選項：親愛的、尊敬的。
姓名或親屬稱呼，手動輸入，如：王大錘/老舅等。
後綴，可選項：先生、女士、小姐。（若是第二部分是親屬稱呼，則省略第三部分）

實現思路是這樣的：

將嘉賓名稱做爲請求參數拼接到 URL 的末尾，例如：

https://www.a.com?prefix=尊敬的&name=王大錘&suffix=先生
複製代碼

在頁面中用 JavaScript 獲取到參數，動態插入到對應位置。

const info = window.location.search;
if (info.length) {
	const arr = info.replace(/\?/, '').split('&');
	const prefix = (arr[0].split('='))[1];
	const name = (arr[1].split('='))[1];
	const suffix = (arr[2].split('='))[1];
	
	$('#prefix').html(decodeURI(prefix))
	$('#name').html(decodeURI(name))
	$('#suffix').html(decodeURI(suffix))
}
複製代碼