你可以自己扒，带参数的页面在浏览器中打开会马上跳转，不带参数的会提示参数不全，需要用mobile模式观看。
呈现的界面如下：
目录结构
解压开lamp.js ，目录如下，这个demo是基于sea.js+zepto实现，sea.js用来加载模块，zepto提供ajax请求和tab事件等。
common中包含了一个keyConfig.js(地址参数)，一个reqData.js(请求封装)还有一个zepto，ui里是一个上面图片的中的slider一样的组件。util中是一组方法集合。最重要的就是lamp.js 。
define(function (require) { var $ = require("common/zepto"); var keyConfig = require("common/keyConfig"); var reqData = require("common/reqData"); var util = require("util/util"); var ProcessBar = require("ui/process-bar"); var pageParam = {
device_id: util.getQuery("device_id"),
device_type: util.getQuery("device_type"),
appid: util.getQuery("appid")
}; var lastModTime = 0; var powerBtn = $("#powerBtn"), // 开关按钮 lightBar; var device_status= {
services: {
lightbulb: {alpha:0},
operation_status:{status:0}
}
}; // 数据对象
(function () { if(!pageParam.device_id || !pageParam.device_type){
alert("页面缺少参数"); return;
}
log("appid:" + pageParam.appid);
log("device_id:" + pageParam.device_id);
log("device_type:" + pageParam.device_type);
powerBtn.on("tap", togglePower); // 开关按钮事件 initBar();
initInterval(); // todo : for test, delete before submit// renderPage({}); })(); /**
* 初始化进度条 */
function initBar() {
log("初始化lightBar");
lightBar = new ProcessBar({
$id: "lightBar",
min: 0,
stepCount: 100,
step: 1,
touchEnd: function (val) {
device_status.services.lightbulb.alpha = val;
log("亮度值为："+val); setData();
}
});
} /**
* 请求数据 */
function getData() {
reqData.ajaxReq({ //url: keyConfig.GET_LAMP_STATUS,
url:'https://api.weixin.qq.com/device/getlampstatus',
data: pageParam,
onSuccess: renderPage,
onError:function(msg) {
log("获取数据失败:" + JSON.stringify(msg));
}
});
} /**
* 设置数据 */
function setData() {
console.log("setUrl", keyConfig.SET_LAMP_STATUS);
lastModTime = new Date().getTime(); // 更新最后一次操作时间 reqData.ajaxReq({ // url: keyConfig.SET_LAMP_STATUS,
url: 'https://api.weixin.qq.com/device/setlampstatus',
type: "POST",
data: JSON.stringify(device_status)
});
log("setData:" + JSON.stringify(device_status));
} /**
* 开关按钮事件 */
function togglePower() {
$("#switchBtn").toggleClass("on").toggleClass("off");
log("灯的状态status:"+device_status.services.operation_status.status); if(device_status.services.operation_status.status==0){
device_status.services.operation_status.status = 1;
log("灯的状态:1");
} else {
device_status.services.operation_status.status = 0;
log("灯的状态:0");
} setData();
} /**
* 轮询 */
function initInterval() {
getData();
setInterval(function () { if((new Date().getTime() - lastModTime) > 2000){ // 当有设置操作时，停止1s轮询，2秒后继续轮询 getData();
}
}, 1000);
} /**
* 渲染页面 */
function renderPage(json) { // todo : for test, delete before submit// json = {// device_status: {// services: {// operation_status: {// status: 0// },// lightbulb: {// alpha: 0// }// }// }// };
log("renderPage:"+json); if(!json.device_status){ return;
}
console.log("json", json);
device_status = json.device_status;
log(device_status); if(device_status.services.operation_status.status==0){
$("#switchBtn").addClass("on").removeClass("off");
} else {
$("#switchBtn").addClass("off").removeClass("on");
}
lightBar.setVal(device_status.services.lightbulb.alpha);
}
});/* |xGv00|4199711a9ade00e2807e7ea576d92f55 */首先我们看到pageParam对象是获取页面上参数的，device_id，device_type以及appid三个参数。其实有用的只有前面两个，因为appid的话，后台服务器已经配置了，而且在微信中的通过“进入面板”的时候只附带了id和type两个参数。然后device_status是一个设备状态对象对象是灯，根据微信services的定义，灯有一个亮度值。这个在上一篇提到过。然后是一个立即执行的匿名函数，这个函数函数里面会先检查一下参数，然后初始化开关和亮度条。最好进入循环。initInterval中就是不断的通过getdata获取数据。注意到这儿有一个lastModTime的比较，然后延时2秒再触发，这个地方主要是因为每次设置之后再从服务器捞到数据有一个延时。原本是10，你设置了20，bar也到了20的位置，但是呢，服务器还有一个10在路上发过来，你设置的20并没有马上失效，这会有一个卡顿的效果。但这个两秒也不是那么的有效，卡顿还是会有；另外一方面就是，不能设置太快，设置太快了会报50019的错误(设备正在被操作)；getdata成功后，就是renderpage，这个不用解释了。注意到在绑定开关时间的地方，其实是先调用了一次setdata
powerBtn.on("tap", togglePower); function togglePower() {
$("#switchBtn").toggleClass("on").toggleClass("off");
log("灯的状态status:"+device_status.services.operation_status.status); if(device_status.services.operation_status.status==0){
device_status.services.operation_status.status = 1;
log("灯的状态:1");
} else {
device_status.services.operation_status.status = 0;
log("灯的状态:0");
} setData();
}这个作用有两个，一个是获取设备目前的状态，因为设备可能没有开启，或者没有联网，二个是将参数传递给后台，不然getdata无效。最后理清一下思路就是
获取参数-->初始化-->setdata一次-->循环-->渲染页面 界面操作-->setdata-->延时读取。 加上后端的部分，全部的流程图如下。
所以拿到前端代码只是一半，后端还需要自己实现。
实现
纯静态文件是无法请求微信服务器的，所以我们需要自己实现后台的部分，这也是第一节中要讲的目的。
html：