前端学习笔记——手机上的网页原生分享webshare

发表于 分类于 阅读次数：

花了几个小时，搞明白了一些东西

效果

详见alevel.tech。
当用户在手机上最新的主流浏览器上点击按钮时，可以实现调用手机原生分享功能↓
Imgur

但由于本API支持的浏览器主要为手机浏览器（电脑端除safari均不支持）所以还需要准备exception如下图↓
电脑效果

前言

为网页添加这个分享按钮的灵感来源于一个可以调用原生分享的插件。
alevel.tech所用的mdui前端框架虽然有javascript工具组件但是没有并没有包含Navigator.share()的使用方法或说明。于是笔者自行学习并为3个卡片添加了切实能用的分享按钮。
（备注：本人只是枚学生，轻喷……）

学习

通过MDN等文档的学习，总结出以下几个笔记要点：

  1. 通过id的方式将javascript绑定至不同按钮
  2. onclick()点击后进行Navigator.share()分享。
  3. 设置好要分享的title,URL,text等元素。暂时还没看懂files怎么传递。
  4. 准备一个exception，防止不支持的浏览器点击后无反应。

MDN的示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const shareData = {
  title: 'MDN',
  text: 'Learn web development on MDN!',
  url: 'https://developer.mozilla.org',
}

const btn = document.querySelector('button');
const resultPara = document.querySelector('.result');

// Must be triggered some kind of "user activation"
btn.addEventListener('click', async () => {
  try {
    await navigator.share(shareData)
    resultPara.textContent = 'MDN shared successfully'
  } catch(err) {
    resultPara.textContent = 'Error: ' + err
  }
});

实践

MDN的示例代码将所有button元素进行绑定，不过在实践中需要绑定单独的按钮，所以改为使用getElementById来绑定单独不同的按钮。
此外，由于分享内容是固定的文本，可以省去新建shareData常量这一步并直接填入。
下面是我实际使用的javascript代码，轻喷……

1
2
3
4
5
6
7
8
9
10

document.getElementById('shareForum').addEventListener('click', () => {try {
    navigator.share({
					title: '分享国交论坛',
                    text: '国交论坛，言论自由。',
                    url: 'https://forum.alevel.tech',
                })
	    
	} catch(err) {alert('当前所用浏览器没法分享');}
});

其中，shareForum是一个button元素的id

后记

今天 google 的七夕涂鸦使用的分享按钮并不支持原生分享，可见这个组件目前还不常用。