博客 (81)

升级“微信登录 1.1.6”插件后,发现微社区发帖提示“抱歉,您的请求来路不正确或表单验证串不符,无法提交”,查看更新日记发现微社区域名更换为 wsq.discuz.com,导致表单验证不通过的原因就是它了。

解决方法是打开:\source\class\helper\helper_form.php

找到:'http://wsq.discuz.qq.com', 24

或:'http://wsq.discuz.qq.com/', 25

替换为:'http://wsq.discuz.com/', 22

然后清空目录:\data\cache\qrcode\

至于帖子分享给朋友或朋友圈的标题和图片不正常的问题,目前还没有办法解决,听说是该插件要收费的节奏,具体可以参与官方讨论:

http://www.discuz.net/forum-2-1.html

另外,如果发现微社区里的用户头像或表情不能正常显示,一般是由于做了防盗链引起的,只要在白名单里加上 *.discuz.com 就行了

xoyozo 10 年前
5,786

“/”应用程序中的服务器错误。


未能加载文件或程序集“XXXXXX”或它的某一个依赖项。试图加载格式不正确的程序。

说明: 执行当前 Web 请求期间,出现未经处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。 

异常详细信息: System.BadImageFormatException: 未能加载文件或程序集“XXXXXX”或它的某一个依赖项。试图加载格式不正确的程序。

源错误: 
 
执行当前 Web 请求期间生成了未经处理的异常。可以使用下面的异常堆栈跟踪信息确定有关异常原因和发生位置的信息。

程序集加载跟踪: 下列信息有助于确定程序集“XXXXXX”未能加载的原因。
 

警告: 程序集绑定日志记录被关闭。
要启用程序集绑定失败日志记录,请将注册表值 [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD)设置为 1。
注意: 会有一些与程序集绑定失败日志记录关联的性能损失。
要关闭此功能,请移除注册表值 [HKLM\Software\Microsoft\Fusion!EnableLog]。

当使用 Visual Studio 发布网站时,可能会遇到上述黄屏报错,原因之一是引用的 dll 路径不正确,可以用 Release 模式生成一次看看;原因之二是应用程序的位数与服务器的不匹配。

一般来说用“Any CPU”的方式没有问题,但遇到上述报错的百度网友都很轻松地通过修改 IIS 应用程序池的“启用 32 位应用程序”来解决这个问题,原因是他们的服务器是 64 位操作系统。当我这次在 32 位操作系统的服务器上遇到这个问题的时候真的是手足无措了,然后一阵乱配置,偶尔还能成功跑起来,于是仔细对比了发布到服务器上的文件,发现只有 bin 目录下的 dll 文件有区别,而导致这些区别的原因是我在发布时把“Release - Any CPU”换成了“Debug - Any CPU”,所以一时找不到更好的解决办法的朋友不妨也试试这个方法,只是会有一点点担心性能问题。有更好的解决方案的朋友也不要忘了联系我。

xoyozo 10 年前
8,340

编者按:本文作者 Nick Babich 在文中介绍了几种 “提高” 加载速度的方法。

当我们设计产品的时候,我们没有办法模拟不同的加载速度。因此如果用户等待太长的时间才能看到内容,并不是我们特意的安排。

网速不稳定,尤其是当我们加载图片或音乐时,时间会较长。在这种情况下,我们不得不考虑在这种间隙向用户展示什么内容才能让他们感觉不枯燥。

加载动图(Spinner)效果不佳

加载 Spinner 并不是暗示加载或思考的正确方式。默认加载图标(例如 iOS 的加载动画效果是从中心点辐射的灰色线条)通常具有消极的含义。它们应用于多种操作系统功能之中,包括设备启动、连接到网络或者加载数据。

如何让用户觉得你的 app 加载速度很快

人们讨厌只看到加载 Spinner,但是却看不多进度或时间。让用户盯着一个下载进度条或者旋转圈会让跳出率提高。

不确定的等待时间比已知的、有限的等待时间让人觉得更长。你应该给你的用户一个清晰地等待时间。

如何让用户觉得你的 app 加载速度很快

进度条可以告诉用户这个过程需要花费多长时间,但是一般不太正确。你可以通过一些方法隐藏过程中的延迟,例如你可以在开始的时候让速度显示地快一点,在结尾的时候,显示速度慢一点。进度条不应该中断,否则用户就会认为这个 App 卡住了。

后台操作

在后台操作中包含行为有两个优点——用户可见;在用户真正发出请求时就会加载完毕。当程序在后台运营时,给用户呈现一些其他的内容。一个很好的案例是在 Instagram 中加载图片。用户一旦选择想要分享的图片,就开始加载。

如何让用户觉得你的 app 加载速度很快

在后台加载图片的过程中,Instagram 邀请用户添加标题和标签,当用户准备按 “分享” 键时,加载过程就完成了,这时候就可以立刻分享图片了。

仿真内容和 Placeholder(占位符)

如果你无法缩短加载时间,那么你应该试图让用户在等待中更高兴一点。可以利用这个时间显示一些临时的信息。为了提高用户的参与度,可以使用仿真内容作为文本和图片。

几点小建议:

1、加载屏幕不应该太亮。不需要太吸引眼球。Facebook 的灰色 Placeholder 就是一个很好的例子。当加载内容时使用模板元素,让用户熟悉将要加载的内容的整体结构。

如何让用户觉得你的 app 加载速度很快

2、如果要加载图片,你可以在 placeholder 中使用加载图片的主色调。Medium 的图片加载效果比较好。首先加载一个小型的模糊图片,然后转化成一个清晰的大图片。

如何让用户觉得你的 app 加载速度很快

使用 placeholder 和仿真内容并没有加快加载过程,但是在用户眼中加载速度好像变快了。

分散用户的注意力

为了不让用户在等待时感到枯燥,可以适当分散他们的注意力。你可以使用一些有趣的、始料未及的东西吸引用户的注意力,为 App 加载赢得充足的时间。

如何让用户觉得你的 app 加载速度很快

动画片可以分散访客的注意力,让他们忽略加载时间。

结论

用户讨厌等待,如果你让用户觉得他们没有等待,那么他们就会喜欢你的 App。一定要让用户觉得 App 的加载时间比他预计的短。

转自 杨志芳 10 年前
4,490

今天终于把大量占用论坛服务器带宽的元凶找到了!

我们的论坛使用阿里云的 ECS+RDS+OSS+CDN 架构,最近发现 ECS 的带宽怎么都不够用了,也没有什么突发事件呀,再说附件都在 OSS 上。观察了云监控控制台,发现半夜里的流量也不减呀,白天更是触顶下不来,坛友们真是不辞辛劳为 PV 作贡献啊。

我对 CentOS 还是不够熟悉的,查阅了一些资料后,终于找到方向入手了。

重点肯定是日志文件了,但是面对每天几个 G 的大块头,还真是无法下手,一条一条看估计胡子都白花花了。

那么,首先安装 GoAccess 这个好东西(yum install goaccess

然后进入网站日志目录,用 GoAccess 来分析一下(goaccess -f xxxxxx.log -a),具体用法参官网

选择日志格式,nginx 默认为 NCSA Combined Log Format,空格选中,回车确认

稍等片刻就可以看到主界面了,统计信息丰富多彩,统计结果一目了然,看截图,如果你分析的日志文件是当前正在使用中的,它还会每秒刷新主界面,让你看到实时统计

大致分为几块内容:

按 1 定位到“按天访问量”

按 2 定位到“最多次被请求的 URL”

按 3 定位到“最多次被请求的静态文件”

按 4 定位到“最多次被请求的 404”

按 5 定位到“最多次请求的用户 IP”

按 6 定位到“用户的操作系统”

按 7 定位到“用户的浏览器”

按 8 定位到“按小时的统计”

按以上数字键后,再按回车可以查看具体或更多的信息,按 s 可以更换排序,按 q 返回或退出

那么我先找 5 最多次请求的用户 IP,排前面的全部是从 60.191.127.4 到 60.191.127.26 的 IP,每个 IP 都是几 G 级的带宽占用。

负责任的,你必须保证这些 IP 不是政府或大企业的对公 IP,而且得拿这些 IP 直接去日志文件里搜到底请求了哪些 URL。经查证,它们只请求版块的帖子列表页,没有请求任何图片、脚本、样式等,还有,UserAgent 中没有带 Spider 之类的关键字,证明不是搜索引擎的蜘蛛,那么就可以果断认为它“不是人”

啥都不说了,找到 nginx 的 conf 配置文件,在 server 中添加 deny 60.191.127.0/24;

检查配置:nginx -t

使配置生效:nginx -s reload

呵呵,马上就能在阿里云监控里看到过山车式的折线了。 

另外,备注下查看各IP的连接数的命令:

netstat -an|grep :80| awk '{print $5}'| cut -d':' -f1| sort |uniq -c

xoyozo 10 年前
5,375

本文适用于 IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 等 Web 服务器,IIS 6(Windows Server 2003)用户请查阅 ISAPI_Rewrite。

在 IIS 中要实现 URL 重写,需要下载并安装 URL Rewrite 组件,http://www.iis.net/downloads/microsoft/url-rewrite

IIS 管理器中选中任意网站,主窗口可见“URL 重写”,双击打开。(如果你想配置这台服务器的所有网站有效,直接选中左侧菜单中的服务器名,打开“URL 重写”即可。)

右侧“添加规则...”,选择“入站规则”中的“空白规则”,确定。

填写规则名称,在“匹配 URL”框中选择“与模式匹配”,根据自己的需求选择“正则表达式”、“通配符”或“完全匹配”,“模式”中填写要防盗链的文件路径规则,例如正则表达式 ^.*\.(jpg|png)$ 将匹配所有目录下的 .jpg 和 .png 文件。

接下来将设置图片在允许的域名下显示。

在“条件”框中选择“全部匹配”,点击“添加”,“条件输入”中填写“{HTTP_REFERER}”(不含引号,含花括号),表示判断 HTTP 请求中 Header 的 Referer。选择“与模式不匹配”,模式中填写匹配规则,如 ^$ 表示允许 Referer 为空(如直接从浏览器打开的情况),再加一个规则 ^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$ 表示允许在 xoyozo.net 和 himiao.com 这两个域名下显示图片。当然如果你有很多域名或需要设置不同的规则,可以继续添加,但最好把访问量大的规则移到前面,从而减少系统匹配次数,提高访问效率。

最后,在“操作”框中设置你想要的处理方式,可以是“重定向”到一张防盗链提醒的图片上(推荐类型临时 307),也可以自定义响应,例如,状态代码(403),子代码(0),原因(Forbidden: Access is denied.),描述(You do not have permission to view this directory or page using the credentials that you supplied.),查看 HTTP 状态代码

如果你是配置某个网站的“URL 重写”,那么在网站根目录下的 web.config 文件中,<system.webServer /> 节点下可以看到刚刚配置的规则,例如:

<rewrite>
  <rules>
    <rule name="RequestBlockingRule1" stopProcessing="true">
      <match url="^.*\.(jpg|png)$" />
      <conditions>
        <add input="{HTTP_REFERER}" pattern="^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$" negate="true" />
        <add input="{HTTP_REFERER}" pattern="^$" negate="true" />
      </conditions>
      <action type="Redirect" url="http://42.96.165.253/logo2013.png" redirectType="Temporary" />
    </rule>
  </rules>
</rewrite>
xoyozo 10 年前
7,832

过程很简单,就是手机通过安装了 Fiddler 的电脑代理上网就可以抓包了,具体设置:

打开 Fiddler Web Debugger 菜单栏上的 Tools -Fiddler Options...

切换到 Connections 选项卡

勾选 Allow remote computers to connect 并记住上面的端口号 Fiddler listens on port,默认 8888OK,关闭并重新开启 Fiddler

在手机上修改已连接的网络配置,手动设置代理为电脑上网的本地 IP,端口号就是上一步的 Fiddler listens on port,好了,手机上的网络请求都可以在 Fiddler 上捕获到了。

xoyozo 10 年前
4,472

打开 Fiddler Web Debugger 菜单栏上的 Tools - Fiddler Options...

切换到 HTTPS 选项卡

勾选 Capture HTTPS CONNECTsDecrypt HTTPS trafficOK

 

另,这种情况如何破?

*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

xoyozo 10 年前
9,759

jQuery 请求代码:

$.ajax({
  url: "xxxxxx",
  //method: "GET", // 默认 GET(当 dataType 为 jsonp 时此参数无效,始终以 GET 方式请求)
  data: $('#myForm').serialize(), // 要传递的参数,这里提交表单 myForm 的内容
  dataType: "jsonp"
  //, jsonp: "callback" // 请求中的回调函数的参数名,默认值 callback
  //, jsonpCallback: "jQuery_abc" // 本地回调函数名,不指定则随机
})
  .done(function () {
    alert("done");
    if (true) {
      $('#myForm')[0].reset();
    }
  })
  .fail(function () { alert("fail"); })
  .always(function () { alert("complete"); });

ASP.NET 处理代码:

JavaScriptSerializer jss = new JavaScriptSerializer();

string json = jss.Serialize(new { result = new { success = true, msg = "成功" } });

if (!string.IsNullOrWhiteSpace(Request["callback"])
  && Regex.IsMatch(Request["callback"], @"[_$a-zA-Z][$\w]*"))
{
  Response.ContentType = "application/javascript; charset=utf-8";
  Response.Write(json + Request["callback"] + "(" + json + ")");
}
else
{
  Response.ContentType = "application/json; charset=utf-8";
  Response.Write(json);
}

Response.End();
xoyozo 10 年前
5,901

tgideas-html5-api-test-1-1

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

转自 万技师 11 年前
4,339

PHP如何获取表单的POST数据呢?本文介绍3种获取POST数据的方法,并将代码附上,希望可以帮助到你。

一、PHP获取POST数据的几种方法

方法1、最常见的方法是:$_POST['fieldname'];

说明:只能接收Content-Type: application/x-www-form-urlencoded提交的数据
解释:也就是表单POST过来的数据
 

方法2、file_get_contents(“php://input”);

说明:

允许读取 POST 的原始数据。
和 $HTTP_RAW_POST_DATA 比起来,它给内存带来的压力较小,并且不需要任何特殊的 php.ini 设置。
php://input 不能用于 enctype=”multipart/form-data”。

解释:

对于未指定 Content-Type 的POST数据,则可以使用file_get_contents(“php://input”);来获取原始数据。
事实上,用PHP接收POST的任何数据都可以使用本方法。而不用考虑Content-Type,包括二进制文件流也可以。
所以用方法二是最保险的方法。
 

方法3、$GLOBALS['HTTP_RAW_POST_DATA'];

说明:

总是产生 $HTTP_RAW_POST_DATA  变量包含有原始的 POST 数据。
此变量仅在碰到未识别 MIME 类型的数据时产生。
$HTTP_RAW_POST_DATA  对于 enctype=”multipart/form-data”  表单数据不可用
如果post过来的数据不是PHP能够识别的,可以用 $GLOBALS['HTTP_RAW_POST_DATA']来接收,
比如 text/xml 或者 soap 等等

解释:

$GLOBALS['HTTP_RAW_POST_DATA']存放的是POST过来的原始数据。
$_POST或$_REQUEST存放的是 PHP以key=>value的形式格式化以后的数据。
但$GLOBALS['HTTP_RAW_POST_DATA']中是否保存POST过来的数据取决于centent-Type的设置,即POST数据时 必须显式示指明Content-Type: application/x-www-form-urlencoded,POST的数据才会存放到 $GLOBALS['HTTP_RAW_POST_DATA']中。
 

二、演示

1、PHP 如何获取POST过来的XML数据和解析XML数据

比如我们在开发微信企业号时,如何处理用户回复过来的数据呢?
文档:http://qydev.weixin.qq.com/wiki/index.php?title=%E6%8E%A5%E6%94%B6%E6%99%AE%E9%80%9A%E6%B6%88%E6%81%AF
首先查阅文档,可知道:启用开发模式后,当用户给应用回复信息时,微信服务端会POST一串XML数据到已验证的回调URL

假设该URL为 http://www.xxx.com
Http请求方式: POST
http://www.xxx.com/?msg_signature=ASDFQWEXZCVAQFASDFASDFSS×tamp=13500001234&nonce=123412323

POST的XML内容为:

<xml>
   <ToUserName><![CDATA[toUser]]></ToUserName>
   <FromUserName><![CDATA[fromUser]]></FromUserName> 
   <CreateTime>1348831860</CreateTime>
   <MsgType><![CDATA[text]]></MsgType>
   <Content><![CDATA[this is a test]]></Content>
   <MsgId>1234567890123456</MsgId>
   <AgentID>1</AgentID>
</xml>

那么怎么接收这段内容呃?

这时就可以用到:方法2(file_get_contents(“php://input”))、方法3($GLOBALS['HTTP_RAW_POST_DATA'])

方法2(file_get_contents(“php://input”)):

$input = file_get_contents("php://input"); //接收POST数据
$xml = simplexml_load_string($input); //提取POST数据为simplexml对象
var_dump($xml);

方法3($GLOBALS['HTTP_RAW_POST_DATA'])

$input = $GLOBALS['HTTP_RAW_POST_DATA'];
libxml_disable_entity_loader(true);
$xml = simplexml_load_string($input, 'SimpleXMLElement', LIBXML_NOCDATA);
var_dump($xml);

PHP获取POST数据的3种方法及其代码分析,希望可以帮到你。

P
转自 PHP100 11 年前
4,839