微信硬件H5开发的控制灯（微信小程序控制onenet智能灯）

这次，我将为您带来微信硬件H5开发的控制照明。微信硬件H5开发控制灯光有哪些注意事项？下面是一个实际案例。让我们来看看。

你可以自己浏览。带参数的页面在浏览器中打开时会立即跳转，不带参数的页面会提示参数不完整，需要在移动模式下查看。

显示的界面如下:

目录结构解压后打开lamp.js，目录如下。该演示基于sea.js+zepto实现，用于加载模块，zepto提供ajax请求和tab事件。

Common包含一个keyConfig.js（地址参数）、一个reqData.js（请求封装）和一个zepto，ui是上图中类似滑块的组件。Util是方法的集合。最重要的是lamp.js

define（function（require）{ var $ = require（“common/zepto“）；var key config = require（“common/key config“）；var reqData = require（“common/req data“）；var util = require（“util/util“）；var process bar = require（“ui/process -bar“）；var page param = { device _ id:util . getquery（“device _ id“），device _ type:util . getquery（“device _ type“），appid:util . getquery（“appid“）}；var lastModTime = 0；var power BTN = $（“# power BTN“），//切换按钮灯条；var device _ status = { services:{ light bulb:{ alpha:0 }，operation _ status:{ status:0 } }；//数据对象（function（）{ if（！pageParam.device_id ||！Page param . device _ type）{ alert（“页面缺少参数“）；返回；} log（“appid:“+page param . appid）；log（“设备标识:“+ pageParam .设备标识“）；log（“设备类型:“+ pageParam .设备类型“）；powerbtn . on（“tap”，toggle power）；//切换按钮事件initBar（）；init interval（）；// todo:对于测试，在提交//render page（{ }）之前删除；})();/* * *初始化进度条*/function initBar（）{ log（“Initialize light bar“）；light bar = new process bar（{ $ id:“light bar“，min: 0，stepCount: 100，step: 1，touch end:function（val）{ device _ status . services . light bulb . alpha = val；Log（“亮度值:“+val）；setData（）；} });}/* * * req data */function getdata（）{ req data . Ajax req（{//URL:key config . get _ lamp _ status，URL:‘https://API . weixin . QQ . com/device/getlampstatus‘，data: pageParam，onSuccess: renderPage，on error:function（msg）{ log（“+JSON . stringify（msg）获取数据失败）；} });}/* * *设置数据*/函数setdata（）{ console . log（“seturl“，key config . set _ lamp _ status）；lastModTime =新日期（）。getTime()；//更新上次操作时间req data . Ajax req（{//URL:key config . set _ lamp _ status，URL:‘https://API . weixin . QQ . com/device/setlampstatus‘，类型:“POST“，数据:JSON . stringify（device _ status）}）；log（“setData:“+JSON . stringify（device _ status））；}/* * *开关按钮事件*/function toggle power（）{ $（“# switch BTN“）。切换类别（“开”）。切换类（“关”）；Log（“灯状态:“+设备状态。服务。操作状态。状态“）；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（）；}/* * * Polling */function init interval（）{ get data（）；setinterval（function（）{ if（（new date）。gettime（）-lastmodtime）》2000）{//当有设置操作时，停止轮询1s，2秒后继续轮询get data（）；} }, 1000);}/* * *渲染页面*/函数渲染页面（JSON）{//todo:用于测试，提交前删除//JSON = {//device _ status:{//services:{//operation _ status:{//status:0//}，//light bulb:{//alpha:0//}/}/}//}；log（“render page:“+JSON）；如果(！JSON . device _ status）{ return；} console . log（“JSON”，JSON）；device _ status = JSON . device _ status；日志（设备状态）；if（device _ status . services . operation _ status . status = = 0）{ $（“# switch BTN“）。addClass("on ")。remove class（“off“）；} else { $（“# switch BTN“）。addClass（“off“）。remove class（“on“）；} light bar . set val（device _ status . services . light bulb . alpha）；}});/* | xgv 00 | 4199711 a9 ade 00 e 2807 e7a 576d 92 f 55 */首先我们看到pageParam对象获取页面上的参数，包括device_id、device_type和appid。事实上，只有前两个是有用的，因为后台服务器已经因为appid而配置好了，微信中的“进入面板”只附带了id和type两个参数。那么设备状态是一个设备状态对象，该对象是一盏灯。根据微信服务的定义，灯有一个亮度值。这在上一篇文章中提到过。然后有一个立即执行的匿名函数。在该功能中，将首先检查参数，然后初始化开关和亮度条。还不如进入循环。在initInterval中，通过getdata连续获取数据。注意这里有一个lastModTime的比较，然后延迟2秒后触发。这个地方主要是因为每次设置后从服务器获取数据有延迟。本来是10，你定了20，杠也到了20的位置。但是，服务器在途中又发送了10个，您设置的20个没有立即过期，这将产生卡住效果。但这两秒并没有那么有效，卡顿还是会有的；另一方面，你不能设置得太快。如果设置太快，将会报告错误50019（设备正在运行）；getdata成功后就是renderpage，不需要解释。请注意，在切换时间受限的情况下，setdata实际上首先被调用一次

powerbtn . on（“tap”，toggle power）；函数toggle power（）{ $（“# switch BTN“）。toggle class（“on“）。toggle class（“off“）；Log（“灯状态:“+设备状态。服务。操作状态。状态“）；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} nbspHtml》我的灯泡

时断时续的

灯亮着。

查看代码

在您自己的实现中去掉mask和config部分，并将sea.js的目录更改为您自己的相应目录:

sea js . config（{ base:‘/js/‘，//map:

使用系统；使用系统。集合。泛型；使用系统。诊断；使用系统。木卫一；使用系统。Linq使用系统。Net . Http使用系统。Web使用Newtonsoft。Json使用泥丘。Core . Domain.Common使用Senparc。微信；使用Senparc。微信。例外；使用SendHelp= Senparc。weixin . common APIs . common jsonsend；命名空间门户。MVC . wx device { public class WxDeviceService:IWxDeviceService {//private readonly ICacheManager _ cache manager；//public WxDeviceService（ICacheManager cache manager）//{//_ cache manager = cache manager；//} public token result GetAccessToken（）{ var URL = string。格式（WxDeviceConfig。访问令牌Url，WxDeviceConfig。AppId，WxDeviceConfig。app secret）；var res = SendHelp。send（null，url，null，CommonJsonSendType。GET）；返回res} public wxresponsedatagetdevicestatus（http request base请求）{ Stream postData = request。输入流；StreamReader sRead =新的StreamReader（post data）；字符串后内容= sRead。ReadToEnd（）；如果(！字符串。isnullrempty（post content））{ logger。debug（“接收的数据:“+后置内容“）；}请尝试{ var data = JsonConvert。反序列化对象（后置内容）；data . raw str = post content；伐木工。Debug（“转换消息状态:“+data . asy _ error _ msg）；返回数据；} catch（异常e）{ Logger。调试（信息）；扔；} } public openapi result RequestDeviceStatus（string access token，request data data）{ var URL = string。格式（WxDeviceConfig。GetDeviceStatusUrl，access token）；返回SendHelp。发送（accessToken，url，数据）；} public openapi result set device（string access token，request data data）{ var URL = string。格式（WxDeviceConfig。GetDeviceStatusUrl，access token）；返回SendHelp。发送（accessToken，url，数据）；} public string get OpenID（string access token，string deviceType，string device id）{ try { var URL = string。格式（WxDeviceConfig。GetOpenid、accessToken、deviceType、device id）；var res = SendHelp。发送（accessToken，url，null，CommonJsonSendType。GET）；return RES . get OpenID（）；} catch（ErrorJsonResultException e）{ Logger。调试（信息）；扔；} } } }查看代码

该方法读取数据并将其提供给userdata进行缓存。getdata方法中的返回。

private UserWxData get UserWxData（）{ var target = _ cache manager。get（user key）？？new user wxdata（）；返回目标；}私有字符串userKey { get { var key = Session

我相信你看完这个案例后已经掌握了方法。更多精彩请关注主机参考其他相关文章！

推荐阅读:

在JS中特别有用的轻量级日期插件。

JavaScript对IE8兼容性问题的处理

以上是微信硬件H5开发的控制灯光的详细内容。更多资讯请关注主机参考等相关文章！

这几篇文章你可能也喜欢：

• 微信H5硬件开发的控制灯光

本文由主机参考刊发，转载请注明：微信硬件H5开发的控制灯（微信小程序控制onenet智能灯） https://zhujicankao.com/105783.html