微信硬件H5开发之控制灯光
时间：2022-9-12作者：未知来源：争怎路由网人气：
- 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：
@{ Layout = null; }<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>我的灯泡</title> <link href="/css/common.css" rel="stylesheet" /> <link href="/css/light_switch.css" rel="stylesheet" /></head><body> <p> <p class="body"> <p class="inner"> <p id="switchBtn" class="status_button off"> <p class="button_wrp"> <p class="button_mask"> <p class="alerter_button" id="powerBtn"> <i class="status_pot"></i> <span class="on">ON</span> <span class="off">OFF</span> </p> </p> </p> <p class="on"> <h2>灯已开</h2> </p> </p> <p id="reData"></p> </p> </p> <p class="foot"> <p class="slider_box J_slider_box"> <i class="slider_box_icon icon dark"></i> <p id="lightBar" class="slider_box_bar"> <p class="slider_box_slider J_slider" style="left:0%"> <p class="slider_box_slider_label J_value"></p> <i class="slider_box_slider_touch"></i> </p> <p class="slider_box_line"> <span class="slider_box_line_fill J_fill" style="width:0%"></span> </p> </p> <i class="slider_box_icon icon light"></i> </p> </p> </p> <script src="/js/sea.js"></script> <script> seajs.config({ base: '/js/', //map: [[/^(.*\.(?:css关键词：微信硬件H5开发之控制灯光