微信小程序实现lot开发04 条件渲染与列表渲染

微信小程序实现lot开发04 条件渲染与列表渲染

我的网络继电器设备到了，今天下午也是很开心的测试了一波，很有意思，通过网络连接去阿里云的服务器，通过服务器实现对网段中的硬件发送控制信息以及收取状态反馈信息，可以发现基于mqtt协议，UDP协议里的网络继电器设备在连接网线之后不断的发包和收包，以至于它的工作灯一直闪烁。

那么我也不能闲着，抓紧学习了小程序基础的最后一部分内容，条件渲染和列表渲染。

不多说，直接挂代码：

wxml

<!-- 条件渲染 -->
<view><button bindtap="wxif" type="primary">点击显示图片</button><!-- 因为整数可以分为取余2为0和不为0的两种，所以可以由它作为开关条件显示某一块view的渲染，相当于vue里的V-if --><view wx:if="{{sign % 2 == 0? true: false}}"><image src="{{image}}"></image></view>
<!-- block块级容器不作为组件，只是一个包裹组件的容器 -->
<!-- wx:if采取动态创建和移除元素的方式达到显示与隐藏的效果，而hidden则是单纯的进行样式的更改，从CPU的占用率上来看。使用hidden条件渲染方式比较好！但是如果控制的条件比较多且复杂的话，wx:if会好很多 --><block wx:if="{{sign % 2 != 0?true : false}}"><!-- <view hidden="false">woshikuaijiyuansudeziming</view> --><view hidden="{{sign % 2 !=0?false : true}}">woyeshikuaijiyuansudeziming</view></block>
</view>
<!-- 列表渲染 -->
<view><view wx:for="{{array}}"><!-- index是索引，item是循环的子项元素 -->第{{index}}部 : {{item}}</view><view>~~~~~~~~~~~</view><!-- 这个是渲染对象的json数据时用key指定增强渲染的性能 --><view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
</view>

js

Page({/*** 页面的初始数据*/data: {sign: 1,image: '.jpg',array:["西游记","水浒传","红楼梦","三国演义"],userList:[{id: 1,name: 'huang'},{id: 2,name: 'li'},{id: 3,name: 'zhao'}]},wxif(e){this.setData({sign: this.data.sign + 1})}
})

效果展示图：

关于这里面的原理，在代码的注释里或多或少也给大家讲到了，我本人是主java后端开发的，现在由于工作原因需要学习小程序与lot开发，但是我不会忘记我是一个java程序员的，过两天我会出一些java高级结合虚拟机的理解性总结，以此证明我还是一个铁骨铮铮的java程序员。

 溜了溜了，兄弟们，明天带你们操作阿里云lot接口连接！