移动 WEB 开发会用到的 5 个 API

devpoint

关注

发布于: 3 小时前

作为开发人员，经常使用 Web API 来轻松实现复杂的功能，或者创建它们来抽象复杂性。Web API 允许服务之间进行对话，分享信息到朋友圈或显示地图等操作。

可以将用于构建客户端 Web 应用程序的 Web API 分为两类：

浏览器 API：是 JavaScript 可以正常使用的 API，允许开发人员轻松实现功能。例如 DOM、Fetch、音频、视频、WebGL、notifications 等等
第三方开发 API ：这些接口通常不是内置在浏览器中的，但是由第三方平台提供的在特定环境中可以使用的 API，如微信、微博分享等等

下面总结 Web 项目中经常接触到的 API：

地理位置 API：允许访问检索主机设备的位置信息
文档对象模型 API：DOM 是 HTML 文档的 API，它是 JavaScript 和 HTML 文档之间的接口，有着大量的接口列表，例如 Document 对象接口、Window 对象接口等
历史记录 API：在大多数路由器实现中都是抽象的。该 API 能够跟踪和修改浏览器的 URL 和历史记录，以及通过 JavaScript 访问浏览历史
画布 API：允许通过使用 <canvas> 元素在页面上显示不同的视觉图形，对于 HTML 游戏和图表很有用
动画 API：支持在页面上进行协调的视觉更改，它结合了 CSS 过渡/动画和基于 javascript 的动画的优点。

在本文中，将探索一些提供移动友好功能的 API，包括从社交媒体分享和剪贴板操作到联系选择器、语音和通知功能相关的内容。下面就来总结一下移动 WEB 的开发常用的 API。

分享 API

可以在网站上实现共享功能，它给人一种移动本地共享的感觉，可以共享文本、文件和设备上其他应用程序的链接。

可以通过 navigator.share 方法访问：

if (navigator.share) {    navigator        .share({            title: "DevPoint开发技能分析",            text: "WEB开发技能分析总结",            url: "https://www.devpoint.cn",        })        .then(() => console.log("分享成功"))        .catch((error) => console.log("分享失败", error));}

复制代码

上面的代码片段实现了如何使用普通的 JavaScript 共享文本，下面定义一个方法，返回按钮并完成绑定 onclick 事件：

import React from "react";function ShareButton({ label, text, title }) {    const shareDetails = { title, text };
    const handleSharing = async () => {        if (navigator.share) {            try {                await navigator                    .share(shareDetails)                    .then(() => console.log("分享成功"));            } catch (error) {                console.log(`分享失败：${error}`);            }        } else {            console.log("此浏览器目前不支持");        }    };    return (        <button onClick={handleSharing}>            <span>{label}</span>        </button>    );}export default ShareButton;

复制代码

联系选择器 API

大多数移动应用程序可能都会涉及访问联系人信息，可以使用 navigator.contacts 实现，它接受两个参数：属性、一个包含要访问的属性的数组和选项。

const props = ["name", "tel"];const opts = { multiple: true };
async function getContacts() {    try {        const contacts = await navigator.contacts.select(props, opts);        handleResults(contacts);    } catch (ex) {        // 错误    }}

复制代码

剪切板 API

剪贴板操作，如复制、剪切和粘贴，是移动应用程序中最常见的功能。剪贴板 API 允许 web 用户访问系统剪贴板并执行基本的剪贴板操作。

过去可以使用 DOM 对象的 document.execCommand 与系统剪贴板进行交互。但是，最新的异步剪贴板 API 提供了直接读取和写入剪贴板内容的访问权限，更加详细的介绍可以参阅《WEB 剪切板操作navigator.clipboard的使用》。

语音 API

如今，大多数移动应用程序都加入了语音识别和文本转换语音功能，以改善易用性和用户体验，语音 API 为浏览器带来了这些功能。在本文中，只讨论语音识别 SpeechRecognition 接口，使用语音识别接口进行语音识别，使用设备默认的语音识别系统：

const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;const recognition = new SpeechRecognition(); // new SpeechRecognition objectrecognition.continuous = false;recognition.lang = "cn-ZH";recognition.interimResults = false;
recognition.onstart = function () {    console.log("请对着麦克风说话");};
recognition.onspeechend = function () {    // 当用户完成说话    recognition.stop();};
// 当语音识别服务返回结果时运行recognition.onresult = function (event) {    var transcript = event.results[0][0].transcript;    var confidence = event.results[0][0].confidence;};
// 开始识别recognition.start();

复制代码

通知 API

Notification API 经常与 Push API 互换，但它们是不同的。Notification API 的目标是向用户显示信息，而Push API允许 service worker 处理来自服务器的推送消息，即使设备处于非活动状态。

现在博客和 Web 应用广泛使用这种方法，当服务有变化或更新时通知用户。这个 API 的一个常见情况是，当的应用程序是 PWA，需要用户刷新浏览器以获得新的应用程序更新。

JavaScript 有一个 Notification 构造函数：

const message = "升级获取新功能";const notification = new Notification("保存PWA应用", { body: text });

复制代码

总结

在本文中，简单总结了一下 Web 项目开发常用的 API 及移动应用开发相关的 API。

发布于: 3 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/193850268ed6ca9d6cd00521e】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

移动 WEB 开发会用到的 5 个 API

分享 API

联系选择器 API

剪切板 API

语音 API

通知 API

总结

devpoint

评论