在学习和使用 ASP.NET Web API 之前，最好先对 RESTful 有所了解。它是一种软件架构风格、设计风格，而不是标准。
推荐视频教程：https://www.imooc.com/learn/811
讲师：会飞的鱼Xia
需时：2小时25分
REST API 测试工具：
在 Chrome 网上应用店中搜索：Restlet Client
或网站 https://client.restlet.com
>>> 资源路径
SCHEME :// HOST [ ":" PORT ] [ PATH [ "?" QUERY ]]
其中 PATH 中的资源名称应该使用复数名词，举例：
GET https://xoyozo.net/api/Articles/{id}
POST https://xoyozo.net/api/Articles
>>> HTTP verb（对应 CURD 操作）：
| 方法 | 功能 | ASP.NET Web API 接口返回类型（一般的） |
|---|---|---|
| GET | 取一个或多个资源 | T 或 IEnumerable<T> |
| POST | 增加一个资源 | T |
| PUT | 修改一个资源 | T |
| DELETE | 删除一个资源 | void |
| PATCH | 更新一个资源（资源的部分属性） | |
| HEAD | 获取报头 | |
| OPTIONS | 查询服务器性能或资源相关选项和需求 |
>>> 过滤信息：
如分页、搜索等
>>> 常用状态码：
| 200 | OK | 指示请求已成功 |
| 201 | Created | 资源创建成功（常见用例是一个 PUT 请求的结果） |
| 202 | Accepted | 该请求已被接收但尚未起作用。它是非承诺的，这意味着HTTP中没有办法稍后发送指示处理请求结果的异步响应。 |
| 204 | No Content | 成功 PUT（修改）或 DELETE（删除）一个资源后返回空内容（ASP.NET Web API 中将接口返回类型设置为 void 即可） |
| 400 | Bad Request | 服务器无法理解请求（如必填项未填、内容超长、分页大小超限等），幂等 |
| 401 | Unauthorized | 未授权（如用户未登录时执行了须要登录才能执行的操作），通俗地讲，是服务器告诉你，“你没有通过身份验证 - 根本没有进行身份验证或验证不正确 - 但请重新进行身份验证并再试一次。”这是暂时的，服务器要求你在获得授权后再试一次。 |
| 403 | Forbidden | 服务器理解请求但拒绝授权（是永久禁止的并且与应用程序逻辑相关联（如不正确的密码、尝试删除其它用户发表的文章）、IP 被禁止等），通俗地讲，是服务器告诉你，“我很抱歉。我知道你是谁 - 我相信你说你是谁 - 但你只是没有权限访问此资源。” |
| 404 | Not Found | 找不到请求的资源（指资源不存在，如果找到但无权访问则应返回 403） |
| 405 | Method Not Allowed | 请求方法被禁用（HTTP 动词） |
| 500 | Internal Server Error | 服务器遇到阻止它履行请求的意外情况（如数据库连接失败） |
| 503 | Service Unavailable | 服务器尚未准备好处理请求（常见原因是服务器因维护或重载而停机，这是临时的，可用于在单线程处理事务时遇到被锁定时的响应，如抽奖活动、抢楼活动，防止因并发导致逻辑错误） |
>> 错误处理：
C# 例：throw new HttpResponseException(HttpStatusCode.NotFound);
PHP 例：throw new Exception('文章不存在', 404);
>>> 返回结果：
JSON/XML
不要返回密码等机密字段
>>> 其它：
身份验证窗口（浏览器弹窗，类似 alert，非页面表单），明文传输，安全性不高，不建议使用。实现：
在 Headers 中添加 Authorization:Basic “用户名:密码”的 Base64 编码
收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档，浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
| Angular、中文版 AngularJS (version 1.x) | 一套框架，多种平台同时适用手机与桌面 | MVC 架构，使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易 |
| Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
| Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程，主题和模板 |
| jQuery UI | 为 jQuery 提供更丰富的功能 | 示例：Datepicker、Color Animation、Shake Effect |
| 功能 | ||
| jQuery File Upload | jQuery 文件上传 | 英文文档 |
| jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持，文档 |
| json2.js | json 操作库 | 已弃用，旧 IE 用 jQuery 的 parseJSON，HTML 5 用 JSON.parse |
| Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
| Swiper、中文版 | 最现代的移动触摸滑块（Most Modern Mobile Touch Slider） | 英文文档，中文文档，旧浏览器支持版本：2.x.x，Swiper 2 英文文档，中文文档 |
| jquery-cropper | 图片裁剪 | |
| FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法，不应用的场景 |
| PACE | 页面加载进度条 | 文档，IE8+ |
| toastr | jQuery 通知 | 文档 |
| Autosize | 一款小巧的，可自动调整 textarea 高度的独立脚本 | IE9+ |
| X-editable | 允许您在页面上创建可编辑元素 | 文档，Demo |
| select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
| jQuery Tags Input | 标签输入框 | 用法 |
| Viewer.js | 图片浏览插件 | GitHub（viewerjs）、GitHub（jquery-viewer） jquery-viewer 是 viewerjs 的 jQuery 插件，即在 jQuery 环境中要同时引用这两个脚本。 |
| PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
| 编辑器 | ||
| UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
| 日期时间 | ||
| bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
| DateTimePicker | 日期时间选择 | |
| MultiDatesPicker | 多日期选择 | |
| FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
| TimeTo | 计时、倒计时 | |
| 图表 | ||
| D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。 | |
| Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
| ECharts | 百度图表控件 | |
| AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
| SyntaxHighlighter | 功能齐全的代码语法高亮插件（JS） | |
| 动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码，非插件，修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
| 图标 | ||
| Font Awesome | 完美的图标字体 | IE 8+，v3.2.1 支持 IE 7，进阶用法（定宽/边框/动画/旋转/叠加） |
| Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
| Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon，也可将图标转换为字体，便于前端工程师自由调整与调用 |
| UI 框架 | ||
| WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
| Apple UI Design Resources | 苹果用户界面设计资源 | |
各位站长好：
根据苹果相关通知，从2017年1月1日起，所有上架AppStore的应用必须支持https协议。
仍然采用HTTP传输的站点APP，将无法在AppStore被用户下载使用，也无法进行升级更新等工作。
官方视频
https://developer.apple.com/videos/play/wwdc2016/706/
相关新闻
http://www.chinaz.com/news/2016/1028/602635.shtml
根据AppStore审核要求，站长需要在2017年1月1日之前，在APP服务器全面部署https。
尽管不升级支持https后果严重，但诸位也不必太过担心，马甲根据要求为各位提供一份服务器升级https的技术文档，供您参考。
https的优点：
1. 相对于http，https可以确保数据在网络传输过程中不被篡改(如禁止运营商插入广告)，同时可以提升网站的安全性。
2. iOS可以实现微信内部浏览器直接启动并打开App对应页面。
APP网站升级https步骤：
1. 为APP域名申请购买SSL证书（可选免费型）；
2. 将SSL证书部署到APP站点。
https证书申请方法：
1. 进入阿里云（独立服务器客户可注册一个阿里云账号，无须购买阿里云主机）https证书申请页面 https://www.aliyun.com/product/security/markets/aliyun/product/cas
2. 购买https证书，选择免费类型，点击购买（无需实际付款)
3. 购买完成后，进入控制台-CA证书服务页面，找到证书订单，点击“补全”
4. 填写证书对应的域名信息，免费证书只能用于一个域名(请填写完整域名例如：test.magapp.cc 而不是 magapp.cc)
5. 继续补全证书信息，注意域名验证类型选择DNS，邮箱填写自己常用邮箱即可，稍后系统会往邮箱发送域名解析信息。
6. 下一步生成证书请求文件(CSR)，这里建议选择“系统生成CSR”，点击右侧创建，创建完成后，点击提交审核，开始申请https证书。
7. 稍后系统会向邮箱发送一份该邮件，邮件包含需要在域名管理后台解析的信息。
8. 到域名管理后台添加新的域名解析，注意解析类型为CNAME
9. 添加新域名解析完成后，系统会对您的申请进行审核（审核时间在几分钟到几个小时不确定），如果审核成功系统会为你签发https证书，失败也会有相关原因说明，如果失败可根据提示重新申请。
10. https证书申请成功后，下一步就可以下载并部署到APP服务器。
11. 点击下载后，可以根据阿里云提供的部署文档，进行相关的服务器部署工作。
12. 部署完成后，验证是否部署成功
第一步：使用https协议访问域名是否能正常访问，例如 https://test.magapp.cc
第二步：在线检测域名是否满足苹果审核要求，网址为：https://www.qcloud.com/product/ssl.html#userDefined10
填写自己申请https的域名
如果域名检测各项满足会显示如下图所示
部署注意事项：
1. https使用的是443端口而不是默认的80端口，需要在wdcp安全管理-iptables开启443端口。
2. https免费证书有效期为一年，请各位站长作好记录，提前重新申请。
3. 站点从http转到https完全过渡需要一段时间，建议在部署时站点同时支持http和https。
4. 部署过程遇到任何问题，可联系您的专属运维人员。
MAGAPP技术部
如果使用了 loop 属性，那么视频播放结束时不会触发 onended 事件。
如果使用了 loop 属性，则任何时候获取 ended 值都是 false；如果不使用 loop，但在 onended 事件中重新 play()（或者在添加了属性 autoplay 的情况下更换 src 值），那么中间会有大概 3 毫秒的时间拿到的 ended 值是 true。
播放过程中更改 src 值并不会触发 onended 事件，因为还没有播放结束。如果设了 autoplay，那么更改 src 值后会自动播放，播放结束后仍然会触发 onended（前提是没有设置 loop）。
更多请参考：
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
海鲜大部分是冷冻包装产品，小部分是散装称重产品，与超市类似，应选择“商超版”，除了钱箱、扫描枪，还应接电子秤。
触摸屏
不用记键盘快捷键，商品少的话直接点选，连扫码、输码、搜索都省了
好用的收银软件
见下方表格
称重一体
散装商品方便取重
Windows 7 及以上版本 或 安卓 操作系统
安心连网，用于支付宝/微信收款，方便连锁店共享数据。选择 Windows 的话建议选到 win10，因为 win7 将在 2020 年停止支持；新的收银机基本用的安卓，可能因为各种成本低吧，不过听说安卓收银机会卡顿，类似于安卓手机的操作感，核心数和内存跟PC也不是一个概念。
固态硬盘
Windows 建议选固态，开机快；安卓是闪存
销售过程中任何时间使用会员卡，而不是必须先扫会员卡，再扫商品
标签打印机，支持打印价格签（不干胶热敏纸条码），称重商品需要贴上即时生成的条码
支持扫描枪或扫码器扫描客户手机上的支付宝、微信（动态）付款码，以规避客户使用支付成功的截图来欺骗。需要一些配置，提现扣手续费。
支持拼音简码销售
选购步骤 先选择适合自己的收银软件，再选择配置和外观，当然要考虑外接设备的兼容性（电子秤同步称重、软件开钱箱、是否需要标签打印机或后厨打印机、扫描枪是否需要支持支付宝微信 等等）。
注：标签打印机不同于小票打印机，前者用于打印临时标签，可以包含名称、价格、重量、条码等信息，贴于散装称重商品，需选购；后者打印小票给顾客提供购买商品的明细，一般收银机自带。
附：几大收银软件功能对比（从商超的角度分析）注：部分功能可能因配置不同而不同，具体应咨询客服。
| 二维火 | 来钱快 | 美团收银 | |
| 版本 | 餐饮版 商超版 奶茶版：适用连锁店 | 基础版：适用餐饮 零售版：适用超市 专业版：适用连锁餐厅 | |
| 操作系统 | 安卓 | 安卓 | 安卓 |
| 适配触摸屏 | √ | √ | √ |
| 扫描商品条码、支付二维码 | √ | √ | √ |
| 对接外卖平台 | 美团外卖、饿了么、百度外卖 | 美团外卖、饿了么 | 美团外卖 |
| 手机下单 | √ | 免费微店、客户自助点餐 | 收银机点餐、顾客扫码点餐、服务员点餐 |
| 收银方式 | 聚合支付、支付宝、微信、现金 | 现金、支付宝、微信、银联、优惠券组合付款 | 现金、支付宝、微信、优惠券、会员、记账 |
| 会员功能 | 会员等级、积分、折扣、微信公众号营销 | 会员等级、充值、积分、折扣、俏销短信、报表 | 短信、储值、积分 |
| 支持手机 | 火掌柜App | 来钱快App 收银助手 | 美团管理APP |
| 报表 | √ | √ | √ |
| 自制条码（接标签打印机） | 商超版、奶茶版支持 | ||
| 盘点库存 | √ | 手机操作 | 电脑端 |
| 对接电子秤 | √ | 商超版支持 | |
| 连锁店管理 | √ | √ | 专业版支持 |
| 其它特点 | 排队叫号； 自主微信公众号粉丝运营； 小程序点餐 | 免费微信店铺，推广公众号 | 提高美团和大众点评店铺人气； 排队软件； 一店多收银台； |
售价 | 买收银机赠（零售 488 元），免费升级，连锁版每用户 599 元 | 零售版和基础版免费（买收银机赠），专业版收费 | |
| 相关链接 | 来钱快： 杭州萨宝科技： 软件和驱动： | 官方网站： 视频教程： http://shouyin.meituan.com/productGuide | |
| 我的评价 | 界面拟物还不错，具体没有深究 | 公司没有美团有名，但是入行比美团早，产品成熟，创新力强 | 可能更适合于奶茶店类型，对打包、外卖完美适用，有机会试用的话可以给出更客观的评价 |
本文资料整理于 2018 年 7 月
舟山海鲜捕鱼人品牌诚招代理，电话：13646674565（微信同号）
介绍一种不需要数据线，也不需要第三方软件（如 iTools）的方法，但还是要用到电脑，不能完全在手机上实现。
1, 电脑上安装微信 Windows 版。
2, 打开并登录微信 Windows 版，点开小视频，如果找不到小视频，可以在手机微信上将该小视频“发送给朋友”，选择“文件传输助手”或其他好友，这样电脑上就可以看到这个视频了。
3, 打开“我的电脑”或“计算机”或“这台电脑”或“此电脑”，打开左侧的“文档”目录，找到“WeChat Files”文件夹，进入以自己微信号命名的文件夹，进入“Video”目录，就可以看到 .mp4 格式的视频文件了，将这个文件拖到微信聊天窗口，发送。
4, 手机微信上点开这个视频，“收藏”。
5, 进入“我”-“收藏”，打开这个视频，就可以选择“分享到朋友圈”了。
6, 如果上一步没有“分享到朋友圈”这个选项，那么选择“保存视频”，还是找到好友“文件传输助手”，点加号，照片，点击视频，确定，发送。
7, 打开视频，长按，收藏。
8, 重复第 5 步。
| 软件名称 | 价格 | 软件介绍 |
|---|---|---|
| ProPresenter | 试用 / $399 | 一款跨平台（Mac、Windows），专为高品质现场（包括晚会、体育赛事、会议等）打造字幕及多媒体展示的软件。 （试用版是全功能的，但输出窗口有水印，试用期两周） |
| Sports Sounds Pro | 免费 / $149.95 | 一款专业用于现场事件的音控软件。 （免费版是全功能的，仅有一些限制，比如：只能播放 10 组中每组的前 3 页的第 1 行，而且只能放置 180 个按钮） |
| Miro Video Converter | 免费 | 可以导出兼容 HTML5 网页播放的视频格式（.mp4）。 |
| Vistumbler | 免费 | 无线网络扫描工具。 |
| VNC | 免费 / $30 / $40 | Mac 上优秀的远程桌面软件。 |
| 免费 | 快速扫描目录大小和空间占用 | |
| IconWorkshop | 试用 / 购买 | 优秀的 ICO、ICON 制作软件，专业图标制作，编辑，转换工具 |
| $19 / $59 | 功能强大的数字音乐编辑器，是一个集声音编辑、播放、录制和转换的音频工具。 | |
| EasyRecovery | EasyRecovery 是由全球著名数据厂商 Kroll Ontrack 出品的一款数据文件恢复软件。支持恢复不同存储介质数据：硬盘、光盘、U盘、移动硬盘、数码相机、手机、Raid 文件恢复等，能恢复包括文档、表格、图片、音视频等各种文件。 | |
| DiskGenius | 一款专业级的数据恢复软件，算法精湛、功能强大！支持多种情况下的文件丢失、分区丢失恢复；支持文件预览；支持扇区编辑、RAID 恢复等高级数据恢复功能。 | |
| sagethumbs | 免费 | 预览 PSD 文件 |
| WebP Codec for Windows | 免费 | 预览 WebP 文件 |
| ventoy | 免费 | 多系统启动U盘解决方案 |
刷机前
备份资料
- 用 iCloud 备份数据，或：
- 照片、视频、录音：直接拷出来
- 通讯录：QQ通讯录
- 短信：万一有券号或重要资料等信息
- 备忘录：可能记着一些东西
- 闹钟：记在纸上或截图，刷完重新设置
- 应用：用 iTools 备份（含文档）
刷机
准备软件
刷机
- 打开 iTunes
- 选择要刷机的设备
- 按住 Shift 点击恢复
- 选择固件
- 等待完成
这里仅记录我个人的安装过程，仅供参考。
安装前的准备
手动备份：数据库、浏览器收藏夹、FTP 站点、Navicat 连接、远程桌面、RaiDrive（点登录）、RSS源、虚拟机镜像、“下载”目录、“桌面”目录、开机启动程序、iPhone 备份（C:\Users\[用户名]\Apple\MobileSync\Backup）、浏览器插件、自动备份中的差异化文件。
推荐的 Edge 扩展（登录账号会自动同步）：Charset、Feedbro、IP Address and Domain Information、Kimi 浏览器助手、JSONView、Pretty Js、User-Agent Switcher and Manager、Wappalyzer、凌风云网盘助手、图片助手(ImageAssistant) 批量图片下载器、猫抓、网页更新提醒
桌面图标和开始菜单截图。桌面如果是手动排序图标的，先按分类归入文件夹，以方便系统恢复后按分类摆放。
备份：桌面、Chrome 用户目录、聊天记录、快捷回复、项目、hosts 文件。
像 QQ、TIM、微信、旺旺、千牛 等即时聊天工具，最好将数据文件目录拷贝一份（包含图片视频等），再打开软件登录帐号进行记录备份（一般不含图片视频等）。这样，在重装系统后，如果还原拷贝的聊天文件不能供聊天软件使用，可以用备份数据恢复。
备份剪映目录，否则重装后需要重新下载素材/字体等，位置：C:\用户\AppData\Local\JianyingPro\User Data\
备份到移动硬盘或 NAS
排查以上未提及的新软件或新设置是否有需要处理或备份的。
清空回收站
确定系统盘所在硬盘和分区和大小，避免在格式化时选错硬盘分区。
外星人电脑开机按 F2 进入 BIOS，F12 选择启动设备。
设置
这台电脑（右键）- 属性 - 高级系统设置 - 高级 - 性能设置 - 高级 - 更改 - 去掉“自动管理所有驱动器的分布文件大小”前的勾，选择 SSD 分区的分布文件为系统管理的大小，点设置，其它分区无分布文件，点设置 - 确定
以上是在 SSD 空间足够的情况下，如果不足，那么可以分配到其它分区。
Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）
安装驱动
目前的 Windows Update 已经可以安装大部分驱动了，如果设备管理器中还有警示图标，或者有些硬件功能不能启用，那么可以前往对应品牌的官网下载，如联想驱动安装工具、戴尔驱动程序，其它可使用驱动精灵。
安装 Office
安装 Office 批量授权版
立即安装即可，不要更改路径。
恢复数据
Chrome 目录（C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\Default\）
QQ 记录（默认路径：C:\Users\[用户名]\Documents\Tencent Files）
微信记录（默认路径：C:\Users\[用户名]\Documents\WeChat Files），微信记录可能会不能使用
视情况删除非系统盘的 \Program Files、\Program Files (x86)、\Users\xoyozo\AppData 等
应用程序
安装 Edge。
先安装 SQL Server，再安装 Visual Studio（如欲同时安装低版本 VS，先安装低版本，再安装高版本）
安装 Adobe
安装其它软件
替换 hosts，若出现安全软件警告，信任即可。
激活 Windows、Office、Adobe 等：
嗯
细节
Win10 任务栏单击“文件资源管理器”打开“此电脑”的设置方法：打开任意文件资源管理器窗口，菜单 - 查看 - 选项，将“打开文件资源管理器时打开”改为“此电脑”
Win10 任务栏日期显示星期：控制面板 - 更改日期、时间和数字格式 - 其他设置 - 日期，将短日期改为：yyyy/M/d ddd
随系统启动程序的目录（所有用户）：C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp
随系统启动程序的目录（单个用户）：C:\用户\[用户名]\AppData\Roaming\Microsoft\Windows\「开始」菜单\程序\启动，（即：C:\Users\[用户名]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup）
自带的微软五笔已经提供五笔拼音混打了，所以抛弃QQ五笔了
设置 Navicat 自动运行。
设置电源相关
SQL Server 按需设置启动/禁用：SQL Server 配置管理器 - SQL Server 服务 - 右侧双击选择实例 - 切换到“服务”选项卡 - 启动模式
编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。
十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；
十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；
八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；
六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；
四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；
二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；
如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？
没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。
目录：
一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
一、让音乐随心而动 – 音频处理 Web audio API
简介：
Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。
系统要求：
ios6+、android chrome、android firefox
实例：
http://sy.qq.com/brucewan/device-api/web-audio.html
核心代码：
var context = new webkitAudioContext();
var source = context.createBufferSource(); // 创建一个声音源
source.buffer = buffer; // 告诉该源播放何物
createBufferSourcesource.connect(context.destination); // 将该源与硬件相连
source.start(0); //播放
技术分析：
当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如
1、源节点（source node）
我们可以使用两种方式加载音频数据：
<1>、audio标签
var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
sound = context.createMediaElementSource(audio);
sound.connect(context.destination);
});
audio.src = '/audio.mp3';
<2>、XMLHttpRequest
var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
context.decodeAudioData(request.response, function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
}
}
xhr.send();
2、分析节点（analyser node）
我们可以使用AnalyserNode来对音谱进行分析，例如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
// 将dataArray数据以canvas方式渲染出来
};
draw();
3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）
不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。
需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
4、目的节点（destination node）
所有被渲染音频流到达的最终地点
思维发散：
1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。
看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html
二、捕捉用户摄像头 – 媒体流 Media Capture
简介：
通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。
系统要求：
android chrome、android firefox
实例：
捕获用户摄像头 捕获用户麦克风
http://sy.qq.com/brucewan/device-api/camera.html
http://sy.qq.com/brucewan/device-api/microphone-usermedia.html
核心代码：
1、摄像头捕捉
navigator.webkitGetUserMedia ({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, function(e){
})
2、从视频流中拍照
btnCapture.addEventListener('touchend', function(){
if (localMediaStream) {
canvas.setAttribute('width', video.videoWidth);
canvas.setAttribute('height', video.videoHeight);
ctx.drawImage(video, 0, 0);
}
}, false);
3、用户声音录制
navigator.getUserMedia({audio:true}, function(e) {
context = new audioContext();
audioInput = context.createMediaStreamSource(e);
volume = context.createGain();
recorder = context.createScriptProcessor(2048, 2, 2);
recorder.onaudioprocess = function(e){
recordingLength += 2048;
recorder.connect (context.destination);
}
}, function(error){});
4、保存用户录制的声音
var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;
思维发散：
1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。
三、你是逗逼？ – 语音识别 Web Speech API简介：
1、将文本转换成语音；
2、将语音识别为文本。
系统要求：
ios7+，android chrome，android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/microphone-webspeech.html
核心代码：
1、文本转换成语音，使用SpeechSynthesisUtterance对象；
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
2、语音转换为文本，使用SpeechRecognition对象。
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
final_transcript += event.results[i][0].transcript;
}
};
测试结论：
1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。
思维发散：
1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。
四、让我尽情呵护你 – 设备电量 Battery API简介：
查询用户设备电量及是否正在充电。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/battery.html
核心代码：
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
str += '<p>你的浏览器支持HTML5 Battery API</p>';
if(battery.charging) {
str += '<p>你的设备正在充电</p>';
} else {
str += '<p>你的设备未处于充电状态</p>';
}
str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}
测试结论：
1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。
思维发散：
相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。
五、获取用户位置 – 地理位置 Geolocation简介：
Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。
系统要求：
ios6+、android2.3+
测试实例：
http://sy.qq.com/brucewan/device-api/geolocation.html
核心代码：
var domInfo = $("#info");
// 获取位置坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}
// 使用腾讯地图显示位置
function showPosition(position) {
var lat=position.coords.latitude;
var lon=position.coords.longitude;
mapholder = $('#mapholder')
mapholder.style.height='250px';
mapholder.style.width = document.documentElement.clientWidth + 'px';
var center = new soso.maps.LatLng(lat, lon);
var map = new soso.maps.Map(mapholder,{
center: center,
zoomLevel: 13
});
var geolocation = new soso.maps.Geolocation();
var marker = null;
geolocation.position({}, function(results, status) {
console.log(results);
var city = $("#info");
if (status == soso.maps.GeolocationStatus.OK) {
map.setCenter(results.latLng);
domInfo.innerHTML = '你当前所在城市: ' + results.name;
if (marker != null) {
marker.setMap(null);
}
// 设置标记
marker = new soso.maps.Marker({
map: map,
position:results.latLng
});
} else {
alert("检索没有结果，原因: " + status);
}
});
}
测试结论：
1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。
六、把用户捧在手心 – 环境光 Ambient Light简介：
Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/ambient-light.html
核心代码：
这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。
var domInfo = $('#info');
if (!('ondevicelight' in window)) {
domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
var lightValue = document.getElementById('dl-value');
window.addEventListener('devicelight', function(event) {
domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
document.body.style.backgroundColor = backgroundColor;
if(event.value < 50) {
document.body.style.color = '#fff'
} else {
document.body.style.color = '#000'
}
});
}
思维发散：
该接口适合的范围很窄，却能做出很贴心的用户体验。
1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；
2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；
3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。
参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/