开发者社区> 天行无忌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

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

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

  • 浏览器API:是 JavaScript 可以正常使用的 API,允许开发人员轻松实现功能。 例如 DOMFetch、音频、视频、WebGLnotifications 等等
  • 第三方开发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 object
recognition.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分钟创建Serverless Job 定时获取新闻热搜》活动获奖公示
活动地址:https://developer.aliyun.com/adc/series/activity/serverlessjob
676 0
CDB断点调试器报错:Exception at 0x7715c5af, code: 0xe06d7363
CDB断点调试器报错:Exception at 0x7715c5af, code: 0xe06d7363
414 0
直播成今年移动APP大热门,直播带货app源码的开发有何亮点
要说今年移动APP的大热门,除了手游以外就是直播APP,随着移动互联网的深入发展,直播行业在手机端极其普及,因为巨大的流量,直播行业也创造了巨大的商业价值,促进了国内经济内循环,也解决了很多的就业问题,也让很多公司萌生了开发直播商城带货的想法,那么直播带货app源码的开发有何功能亮点呢?
1559 0
《iOS取证实战:调查、分析与移动安全》一3.5 存储器类型
本节书摘来自华章出版社《iOS取证实战:调查、分析与移动安全》一书中的第3章,第3.6节,作者(美)Andrew Hoog Katie Strzempka,更多章节内容可以访问云栖社区“华章计算机”公众号查看
988 0
《iOS取证实战:调查、分析与移动安全》一3.9 参考文献
本节书摘来自华章出版社《iOS取证实战:调查、分析与移动安全》一书中的第3章,第3.9节,作者(美)Andrew Hoog Katie Strzempka,更多章节内容可以访问云栖社区“华章计算机”公众号查看
853 0
《iOS取证实战:调查、分析与移动安全》一1.5 参考文献
本节书摘来自华章出版社《iOS取证实战:调查、分析与移动安全》一书中的第1章,第1.5节,作者(美)Andrew Hoog Katie Strzempka,更多章节内容可以访问云栖社区“华章计算机”公众号查看
822 0
阿里33万悬赏AI团队 用算法提升电网调控能力
智东西4月26日消息,阿里云2017云栖大会的第二场今天在江苏省会南京正式召开。大会以人工智能、云计算等技术核心,重点探讨了技术在智慧城市、工业制造方面的应用。 会上,阿里云天池平台还联合扬中高新区政府、大航集团,启动首个电力AI大赛——大航杯“智造扬中”电力AI大赛。
1516 0
移动端Web开发调试之Weinre调试教程
原文地址:http://blog.csdn.net/freshlover/article/details/42640253 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。
1348 0
移动端webapp开发必备知识
<p>原文地址:http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html</p> <p></p> <p style="margin-top:0px; margin-bottom:24px; font-family:微软雅黑,Helvetica,'Heiti SC',sans-serif; font-si
1603 0
+关注
天行无忌
技术改变生活、研发构建未来、细节铸造品质!
255
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载