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

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

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

呈现的界面如下:

目录解压l.js目录如下。本演示基于sea.js+zepto实现，用于加载模块。Zepto提供ajax请求和tab事件。

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

define(function(require){ var $ = require( ；common/zepto ；);var key config = require( ；common/key config ；);var req data = require( ；common/reqData ；);var util = require( ；util/util ；);var process bar = require( ；ui/process -bar ；);var page param = { device _ id:util . getquery( ；设备id )，device _ type:util . getquery( ；设备类型 )，appid:util . getquery( ；appid ) };var lastModTime = 0；var power BTN = $( ；# powerBtn )、//切换按钮灯条；var device _ status = { services:{ light bulb:{ alpha:0 }，operation _ status:{ status:0 } }；//数据对象(function () {if(！pageParam.device_id ||！page param . device _ type){ alert( ；缺少页面参数)；返回；}日志( appid: ；+page param . appid)；日志( 设备标识: +page param . device _ id)；日志( 设备类型: +page param . device _ type)；power BTN . on( ；点击 ，toggle power)；//切换按钮事件initBar()；init interval()；// todo:对于测试，在提交// renderPage({})之前删除；})();/* * *初始化进度条*/function initBar(){ log( ；初始化灯条 );light bar = new process bar({ $ id: ；灯条 ，min: 0，stepCount: 100，step: 1，touch end:function(val){ device _ status . services . light bulb . alpha = val；日志( 亮度值为:“+val)；setData()；} });}/* * * req data */function getdata(){ req data . Ajax req({//URL:key config . get _ l _ status，URL: # 39；https://api.weixin.qq.com/device/getlstatus'，数据:pageParam，onSuccess: renderPage，on error:function(msg){ log( ；无法获取数据:"+JSON . stringify(msg))；} });}/* * * setting data */functions etdata(){ console . log(" setUrl ；，keyConfig。设置_灯_状态)；lastModTime =新日期()。getTime()；//更新上次运行时间req data . Ajax req({//URL:key config . set _ l _ status，URL: # 39；https://api.weixin.qq.com/device/setlstatus'，键入: 帖子 ，data:JSON . stringify(device _ status)})；日志( setData: ；+ JSON.stringify(设备状态))；}/* * *开关按钮事件*/function toggle power(){ $(" # switch BTN ；).toggle class( ；在 ).toggle class( ；关闭 );日志( 状态:灯:"+设备状态.服务.操作状态.状态)；if(device _ status . services . operation _ status . status = = 0){ device _ status . services . operation _ status . status = 1；日志( 灯的状态:1 );}否则{ device _ status . services . operation _ status . status = 0；日志( 灯的状态:0 );} setData()；}/* * * polling */function init interval(){ get data()；setInterval(function(){ if((new Date()。getTime()-lastModTime) gt；200){//有设置操作时，停止1s轮询，2秒后继续轮询get data()；} }, 1000);}/* * * Render Page */Function Render Page(JSON){//todo:对于测试，提交前删除//JSON = {//device _ status:{//services:{//operation _ status:{//status:0//}，//light bulb:{//alpha:0//}/}/}/}//}；日志( render page: ；+JSON)；如果(！JSON . device _ status){ return；} console . log( ；json ，JSON)；设备状态= json .设备状态；日志(设备状态)；if(device _ status . services . operation _ status . status = = 0){ $( ；# switchBtn ).addClass( ；在 ).remove class( ；关闭 );} else { $( ；# switchBtn ).addClass( ；关闭 ).remove class( ；在 );} light bar . set val(device _ status . services . light bulb . alpha)；}});/* | xgv 00 | 4199711 a9 ad 00 e 2807 e 7 e 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首先被调用一次。

power BTN . on( ；点击 ，toggle power)；函数toggle power(){ $( ；# switchBtn ).toggle class( ；在 ).toggle class( ；关闭 );日志( 状态:灯:"+设备状态.服务.操作状态.状态)；if(device _ status . services . operation _ status . status = = 0){ device _ status . services . operation _ status . status = 1；日志( 灯的状态:1 );}否则{ device _ status . services . operation _ status . status = 0；日志( 灯的状态:0 );} setData()；}这个函数有两个作用。一个是获取设备的当前状态，因为设备可能没有打开或连接到互联网。另一种是将参数传递给后台，否则getdata无效。最后要澄清的是

Get参数-->:初始化-->:一次setdata-->:循环-->:页面渲染接口操作-->:Setdata -->；延迟阅读。加上后端部分，整个流程图如下。

所以得到前端代码只是一半，后端需要自己实现。

我们不能要求微信服务器实现一个纯静态的文件，所以需要自己实现后台部分，这也是第一节的目的。

html:

@ { Layout = null} lt！DOCTYPE html gt lthtml gt lthead gt ltmeta http -equiv = ；content -Type ；content = 文本/html；charset = ut F-8 ； gt ltmeta id = 视窗 name = 视窗 content = 宽度=设备-宽度，初始-缩放=1.0，最大-缩放=1.0，用户-可缩放= 0 gt lttitle gt我的灯泡

使用系统；使用系统。集合。泛型；使用系统。诊断；使用系统。木卫一；使用系统。Linq使用系统。Net . Http使用系统。Web使用Newtonsoft。Json利用倪秋。Core . Domain.Common使用Senparc。微信；使用Senparc。Weixin .例外；使用SendHelp= Senparc。weixin . common APIs . common jsonsend；命名空间门户。MVC . wx device { public class WxDeviceService:IWxDeviceService {//private readonly icache manager _ cache manager；//public WxDeviceService(icache manager cache manager)//{//_ cache manager = cache manager；//} public token result GetAccessToken(){ var URL = string。格式(WxDeviceConfig。访问令牌Url，WxDeviceConfig。AppId，WxDeviceConfig。app secret)；var res = SendHelp。发送 ltTokenResult gt(null，url，null，CommonJsonSendType。GET)；返回res} public WxResponseData GetDeviceStatus(http request base request){ Stream post data = request。InputStreamStreamReader sRead =新的StreamReader(post data)；string postContent = sRead。ReadToEnd()；如果(！字符串。IsNullOrEmpty(post content)){ Logger。调试(收到的数据:“+后置内容)；}试试{ var data = JsonConvert。反序列化对象 ltWxResponseData gt(后置内容)；data . raw str = post content；伐木工。调试(转换消息状态:“+data . asy _ error _ msg)；返回数据；} catch(异常e) { Logger。调试(信息)；扔；} } public openapi result RequestDeviceStatus(string access token，RequestData data) { var url = string。格式(WxDeviceConfig。GetDeviceStatusUrl，access token)；返回SendHelp。发送 ltOpenApiResult gt(accessToken，url，data)；} public openapi result set device(string access token，RequestData data) { var url = string。格式(WxDeviceConfig。GetDeviceStatusUrl，access token)；返回SendHelp。发送 ltOpenApiResult gt(accessToken，url，data)；} 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。发送 ltOpenIdResult gt(accessToken，url，null，CommonJsonSendType。GET)；返回RES . get OpenID()；} catch(ErrorJsonResultException e){ Logger。调试(信息)；扔；} } } }查看代码

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

private UserWxData getUserWxData(){ var target = _ cache manager。获取 ltUserWxData gt(用户键)？？new UserWxData()；返回目标；}私有字符串userKey { get { var key = Session

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

推荐阅读:

一个轻量级的日期插件，在JS中特别容易使用

以上是微信硬件H5开发的控制灯光的细节。请多关注主机参考其他相关文章！

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

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

本文由主机参考刊发，转载请注明：微信H5硬件开发的控制灯光 https://zhujicankao.com/80888.html