更多开源内容请访问：开源基础软件社区https://ost.51cto。com这个帖子会实现，网络配置完成后，会跳转到自定义的ui。1.摆脱束缚，自定义设备UI1。了解OneHop模板第一天，在使用OneHop模板新建的项目中，可以看到在netconfig页面完成网络配置后，会跳转到control模块，其中有session_id、product_id、product_name，如下图所示：控制模块主要做了两件事：①定义控件ui。②处理设备消息。UI是基于已有的控件、弹窗等设计的，而不是原有的JS元素；alife-view目录下提供dialog和control容器，开发者需要在src-main-rawfile目录下声明和使用，如下所示：├─control│└─alife-view//该目录不需要待修改│├─control//控件容器│├─display//信息显示控件│├─enum//枚举控件││├─increasedecrease//加法器控件│├─item//显示子元素││├─multifunction//多功能控件│├─progress//进度条控件││└─reversal//切换控件│├─customdisplay//自定义显示区域│├─dialog//弹窗容器││├─dialogbox││├─enumlist//枚举弹窗││├─info//信息显示弹窗││├─picker//选择器弹窗││└─radiolist//单选弹窗│├─observed│└─utils└─src└─main├─java//这个目录的内容可以在类定义下面看到├─js│└─default│├─common//这个目录包含本地资源文件，主要用于disp放置图标资源││└─FAN││ic_on.png││ic_off.png││...│└─pages│└─index│index.js//启动js└─resources└─rawfile├─FANFAN_en.json//本地英文模板配置文件FAN_zh.json//本地中文模板配置文件不是很灵活，如果我们想使用类web范式来自定义UI？当然后面看2.删除控件模块，在工程目录下选择control，右键卸载，然后记得直接在文件目录下删除控件文件夹；同时，在运行调试过程中拆除控制模块。如下图所示：3、在Entry模块的页面下新建一个jscontrol。为了方便上手，使用低代码的方式新建一个页面，稍后再转成html文件。新页面命名为jscontrol，控制ui和数据处理都在这个页面完成，也就是网络配置完成后跳转到这个页面。具体操作如下：pages目录下多了一个jscontrol页面，就是我们想要的。您将获得一个HelloWorld页面。摆脱模板提供的容器限制，给你一张空白的画布，你可以随心所欲地施展才华。4.自定义粉丝UI低代码开发UI相对简单。对于这篇文章，我将在页面上放置一个风扇、一行智能风扇文本和一个开关。请记住将ui更改为列布局。操作如下：这是最简洁的页面，开关用于控制设备端，下期实现。为了写出更丰富的ui，还可以转成hml文件（不可逆操作）。操作如下：转换后会得到jscontrol页面对应的css和hml文件。记住红圈绑定的函数，会用来发送消息控制风扇开关。这里发现一个bug，低代码开发ui，switch绑定change函数后，在js中不会响应，转成html文件后，发现change关键字前没有加@符号，这应该是ui编辑器的错误。5、设置jscontrol为跳转目标页面，返回netconfis.js的goToControl()函数，注释或删除原有能力代码，新增页面路由（需要在js文件中引入：importrouterfrom'@system.router'),操作如下：网络配置完成后，会跳转到我们的jscontrol页面。小结在本节中，我们将去掉模板中复杂的控件模块，新建一个控件ui。不懂java也不用担心touch的实现。这个帖子适合我这种APP开发小白；另外可以丰富风扇的ui，比如增加一个滑块组件实现风扇的不同转速等。为了突出帖子的核心，力求简洁。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
