Cap1 前言
临近5.20表白节日，虽然我对这个节日没啥感觉，但周围的氛围实在是太热烈，群里的朋友讨论送送口红香水包包或者啥惊喜的，不过自己也有喜欢的人了，认识不长直接送东西不是太合适，干脆花点心思做个小东西吧，表达自己一部分心意。（博主已经凉了，散了散了吧！和这个无关，是别的问题。）所以就是所谓的网页表白咯，大家认为在网上随便找套，把内容换一下就行了，但都是大家用烂的风格，再用下去也不合适。
Cap2 背景
既然不需要后端支持，那就是纯粹静态页面，简单又方便，并不需要维护什么。所以我选择Vue-Cli单应用项目。我一开始想法是所谓的属性内容再点缀点什么就行了。有次浏览类库不小心看到 roughjs 这个手绘风格的类库，所以设定风格为手绘风格，正好这里有个现成的 Examples 代码，直接移植过来完事了。
为了提高网页加载速度，所以像这种依赖dom类库并没有直接引入，直接CDN加载即可。还需要在vue.config.js额外配置达到忽略依赖文件编译和全局变量名的识别：
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
rough: "rough",
"window.rough": "rough",
Typed: "Typed",
"window.Typed": "Typed"
})
]
},
chainWebpack: config => {
config.externals({
'rough': 'rough',
'Typed': 'Typed',
})
},
};
这样直接在控制台输入 rough 可以看到它的方法函数。
其次就是 canva 绘制的寻找 dom 对象不推荐使用 document 方法查询，主要是性能问题，所以推荐大家使用 vue 中的 ref 注册 dom 这样大大减少 dom 遍历而提高性能。
不过在后来仔细阅读 Rough.js API 发现本身就支持绘制圆形、椭圆形、矩形和线，要是定制其他形状的话需要 svg 中的 path 绘制方法才能支持，本来想试试满屏的爱心，无奈自己水平不够，暂时放弃这方面的想法。不过利用 rc.path 方法绘制个爱心：
/**
* 爱心手绘图绘制
* @param self
*/
export const loveCanvas = (self) => {
const rough = window.rough;
const rc = rough.canvas(self.$refs.love);
rc.path('M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
{
fill: 'red',
fillStyle: 'solid', // solid fill
roughness: 0,
hachureAngle: 60, // angle of hachure,
hachureGap: 8,
fillWeight: 3,
}
);
};
可以利用网上的在线path工具画出你想要的样子，工具会给你 path 绘制代码，故这里不再详细描述了。
Cap3 字体
既然是手绘风格的字体，那么字体也需要可爱一些的，再把它们套入网页中。如果作为英文字体改变它的风格很简单，因为单词再怎么组成，字母就24个，再加上字符什么，也多不了多少。所以浏览国外很多网页，那满页字体真的炫彩得很，令人眩目。但作为中文字体，想改变他风格不容易，主要是中文字库实在是太大了，随便淘个字体包就是上兆了，针对英文字库最多也就一个 js （最大几百kb左右）库的大小，这样网页体验是非常不好的，所以现在中文网页都是利用系统自带的字库渲染的。
早在之前看到字蛛看到这个工具，根据它文档说明也很简单，就是在页面声明字体的类型，然后编译ttf文件将其它汉字排除，得到最小的字体文件，减少宽带流量加载。不过我这里是直接用 Fontmin 因为简单省事，直接将常用汉字 Chinese_5039 编译得出网页字体即可，然后存放 cdn 加载引入即可：
@font-face {
font-family: "fzpx";
src: url("fzpx.eot"); /* IE9 */
src: url("fzpx.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("fzpx.woff") format("woff"), /* chrome、firefox */
url("fzpx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("fzpx.svg#fzpx") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}
Cap4 其他
页面的一些按钮，卡片窗口，和加载器都是从 wired-elements 组件引进来利用即可，不过信封那里现在还存个问题，就是上一封下一封切换的时候，卡片窗口的高度是不会变的，所以内容多的时候，内容自动会错位撑开，因为时间太短，这个问题放在后面解决，为了避开这个问题，就是控制卡片窗口的内容字数了。
卡片窗口里面字打印机呈现使用的是 typed-js 使用方法也很简单也不再描述。
Cap5 展示
已在github开源：Hello-SM
最后祝大家520能够脱离单身！