vue3+antd vue 低代码自定义配置邮件模板并实现邮件群发兼容(二)

邮件模板兼容

使用邮件模板群发有奖有两种使用方式：
1 在线编辑生成html邮件内容
2 导入内容生成html邮件内容
那么这两种方式，最终都要生成发给用户的html邮件。那么导入的内容如何生成html邮件，这个就需要按照我上期所得配置，即导入内容要严格按照我的配置中对应配置实现，也就是说导入的内容最终也是生成了配置文件。那么这些配置文件在在线编辑的模式下可以利用前端技术实现渲染到页面上，最终生成html， 那么这个导入就需要后端去生成。

一套代码前后端通用

如果前后端分开去渲染，那么肯定比较麻烦，而且不利于维护，前后端需要同时去处理和迭代升级。这里我介绍一个渲染引擎–Mustache，当然这个渲染引擎，既有前端的库也有后端的库，那么这时候就可以利用同一套库，去实现前后端对邮件的渲染，最终生成html邮件。实际上这个Mustache就是一个符号替换的引擎，能够将模板中指定的符号替换成最终的值。这个就很符合我们的预期。
即先要有一个html模板,模板中利用Mustache语法，控制需要动态变化的部分，最后将内容替换进来即可。当然这里使用Mustache也是因为有比较复杂的场景要实用(如果你的邮件仅仅是发送一个订阅消息，信件，消息等简单情况则无需使用这个模板引擎，直接替换就好)。
Mustache中可实现判空，遍历等，对需要动态生成列表数据，分类数据等非常友好。

const mailTemplate = computed(() => {
    const html = mustache.render(props.template, {
      data: data.value
    });
    return html;
  });

以上就是利用vue3 实现将数据渲染进模板内的方法，在前端实现时时更新。当你在低代码的编辑器内输入了对应位置的内容，则模板部分会立刻渲染处理。
后端也是利用这个逻辑，将内容渲染进html邮件内。

下面是部分html邮件模板内容：

这里就是一个将一个json数据放在一个表格里的模板语法。

可以利用vue的dom操作去拿到最终生成的html内容，后端导入也可以使用一套模板拿到html内容。

关于html邮件兼容问题

当我们能够生成html邮件之后，我们会发现这个邮件发出去之后，在各个邮箱系统内或者各个收件终端里面表现差别比较大。国内邮箱兼容性尚可，但是如果是outlook,gmail,阿里邮箱，华为或者其他国外的邮箱差别就比较大，兼容很不好。这里就简单说下如何做到兼容。
1 全部采用table布局，尽量使用html属性，css样式尽量不适用高级样式(特别是css3.0),很多情况下支持都不是很友好。
2 table布局合嵌套，来实现列布局，嵌套布局，对齐，缩进等。灵活使用表格的拆分合并。
3 宽度尽量控制在600，不要花哨的装饰效果。特别是背景图片，渐变色等。
4 常用表格属性: align=“center” width=“560” border=“0” cellpadding=“0” cellspacing=“0”,td标签可以做圆角，而不要使用div。如果想利用空单元格实现间隔或者做填充距离，使用如下写法：

<td height="18" style="line-height: 18px; height: 18px; font-size: 0">
&nbsp;
</td>

div标签可以用，但是不建议用来布局，可以使用来做圆角头像，icon等，img标签可以用，但是其他特殊编辑特别是有外链资源的不可使用。
5 css使用行内样式，控制字体，文本，的样式建议在每个出现的位置都要再写一遍，不要怕麻烦，因为有些邮箱系统会收到其内部样式影响，造成局部比较特殊。比如腾讯邮箱有个 td标签选择器，会影响我们的td的内容。
6 在华为邮箱客户端，会所有的高度会被清除掉，所以有些时候要利用line-height来实现高度的控制。
7 文本溢出隐藏，多行文本溢出这些样式兼容差别非常但。不建议使用。
8 flex实现元素横排，兼容性不好，建议使用float, 间距问题不好控制，建议采用表格列来实现控制，如果想换行，mustache模板语发内，{{}}内无法写表达式，所以可以考虑升级到handlebar，其对mustache完全兼容，然后利用助手函数实现更多灵活的语法封装，java也支持对handlerbar的助手函数的封装。

html邮件测试方法

可利用qq邮箱的发送html邮件去测试。新建邮件->格式->删除原有的html内容，粘贴自己的html内容，发送邮件。