利用 Web Share API 将网页分享到 App(上)

本文介绍了Web Share API的用法,允许网站调用操作系统原生分享组件,提供分享网页标题、文本和URL的功能。目前仅部分安卓Chrome支持,使用时需确保网站为HTTPS并由用户行为触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

640?wx_fmt=jpeg


640?wx_fmt=png

2013年加入去哪儿网技术团队,目前在大住宿事业部,技术委员会委员,大前端负责人。个人对移动端技术、工程化有浓厚兴趣。


随着移动互联网的发展,用户流量逐渐从 PC 上迁移到了手机上,为了更好的满足移动端的开发,W3C 制定了许多新的特性标准,如 AppCache, ServiceWorker, Geolocation 等,通过这些新的特性,前端工程师们能模拟一些原生功能,让网站的用户体验变得更好。分享是移动端用户使用非常频繁的功能,它允许用户在多个应用程序之间分享网页、文章或一些特定数据,但网页上一直缺失这个功能,Web Share API 就是为了解决网页分享而生,本文将会介绍 Web Share API 的基本用法和注意事项。 通过本文,我们能学习到: (1)Web Share API 的基本用法; (2)当前浏览器支持情况; (3)使用注意事项。

640?wx_fmt=png

Web Share API

Web Share API(https://wicg.github.io/web-share/)是一种允许网站调用操作系统的原生共享组件的方法,它设计的非常简单,只有一个方法 navigator.share(),它返回的是一个 Promise 对象,这种异步方式的优势是当分享动作发生时不会阻塞其他代码执行。该方法接收一个对象参数,对象包含 title, text, url 三个字段。目前 Web Share API 只支持纯文本分享,后续会支持图片和二进制文件的分享。

交互样式

因为使用的是系统原生组件,所有交互和 IOS/Android 一致: 1、用户点击网页上的分享按钮。 2、在页面底部调用起系统原生的分享组件。 3、用户选择目标应用程序。 4、将需要分享的数据信息传入所选的应用程序 。

640?wx_fmt=png

语法

navigator.share(options)

参数

参数是一个对象,且必须至少包含如下字段之一: (1)title (string): 分享网页的标题。 (2)text (string): 共享消息的主体文字,或者说说明文字。 (3)url (string): 分享的网址,当传递一个空字符串时,会取当前网页的 URL 。

返回值

返回一个 Promise 对象。 当用户在分享组件中选择一个分享的应用程序,并且应用程序成功接收分享数据时,会触发成功。下面的情况会导致分享失败: (1)传的参数不对。 (2)用户点击分享组件上的“取消”按钮。 (3)数据不能正常传递到目标应用程序。

示例代码

我们来看看代码长得什么样?

 
 
  1. shareButton.

<think>我们有一个Spring Boot和Vue项目,需要实现一键分享网页到飞书的功能。飞书分享功能通常通过生成分享链接或调用飞书Web SDK实现。根据飞书开放平台的文档,分享到飞书主要有两种方式: 1. 使用飞书分享组件(Web SDK) 2. 生成飞书分享链接(通过构造特定URL) 考虑到我们是在Vue前端实现分享功能,这里主要使用前端方式。但需要注意,飞书官方推荐使用Web SDK(https://open.feishu.cn/document/web-app/web-sdk/)来实现分享功能,因为这样可以直接调用飞书客户端的分享接口(如果用户在飞书客户端内打开)或者提供网页分享(如果用户在浏览器打开)。 然而,如果我们的应用不在飞书客户端内,也可以使用通用的分享链接方式,即构造一个URL,用户点击后跳转到飞书并打开分享对话框。 具体步骤: 一、前端Vue部分实现分享按钮和分享逻辑 1. 安装飞书Web SDK(如果使用SDK方式) 在Vue项目中,我们可以通过npm安装飞书Web SDK,或者直接在HTML中引入。 但是,飞书Web SDK目前没有npm包,所以通常采用在index.html中引入脚本的方式。 在public/index.html的head部分添加: ```html <script src="https://lf1-cdn-tos.bytegoofy.com/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.5.1.js"></script> ``` 2. 在Vue组件中,我们可以使用飞书SDK的`ready`事件来确保SDK加载完成,然后调用分享接口。 注意:飞书SDK要求我们在用户交互(比如点击事件)中调用分享接口,否则会被拦截。 3. 如果使用分享链接方式,则不需要引入SDK,直接构造一个URL即可。 二、两种分享方式的实现细节 方式一:使用飞书Web SDK(推荐在飞书客户端内使用) 步骤: - 在Vue组件中,创建一个按钮,绑定点击事件。 - 在点击事件中,判断是否在飞书客户端内(通过navigator.userAgent判断),如果在,则调用飞书SDK的分享方法;如果不在,则使用方式二(分享链接方式)。 - 飞书SDK分享示例代码: ```javascript // 在按钮点击事件中 handleShare() { // 判断是否在飞书内 const isInLark = navigator.userAgent.includes('Lark') || navigator.userAgent.includes('Feishu'); if (isInLark) { // 使用SDK分享 // 确保SDK已经加载,通常我们会在mounted中监听ready事件,但也可以在点击时检查 if (window.h5sdk && window.h5sdk.ready) { window.h5sdk.share({ title: '分享标题', content: '分享内容', url: window.location.href, // 分享的链接,当前页面链接 image: 'https://example.com/share.png', // 分享的图片 success: function() { console.log('分享成功'); }, fail: function(error) { console.log('分享失败', error); } }); } else { // 如果SDK未加载成功,则使用链接方式 this.shareByLink(); } } else { // 不在飞书内,使用链接方式分享 this.shareByLink(); } }, shareByLink() { // 构造飞书分享链接 const shareUrl = `https://applink.feishu.cn/client/chat/chatterShare?url=${encodeURIComponent(window.location.href)}&title=${encodeURIComponent('分享标题')}&content=${encodeURIComponent('分享内容')}`; // 打开新窗口或当前窗口跳转 window.open(shareUrl, '_blank'); } ``` 方式二:使用分享链接(通用方式) 飞书分享链接格式为: ``` https://applink.feishu.cn/client/chat/chatterShare?url=分享的链接&title=标题&content=内容 ``` 注意:参数需要encodeURIComponent编码。 三、后端Spring Boot部分 这个功能主要在前端实现,后端通常不需要额外工作。但如果需要生成分享卡片等高级功能,可能需要后端生成签名等,但简单的分享链接不需要。 四、注意事项 1. 飞书SDK在飞书客户端内才能调用成功,在外部浏览器会失败,所以需要做环境判断。 2. 分享链接方式在飞书客户端内也可以打开,但会跳转到飞书,然后打开分享对话框。而在外部浏览器,会提示用户下载飞书,所以体验不如在飞书内直接调用SDK。 3. 分享的图片、标题和内容需要根据实际需求设置。 五、完整Vue组件示例 下面是一个简单的Vue组件示例,实现分享按钮: ```vue <template> <button @click="handleShare">分享到飞书</button> </template> <script> export default { name: 'ShareToFeishu', methods: { handleShare() { const ua = navigator.userAgent; const isInLark = ua.includes('Lark') || ua.includes('Feishu'); if (isInLark) { // 在飞书内,尝试使用SDK if (window.h5sdk && window.h5sdk.ready) { this.shareBySDK(); } else { // 如果SDK未加载,可以尝试重新初始化(可选)或者直接使用链接 // 这里简单处理为使用链接 this.shareByLink(); } } else { this.shareByLink(); } }, shareBySDK() { window.h5sdk.share({ title: '分享标题', content: '分享内容', url: window.location.href, image: 'https://example.com/share.png', success: () => { console.log('分享成功'); }, fail: (error) => { console.error('分享失败', error); // 失败后使用链接方式 this.shareByLink(); } }); }, shareByLink() { const title = '分享标题'; const content = '分享内容'; const url = window.location.href; const shareUrl = `https://applink.feishu.cn/client/chat/chatterShare?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&content=${encodeURIComponent(content)}`; window.open(shareUrl, '_blank'); } }, mounted() { // 初始化飞书SDK(如果之前没有引入,则动态引入) if (!window.h5sdk) { // 动态加载飞书SDK const script = document.createElement('script'); script.src = 'https://lf1-cdn-tos.bytegoofy.com/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.5.1.js'; script.onload = () => { // SDK加载完成后,监听ready事件 window.h5sdk.ready(() => { console.log('飞书SDK已准备好'); }); }; document.head.appendChild(script); } else { // 如果已经存在,则直接监听ready事件 window.h5sdk.ready(() => { console.log('飞书SDK已准备好'); }); } } }; </script> ``` 六、关于Spring Boot部分 由于分享功能主要在前端,Spring Boot后端不需要特别处理。但如果有需求,比如生成分享内容的签名(用于分享卡片等高级功能),则需要在后端处理。不过,根据问题描述,我们只需要实现一键分享网页,所以前端实现即可。 七、测试 在飞书客户端内打开应用,点击分享按钮,应该会调用飞书的分享界面。 在外部浏览器,点击分享按钮,会跳转到飞书分享链接(如果安装了飞书则打开飞书,否则打开飞书官网或下载页面)。 八、注意事项 1. 飞书分享链接的参数中,url是必须的,title和content可选。 2. 分享链接的长度有限制,请注意不要过长。 根据以上步骤,我们就可以在Vue和Spring Boot项目中实现一键分享网页到飞书的功能。 参考文献: [飞书Web SDK文档](https://open.feishu.cn/document/web-app/web-sdk/) [飞书分享链接格式](https://open.feishu.cn/document/web-app/web-app-share) 注意:飞书分享链接的格式可能会更新,请以官方文档为准。 §§相关问题§§ 1. 如何在飞书内判断当前运行环境是否为飞书客户端? 2. 飞书分享功能支持哪些分享内容格式? 3. 如何实现分享到飞书群聊或单聊?</think>要在Vue和Spring Boot项目中实现一键分享网页到飞书的功能,需要结合飞书开放平台的分享API和前端集成。以下是完整的实现方案: ### 一、实现原理 1. **前端(Vue)**:处理用户点击分享按钮事件,调用飞书分享接口 2. **后端(Spring Boot)**:生成带签名的分享卡片数据(可选) 3. **飞书API**:使用[生成分享链接](https://open.feishu.cn/document/server-docs/im-v1/message-card/create-share-link)或[消息卡片API](https://open.feishu.cn/document/server-docs/im-v1/message-card/create) ### 二、具体实现步骤 #### 1. Vue前端实现(关键代码) ```vue <template> <button @click="shareToFeishu">分享到飞书</button> </template> <script> export default { methods: { async shareToFeishu() { // 1. 获取分享数据(从后端或直接构造) const shareData = { title: "网页标题", url: window.location.href, content: "分享描述内容", image: "https://example.com/thumbnail.png" }; // 2. 调用后端生成签名(如果需要) const res = await this.$axios.post('/api/feishu/share', shareData); // 3. 调用飞书JS-SDK分享 if (window.h5sdk) { window.h5sdk.share({ title: shareData.title, content: shareData.content, url: shareData.url, image: shareData.image, success: () => console.log("分享成功"), fail: (err) => console.error("分享失败", err) }); } else { // 备用方案:直接打开分享链接 window.open(`https://applink.feishu.cn/client/chat/chatterShare?url=${encodeURIComponent(shareData.url)}`); } } }, mounted() { // 动态加载飞书JS-SDK const script = document.createElement('script'); script.src = 'https://lf1-cdn-tos.bytegoofy.com/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.5.1.js'; script.onload = () => console.log("飞书SDK加载完成"); document.head.appendChild(script); } }; </script> ``` #### 2. Spring Boot后端实现(关键代码) ```java @RestController @RequestMapping("/api/feishu") public class FeishuController { @Value("${feishu.appId}") private String appId; @Value("${feishu.appSecret}") private String appSecret; // 生成分享签名 @PostMapping("/share") public ResponseEntity<Map<String, String>> generateShare(@RequestBody ShareRequest request) { // 1. 获取租户访问令牌 String accessToken = getTenantAccessToken(); // 2. 构造分享卡片(可选) JSONObject card = new JSONObject() .put("config", new JSONObject().put("wide_screen_mode", true)) .put("elements", new JSONArray() .put(new JSONObject() .put("tag", "div") .put("text", new JSONObject() .put("tag", "lark_md") .put("content", request.getContent())) ) ); // 3. 返回分享数据给前端 Map<String, String> response = new HashMap<>(); response.put("title", request.getTitle()); response.put("url", request.getUrl()); response.put("access_token", accessToken); response.put("card", card.toString()); return ResponseEntity.ok(response); } private String getTenantAccessToken() { // 调用飞书API获取token(需缓存) RestTemplate restTemplate = new RestTemplate(); JSONObject request = new JSONObject(); request.put("app_id", appId); request.put("app_secret", appSecret); ResponseEntity<String> response = restTemplate.postForEntity( "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal", request.toString(), String.class ); JSONObject json = new JSONObject(response.getBody()); return json.getString("tenant_access_token"); } } ``` #### 3. 配置文件 `application.yml` ```yaml feishu: appId: your_app_id # 飞书开放平台申请 appSecret: your_app_secret ``` ### 三、飞书平台配置 1. **创建企业自建应用**: - 登录[飞书开放平台](https://open.feishu.cn/) - 创建应用 → 获取App ID和App Secret - 启用"机器人"能力 → 添加消息卡片权限 2. **安全设置**: - 在"安全设置"中添加Web前端域名(如`https://yourdomain.com`) - 配置事件订阅URL(可选,用于接收回调) ### 四、部署注意事项 1. **前端部署**: ```bash npm run build # 将dist目录部署到Nginx ``` 2. **后端部署**: ```bash mvn clean package java -jar target/your-app.jar ``` 3. **跨域配置**(开发环境): ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // Vue开发地址 .allowedMethods("*"); } } ``` ### 五、功能扩展建议 1. **分享统计**:在分享成功后调用后端记录日志 2. **自定义卡片**:使用[消息卡片工具](https://open.feishu.cn/tool/cardbuilder)设计精美UI 3. **深度链接**:生成`applink.feishu.cn`链接直接打开飞书会话 > **注意**:飞书JS-SDK只能在飞书客户端内生效,外部浏览器需使用备用方案[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值