小程序做触底加载更多_您可以做的更多事情

小程序做触底加载更多

背景： (Background:)

(Skip to The Meat if you just want the meat.)

(跳转到肉，如果你只是想肉 。)

I’m building an email automation website using React for the front-end, Rails for the back-end. It lets users create and save email templates and contacts. It has a nice, clean single page display where users can select and edit templates and send them to their chosen contacts.

我正在建立一个电子邮件自动化网站，前端使用React，后端使用Rails。 它使用户可以创建和保存电子邮件模板和联系人。 它具有漂亮，整洁的单页显示，用户可以在其中选择和编辑模板并将其发送给他们选择的联系人。

The issue I had to overcome: ‘How can I quickly create an interface that anyone can use from their personal email?’

我必须解决的问题：“如何快速创建任何人都可以通过其个人电子邮件使用的界面？”

I researched various back-end options, JavaScript libraries, and other email automation projects on GitHub. There’s a lot of cool stuff out there, but I realized my problem was not that complex. In fact, I could probably just use a mailto: link.

我在GitHub上研究了各种后端选项，JavaScript库和其他电子邮件自动化项目。 那里有很多很棒的东西，但是我意识到我的问题并不那么复杂。 实际上，我可能只使用mailto:链接。

Then looking into mailto:, I learned there’s a lot more here than “that annoying link I accidentally clicked when I was trying to copy your email.” Here’s the meat:

然后查看mailto:我发现这里还有很多东西，而不仅仅是“当我试图复制您的电子邮件时，我不小心点击了这个令人讨厌的链接。” 这是肉：

这肉： (The Meat:)

mailto: links are “a type of HTML link that activates the default mail client on the computer for sending an e-mail.”[1] A standard one looks like this:

mailto:链接是“一种HTML链接，可以激活计算机上的默认邮件客户端以发送电子邮件。” [1]一个标准的链接如下所示：

<a href="mailto:example@email.com">Email!</a>

There’s more! Here’s what I’ve learned:

还有更多！ 这是我所学到的：

大概的概念 (General Idea)

After you set up your basic anchor tag with a href="mailto:... , you add your first parameter with a ? and additional parameters with a &.

在使用href="mailto:...设置基本锚标记之后，您将在第一个参数中添加一个?并在其他参数中添加一个& 。

For example:

例如：

<a href="mailto:person1@email.com?cc=person2@email.com
&subject=The%20subject%20of%20the%20email">
Email!</a>

添加一个主题 (Add a Subject)

Have a subject automatically appear when the mail client loads:

邮件客户端加载时自动显示一个主题：

<a href="mailto:example@email.com/?subject=Important Email!">Email!</a>

Using Chrome and Gmail, spaces between words in the subject line were acceptable. It also transposed if I put a + or %20 in place of a space.

使用Chrome和Gmail，可以接受主题行中的单词之间的空格。 如果我用+或%20代替空格，它也会转置。

添加身体 (Add a Body)

<a href="mailto:example@email.com/?body=Welcome to the body!

Similar to the subject, you just add a body parameter.

与主题相似，您只需添加一个body参数。

Want to add a line break in your body? Use%0D%0A in place of return.

想要在您的身体中添加换行符吗？ 使用%0D%0A代替返回值。

Other special characters may need to be encoded. Using JavaScript, you can escape all the special characters using encodeURI() and adding your subject string as a parameter. [2.]

其他特殊字符可能需要编码。 使用JavaScript，您可以使用encodeURI() escape所有特殊字符，并将主题字符串添加为参数。 [2.]

在新标签页中打开 (Open in New Tab)

Adding a target of _blank will cause the email to open in a new tab.

添加target _blank将导致电子邮件在新标签页中打开。

<a href=”mailto:example@email.com" target=”_blank” rel="noopener noreferrer">Email!</a>

Be sure to include rel=”noopener noreferrer” when opening a link in a new tab to avoid exposing your site to performance and security issues. [3.]

在新标签页中打开链接时，请确保包含rel=”noopener noreferrer” ，以避免使您的网站面临性能和安全性问题。 [3.]

Options for a target from w3schools:

来自w3schools的target选项：

• _top: Opens the linked document in the full body of the window

  _top ：在整个窗口中打开链接的文档

• _blank: Opens the linked document in a new window or tab

  _blank ：在新窗口或选项卡中打开链接的文档

• _self: Opens the linked document in the same frame as it was clicked (this is default)

  _self ：在与单击链接相同的框架中打开链接的文档(默认设置)

• _parent: Opens the linked document in the parent frame

  _parent ：在父框架中打开链接的文档

添加多个联系人 (Add Multiple Contacts)

Add multiple recipients with a comma and no space between emails.

添加多个收件人，并以逗号分隔，并且电子邮件之间没有空格。

<a href='mailto:person1@email.com,person2@email.com,person3@email.com'>Email!</a>

CC或BCC联系人 (CC or BCC Contact)

Carbon copy or blind carbon copy recipients using &cc= or &bcc=.

使用&cc=或&bcc=复本或密件抄送收件人。

<a href="

Again, you can add multiple contacts with a comma.

同样，您可以使用逗号添加多个联系人。

警告 (Caveat)

In my research, I’ve seen some cross-browser issues with some of these methods, especially the ones dealing with special characters. Ultimately, my purpose was to point out some of the flexibility of mailto:. I’m sure there are things I’m overlooking or glossing over.

在我的研究中，我看到了其中一些方法的跨浏览器问题，尤其是那些处理特殊字符的方法。 最终，我的目的是指出mailto:一些灵活性mailto: 。 我确定有些事情我正在忽略或掩饰。

If I am missing anything, please shoot me a message, I’d love to add to the list. Or send me anything cool that you’ve done that I can share here?

如果我有任何遗漏，请给我发送一条消息，我很乐意添加到列表中。 或向我发送您可以在这里分享的精彩内容？

As always, thanks for reading. Hope this helps someone!

与往常一样，感谢您的阅读。 希望这对某人有帮助！

[1.] https://www.rapidtables.com/web/html/mailto.html

[1.] https://www.rapidtables.com/web/html/mailto.html

[2.] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

[2.] https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

[3.] https://web.dev/external-anchors-use-rel-noopener/

[3.] https://web.dev/external-anchors-use-rel-noopener/

翻译自: https://medium.com/weekly-webtips/more-stuff-you-can-do-with-mailto-3acda8614e6d

小程序做触底加载更多