• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 拉起邮件类应用(mailto方式)
2
3## 使用场景
4
5通过mailto电子邮件协议,可以创建指向电子邮件地址的超链接,方便用户通过网页或应用中的超链接直接跳转电子邮件应用。同时,支持在`mailto:`的相关字段中定义邮件的收件人、主题、正文内容等,节省用户编辑邮件的时间。
6
7常见的应用场景举例如下:
8
9- 从网页拉起:
10    - 用户在购物网站浏览产品页面时,看到“联系我们”按钮,点击后会拉起默认邮件客户端。收件人自动填写为客服邮箱,邮件主题设定为产品咨询。
11    - 在招聘岗位页面,点击“申请职位”按钮,会拉起邮件客户端。收件人地址为招聘邮箱,邮件主题为“应聘某职位”,正文可以预先填入申请模板。
12- 从应用拉起:
13    - 移动应用中,用户点击“反馈”按钮时,应用调用系统功能,拉起默认邮件客户端,预先填写反馈邮箱、问题描述等信息。
14    - 移动应用中,当用户点击“通过邮件分享”按钮时,应用会通过 `mailto` 调用邮件客户端,预填邮件主题和正文。
15> **说明:**
16> - 如果使用mailto方式拉起邮件应用,需要拉起方先按mailto格式封装字符串,再使用mailto方式拉起。邮件应用会解析收到的mailto协议字符串,并填充发件人、收件人、邮件内容等信息。
17> - 如果拉起方已知发件人、收件人、邮件内容等信息,推荐[使用startAbilityByType方式拉起邮件应用](start-email-apps.md)。
18
19## mailto协议格式
20
21mailto协议标准格式如下:
22
23```
24mailto:someone@example.com?key1=value1&key2=value2
25```
26
27+ `mailto:`:mailto scheme,必填。
28+ `someone@example.com`:收件人地址,选填。如果存在多个地址,用英文逗号分隔。
29+ `?`:邮件头声明开始符号。如果带邮件头参数,则必填。
30+ `key-value`:邮件头参数,详细参数见下表。
31
32  | 邮件头| 含义| 数据类型 | 是否必填|
33  | --- | --- | --- | --- |
34  | subject | 邮件主题 | string | 否 |
35  | body | 邮件正文 | string | 否 |
36  | cc| 抄送人,多个用逗号分隔 | string | 否 |
37  | bcc| 密送人,多个用逗号分隔 | string | 否 |
38
39## 拉起方开发步骤
40
41### 从网页拉起
42
43网页中的超链接需要满足mailto协议。示例如下:
44
45
46```
47<a href="mailto:support@example.com?subject=Product Inquiry&body=I am interested in...">联系我们</a>
48```
49实际开发时,需要将邮箱地址替换为真实的邮箱,邮件内容可以根据需要进行配置。
50
51实现效果如下:
52![image](figures/mailto-html.gif)
53
54### 从应用拉起
55
56保证mailto字符串传入uri参数即可,在应用中page页面可通过 getHostContext() 获取context,在ability中可通过this.context获取context。
57
58```ts
59import { common } from '@kit.AbilityKit';
60
61@Entry
62@Component
63struct Index {
64  build() {
65    Column() {
66      Button('反馈')
67        .onClick(() => {
68          let ctx = this.getUIContext().getHostContext() as common.UIAbilityContext;
69          ctx.startAbility({
70            action: 'ohos.want.action.sendToData',
71            uri: 'mailto:feedback@example.com?subject=App Feedback&body=Please describe your feedback here...'
72          })
73        })
74    }
75  }
76}
77```
78
79实现效果如下:
80![image](figures/mailto-app.gif)
81
82## 目标方开发步骤
83
841. 为了能够支持被其他应用通过mailto协议拉起,目标应用需要在[module.json5配置文件](../quick-start/module-configuration-file.md)中声明mailto。
85
86    ```json
87    {
88      "module": {
89        // ...
90        "abilities": [
91          {
92            // ...
93            "skills": [
94              {
95              "actions": [
96                  'ohos.want.action.sendToData'
97                ],
98                "uris": [
99                  {
100                    "scheme": "mailto",
101                    // linkFeature 用于适配垂类面板拉起
102                    "linkFeature": 'ComposeMail'
103                  }
104                ]
105              }
106            ]
107          }
108        ]
109      }
110    }
111    ```
112
1132. 目标应用在代码中取出uri参数进行解析。
114
115    ```ts
116    export default class EntryAbility extends UIAbility {
117      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
118        // 应用冷启动生命周期回调,其他业务处理...
119        parseMailto(want);
120      }
121
122      onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
123        // 应用热启动生命周期回调,其他业务处理...
124        parseMailto(want);
125      }
126
127      public parseMailto(want: Want) {
128        const uri = want?.uri;
129        if (!uri || uri.length <= 0) {
130          return;
131        }
132        // 开始解析 mailto...
133      }
134    }
135
136    ```
137