VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

呈现的界面如下:

微信H5硬件开发的控制灯光-主机参考

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

微信H5硬件开发的控制灯光-主机参考

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 -->;延迟阅读。加上后端部分,整个流程图如下。

微信H5硬件开发的控制灯光-主机参考

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

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

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硬件开发的控制灯光 https://zhujicankao.com/80888.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信H5硬件开发的控制灯光
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!