本文不定时更新中……

具备 RESTful 相关知识会更有利于学习 ASP.NET Web API：RESTful API 学习笔记

ASP.NET Web API 官网：https://www.asp.net/web-api

服务 URI Pattern

Action	Http verb	URI	说明
Get contact list	GET	/api/contacts	列表
Get filtered contacts	GET	/api/contacts?$top=2	筛选列表
Get contact by ID	GET	/api/contacts/id	获取一项
Create new contact	POST	/api/contacts	增加一项
Update a contact	PUT	/api/contacts/id	修改一项
Delete a contact	DELETE	/api/contacts/id	删除一项

返回类型	Web API 创建响应的方式
void	返回空 204 （无内容）
HttpResponseMessage	转换为直接 HTTP 响应消息。
IHttpActionResult	调用 ExecuteAsync 来创建 HttpResponseMessage，然后将转换为 HTTP 响应消息。
其他类型	将序列化的返回值写入到响应正文中;返回 200 （正常）。

HttpResponseMessage

可提供大量控制的响应消息。 例如，以下控制器操作设置的缓存控制标头。

public class ValuesController : ApiController
{
    public HttpResponseMessage Get()
    {
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value");
        response.Content = new StringContent("hello", Encoding.Unicode);
        response.Headers.CacheControl = new CacheControlHeaderValue()
        {
            MaxAge = TimeSpan.FromMinutes(20)
        };
        return response;
    } 
}

IHttpActionResult

public IHttpActionResult Get (int id)
{
    Product product = _repository.Get (id);
    if (product == null)
    {
        return NotFound(); // Returns a NotFoundResult
    }
    return Ok(product);  // Returns an OkNegotiatedContentResult
}

其他的返回类型

响应状态代码为 200 （正常）。此方法的缺点是，不能直接返回错误代码，如 404。 但是，您可以触发 HttpResponseException 的错误代码。

完善 Help 页

一般都是通过元数据注释（Metadata Annotations）来实现的描述的。

显示接口和属性的描述：

打开 HelpPage 区域的 App_Start 目录下的 HelpPageConfig.cs 文件，在 Register 方法的首行取消注释行：

config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));

在项目右键属性“生成”页，勾选“XML 文档文件”，并填写与上述一致的路径（App_Data/XmlDocument.xml）。

给接口加上 ResponseType 显示响应描述和示例：[ResponseType(typeof(TEntity))]

在实体模型的属性上加入 RequiredAttribute 特性可提供请求或响应中的实体的属性描述，如：[Required]

推荐使用：Swashbuckle

关于格式

在 WebApiConfig.Register() 中加入以下代码以禁止以 XML 格式输出（请按需设置）：

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

Json 序列化去掉 k__BackingField

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver { IgnoreSerializableAttribute = true };

如果属性值为 null 则不序列化该属性

config.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };

工作这几年碰到的版本检测升级的接口也算是五花八门，啥样的都有，但肯定有的功能是有个 apk 的下载链接，能间接或直接提示你是强制还是非强制更新：

• 间接是指提供你后台最新版本号，让你自己与本地版本号通过比较得出是否升级；

• 直接就是后台接口直接返回个 Boolean 类型告诉你是强制或者非强制更新。

个人认为一个好的版本检测接口需要设计的更灵活更清晰用起来更方便，下面就我理解的接口设计如下（如思路有误，欢迎指正）：

总字段如下(并不是所有字段都要返回给客户端)：
  1.最新版本号 ：newVersion
  2.最小支持版本号 : minVersion
  3.apk 下载 url : apkUrl
  4.更新文案 : updateDescription
  5.是否有更新 : isUpdate
  6.是否强制更新 : forceUpdate 可选字段：
  7.apk 文件大小：apkSize
  8.apk 的文件 MD5 值：md5

方案一(后端处理逻辑)：
在客户端请求参数中添加当前版本号 currentVersion 传输给后台，由后台根据客户端传过来的当前版本号 currentVersion 做相应的判断后给出是否强制更新。
后端逻辑如下：

1. 如果 currentVersion < newVersion, 则 isUpdate = true；

• 如果 currentVersion < minVersion, 则 forceUpdate = true；

• 如果 currentVersion >= minVersion, 则 forceUpdate = false;

• 如果有特殊需求可指定某个版本必须强制更新，如 currentVersion == XXX, 则 forceUpdate = true;

2. 如果 currentVersion == newVersion，则 isUpdate = false.

结论：
返回客户端的字段仅需要 apk 下载 url : apkUrl、更新文案 : updateDescription、是否有更新 : isUpdate 、 是否强制更新 : forceUpdate 这四个字段即可。

方案二（前端处理逻辑）：
逻辑和后端处理逻辑大体上一致，只是把逻辑判断移到前台，故需要后端提供最新版本号 ：newVersion 、 最小支持版本号 : minVersion 、apk下载url : apkUrl 、更新文案 : updateDescription 这四个字段。

客户端逻辑如下：

1. 如果 currentVersion < newVersion, 则有更新信息；

• 如果 currentVersion < minVersion, 则需要强制更新；

• 如果 currentVersion >= minVersion, 则不需要强制更新;

2. 如果 currentVersion == newVersion，则没有更新信息。

---

总结：
细心的你可能会发现上面的可选字段 apkSize 和 md5 并没有用到，既然是可选字段也就是可用可不用，根据需要决定是否采用，这里来讲下他们的用处。

• apk 文件大小 apkSize
  这个用处可以说出于考虑用户体验，需要在升级弹框出来展示给用户将要更新的内容多大，让用户决定在非 WIFI 状态是否要更新，不能为了拉用户下载量或所谓的 UV 数直接让用户在不知道大小的情况下去直接下载（土豪用户绕路）。

• apk 的文件 MD5 值
  这个主要是出于安全考虑吧，因为文件内容固定的话对应的 md5 是一样的，我们可以通过这个 md5 值来和下载的 apk 的 md5 值进行比较去保证我们从服务器更新下载的 apk 是一个完整的未被篡改的安装包，也就是说如果我们下载的 apk 的 md5 值和服务器返回的 md5 值相等，则说明我们下载的 apk 是完整的，且没有被相关有心人处理过的 apk。

综上所述，这个版本更新的处理逻辑客户端和后端谁来做都可以，无关乎懒不懒的问题，个人感觉灵活性后端比客户端方便多了，毕竟后端可以指定 minVersion 与 newVersion 中间的任意一个版本强制更新，而客户端做起来就没有那么灵活了，个人见解，如有更好的方案，欢迎指教。

WGS-84（地球坐标）

用于 GPS 模块 及 Google Earth

GCJ-02（火星坐标、国测局坐标系）

用于 Google Map、必应-中国地图、高德、腾讯、图灵、阿里地图，是对地理位置的一次加密

BD-09（百度坐标）

仅用于百度地图，是对火星坐标的再次加密

CGCS 2000（国家大地坐标系）

用于天地图，与 WGS-84 最大差异 0.11mm

坐标转换：https://github.com/wandergis/coordtransform

微信网页开发的获取地理位置接口（wx.getLocation）默认使用 wgs84，可选 gcj02。

微信网页开发的使用微信内置地图查看位置接口（wx.openLocation）支持 gcj02。

• 公众号绑定到微信开放平台要求：绑定的公众帐号必须已获得资质认证，并且开启了安全保护
• 微信开放平台帐号下的应用，要获得微信登录、智能接口、公众号第三方平台开发等高级能力，必须申请微信开放平台开发者资质认证

• 因为只有“认证的服务号”才有“网页授权获取用户基本信息”接口功能，所以首先你得拥有已认证的服务号，和一个已认证的订阅号（就是本例中用来被加粉的）。订阅号必须认证才有“获取用户基本信息”接口功能
• 注册微信·开放平台，绑定这两个公众号
• 实现过程：用订阅号的权限获取所有用户信息（绑定到开放平台后用户接口返回的数据已包含 UnionID），并且当用户关注或取消关注时更新用户信息；打开网页时，用服务号的权限获取当前用户的 UnionID；由于这两个公众号绑定在同一个开放平台，所以这两个 UnionID 对同一用户是一样的，这样就可以实现在网页上判断用户是否已关注订阅号

在开发微信中的网页时，会遇到一些域名相关的配置：

① 公众号设置 - 功能设置 - 业务域名
② 公众号设置 - 功能设置 - JS接口安全域名
③ 接口权限 - 网页授权获取用户基本信息
④ 商户平台 - 产品中心 - 开发配置 - JSAPI支付授权目录
⑤ 小程序 - 开发 - 开发设置 - 业务域名
⑥ 公众号开发 - 基本设置 - IP白名单

 

第①种 业务域名：相对不重要，只是用来禁止显示“防欺诈盗号,请勿支付或输入qq密码”提示框，可配置 3 个二级或二级以上域名（个人理解是“非顶级域名”，即填写了 b.a.com 的话，对 c.b.a.com 不起作用，待测）。

我们网站的域名和公众号是没有绑定关系的，那么你在打开一个（可能是朋友分享的）网页时，跟哪个公众号的配置去关联呢，答案是 JS-SDK。

测试结果：由于一个月只有3次修改机会，这次先测二级域名，有效；再测顶级域名，有效；删除所有，仍有效。所以应该是缓存作用。过几天再试，然后下个月先测顶级域名，来确定直接填写顶级域名是否对所有二级域名有效。

 

第②种 JS接口安全域名：是配置所配置的域名下的网页可调用 JS-SDK。可配置 5 个一级或一级以上域名（个人理解是“任何级域名”，即填写了 b.a.com 对 c.b.a.com 也有效，但对 c.z.a.com 无效，待测。如果我们拥有顶级域名对应网站的控制权（上传验证文件到网站根目录），直接填写顶级域名即可）。
使用 JS-SDK 的每个网页都必须注入配置信息（wx.config），而之前必须获取 jsapi_ticket，jsapi_ticket api 的调用次数非常有限，必须全局缓存。而获取 jsapi_ticket 之前必须先获取 access_token，同样需要全局缓存。所以，我们专门做个接口，功能是传入需要使用 JS-SDK 的网页的 url，输出 wx.config 需要用到的配置信息，来实现在不同网页（网站）使用 JS-SDK。

 

第③种 网页授权域名：这是已认证的服务号才能享有的特权，主要作用是获取用户在该服务号中的 openid 和 unionid。可配置 1 个 2 个回调域名（可填写任意级别的域名，但仅对该域名的网页（网站）有效，若填写了 a.com 对 b.a.com 是无效的）。

因此，如果我们需要在不同二级域名甚至不同顶级域名下的网页（以下称之为活动页面）实现用户授权，需要做一个统一的代理授权页面（回调域名当然是填写这个页面所在的域名），引导用户依次打开：微信授权页面 - 代理授权页面 - 活动页面，根据开发说明文档，具体实现如下：

当用户第一次打开活动页面时，引导打开微信授权页面（https://open.weixin.qq.com/connect/oauth2/authorize），其中参数 redirect_uri 指定回调地址，即代理授权页面地址，参数 state 指定活动页面地址。微信授权页面返回 code 和 state，code 作为换取网页授权 access_token 的票据。到这一步，本来可以由代理授权页面直接拿这个 code 去换取 access_token、openid 和 unionid 了，但是由于当前用户还在 302 重定向过程中，将这些信息带入到活动页面时势必导致信息泄露，所以这里将 code 追加到 state 指定的网址上后重定向到活动页面，活动页面拿到 code 再通过服务器端向代理授权页面所在服务器请求 openid 和 unionid，并将它们保存于 Session 中视为用户登录。这样，服务号的 appid 和 secret 也能得到保护。代理授权页面请求的微信服务器接口地址是 https://api.weixin.qq.com/sns/oauth2/access_token。

注：网页授权 access_token 不同于 JS-SDK 中使用的全局唯一接口调用凭据 access_token，没有请求次数限制。 

流程既然通了，实现逻辑可以这样设定：

活动页面首先判断 Session 中是否有 openid 或 unionid，若有表示已授权登录；没有再判断地址栏是否有 code 参数，若有则调用代理授权页面所在服务器的接口，用 code 换 openid 和 unionid；没有则直接重定向到代理授权页面，带上 state。用 code 换 openid 和 unionid 时若成功则保存至 Session，若失败则仍然重定向到代理授权页面，带上 state，特别注意 state 中的活动页面地址确保没有 code 参数。

第④种 JSAPI支付授权目录：涉及到微信支付时用到，顾名思义是固定某一个网站内的某个目录，以“/”结尾。最多可添加 5 个。如果支付页面在目录 https://www.a.com/b/ 下，那么可以填写 https://www.a.com/b/ 或 https://www.a.com/（建议后者），暂未测试填写 https://a.com/ 会不会起作用。涉及支付安全，建议设置支付页面的最深一层不可写的目录，以防目录内被上传后门文件带来的安全隐患。

第⑤种 小程序业务域名：任何需要在小程序的 web-view 组件中打开的网页，都必须配置小程序业务域名，限制 20 个。该域名要求必须 https，可填入“任何级域名”（建议填顶级域名，即填写了 a.com 对 b.a.com 也有效。如果我们拥有顶级域名对应网站的控制权（上传验证文件到网站根目录），直接填写顶级域名即可）。

第⑥种 IP白名单：仅填写管理全局 access_token 的中控服务器的 IP。

 

总结：在上述自定义接口部署完成后，如果微信中的网页想获取用户的 unionid，则不需要配置域名，直接使用统一的代理授权即可；如果需要使用 JS-SDK 功能，如分享、上传等等，则需要配置 JS 接口安全域名；如果有表单，最好配置一下业务域名。

本文系个人经验总结，部分结果未经证实，欢迎指正！QQ：940534113

微信是一个生活方式，朋友圈是用户分享和关注朋友们生活点滴的空间，微信公众平台是一个企业、机构与个人用户之间交流和服务的平台。一直以来，微信致力于为用户提供绿色、健康的网络生态环境。通过《微信公众平台服务协议》、《微信公众平台运营规范》和《微信开放平台开发者服务协议》等相关协议及专项规则，微信公众平台和微信开放平台的内容得到了良好的管理。为了进一步优化微信用户的使用体验，更好地保障微信用户合法权益，现将非由微信公众平台产生（即域名地址不归属于微信公众平台）且在微信内传播的外部链接内容相关管理规范进行公示。

对于违反本规范的内容，一经发现将立即进行处理，包括但不限于停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行访问、屏蔽相关链接等。由微信公众平台或开放平台帐号施行或者发起的，一经查实，前述帐号、主体也将按照微信相关规则进行处罚，包括但不限于限制或禁止使用部分或全部功能、帐号封禁直至注销等，并公告处理结果；微信也有权依照本规范及相关协议、专项规则的规定，拒绝再向前述主体提供服务。

具体规则及相关处罚如下：

1. 诱导分享类内容

   1. 1.1 要求用户分享，分享后方可进行下一步操作，分享后方可知道答案等；

   2. 1.2 含有明示或暗示用户分享的文案、图片、按钮、弹层、弹窗等的，如：分享给好友、邀请好友一起完成任务等；

   3. 1.3 通过利益诱惑，诱导用户分享、传播外链内容或者微信公众帐号文章的，包括但不限于：现金奖励、实物奖品、虚拟奖品（红包、优惠券、代金券、积分、话费、流量、信息等）、集赞、拼团、分享可增加抽奖机会、中奖概率，以积分或金钱利益诱导用户分享、点击、点赞微信公众帐号文章等；

   4. 1.4 用夸张言语来胁迫、引诱用户分享的。包括但不限于：“不转不是中国人”、“请好心人转发一下”、“转发后一生平安”、“转疯了”、“必转”、“转到你的朋友圈朋友都会感激你”等；

      

      

      若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问，短期封禁相关开放平台帐号或应用的分享接口；对于情节恶劣的情况，永久封禁帐号、域名、IP地址或分享接口。 

2. 诱导关注类内容

   1. 强制或诱导用户关注公众帐号的，包括但不限于关注后查看答案、领取红包、关注后方可参与活动等；

      

      若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。 

3. H5游戏、测试类内容

   1. 以游戏、测试等方式，吸引用户参与互动的，具体形式包括但不限于比手速、好友问答、性格测试，测试签、网页小游戏等；

      

      

      若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。 

4. 欺诈类内容

   1. 4.1 虚假红包、活动

      通过虚假的红包、活动等形式，以赚取现金、实物奖品、虚拟奖品等方式欺骗用户参与的，具体形式包括但不限于虚假现金红包、虚假话费卡、虚假流量红包、虚假优惠券、虚假优惠活动等； 

   2. 4.2 宣传或销售侵害他人合法权益的商品

      通过虚假宣传、恶意营销等方式，向用户宣传或诱骗用户购买侵害他人合法权益的物品的，例如以骗取邮费为目的的赠送物品活动、虚假付费服务等； 

   3. 4.3 仿冒微信公众帐号排版、域名

      仿冒微信公众帐号文章排版、域名，可能造成微信用户混淆的；

      

      若内容中包含以上情况，一经发现，立即永久封禁帐号、域名、IP地址。 

5. 谣言类内容

   1. 发送不实信息，制造谣言，可能对他人、企业或其他机构造成损害的，例如自来水有毒、香蕉致癌、小龙虾不能吃等；

      

      若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问、短期封禁相关开放平台帐号或应用的分享接口；对于情节恶劣的情况，永久封禁帐号、域名、IP地址； 

6. 骚扰信息、广告信息及垃圾信息

   1. 传播骚扰、欺诈、垃圾广告等信息的，包括但不限于虚假中奖类信息，不符合国家相关法律法规的保健品、药品、食品类信息，假冒伪劣商品信息，虚假服务信息，虚假网络货币等；

   2. 若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。 

7. 题文不符、内容低俗的信息

   1. 7.1 题文不符的信息

      故意拟制耸动标题，或以明显倾向性、误导性、煽动性的标题吸引他人点击的，即俗称“标题党”； 

   2. 7.2 内容低俗的信息

      涉及性器官、性行为、性暗示的，传播低级趣味、庸俗、有伤风化内容的，或者宣扬暴力、恶意谩骂、侮辱他人内容的，例如：传播走光、偷拍、露点、一夜情、换妻、性虐待、情色动漫、非法性药品广告和性病治疗广告、推介淫秽色情网站等；

      

      若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。 

8. 非法获取用户数据、信息

   1. 未经用户明确同意，并向用户如实披露数据用途、使用范围等相关信息的情形下复制、存储、使用或传输用户数据的，包括但不限于要求用户共享个人信息（手机号、出生日期等）才可使用其功能，或收集用户密码或者用户个人信息（包括但不限于，手机号，身份证号，生日，住址等）；

   2. 若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问，短期封禁相关帐号；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。

9. 其它违反国家法律法规的内容，包括但不限于：

   1. (1) 违反宪法确定的基本原则的；

   2. (2) 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；

   3. (3) 损害国家荣誉和利益的；

   4. (4) 煽动民族仇恨、民族歧视，破坏民族团结的；

   5. (5) 破坏国家宗教政策，宣扬邪教和封建迷信的；

   6. (6) 散布谣言，扰乱社会秩序，破坏社会稳定的；

   7. (7) 散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；

   8. (8) 侮辱或者诽谤他人，侵害他人合法权益的；

   9. (9) 煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；

   10. (10) 以非法民间组织名义活动的；

   11. (11) 含有法律、行政法规禁止的其他内容的。

   12.  

       若内容中包含以上情况，一经发现，立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问，短期封禁相关帐号；对于情节恶劣的情况，永久封禁帐号、域名、IP地址。

申诉及常见问题可查看：http://kf.qq.com/faq/131117ne2MV7141117JzI32q.html

微信团队请用户主动遵守上述条款，也欢迎用户对违反微信链接类内容管理规范的内容进行投诉，一经核实，微信团队将立即按照规范进行处理。让我们共同创建并维护和谐的微信生态！

 

微信团队

在同一内网，如果不同服务器上的项目间通过接口调用数据，那么可以通过更改 hosts 的方法来提高访问速度，降低带宽使用。

上述情况一般地容易想到直接使用 IP 形式的网址来调用数据，如果这样的话，接口方必须将项目建立在 Web 服务器的默认网站上，在有多个项目共存的服务器上，这种方式就有非常大的局限性。而通过更改 hosts 文件，我们可以直接使用域名形式的网址来调用数据，该域名将会被“解析”到内网 IP 上，而且是映射到绑定了该域名的网站上（绑定时“IP 地址”设为“全部未分配”）。

具体实现方法：

Windows Server：用记事本打开文件 C:\Windows\System32\drivers\etc\hosts

Linux / centos：vi /etc/hosts

添加一行：接口服务器的内网 IP + 空格 + 接口网站的域名

如：64.233.162.84 www.google.com

	普通订阅号	认证订阅号	普通服务号	认证服务号
注册主体为个人类型	√	×	×	×
注册主体为企业类型（个体工商户，无对公账户）	×	√	×	√（不能申请微信支付？）
注册主体为企业类型（个体工商户，有对公账户）	√	√	√	√
注册主体为企业类型（企业公司类）	√	√	√	√
群发	每天 1 条	每天 1 条	每月 4 条	每月 4 条
接口权限	参：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1433401084

参考资料

http://kf.qq.com/faq/120911VrYVrA130619v6zaAn.html

编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点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/