本文共 967 字，大约阅读时间需要 3 分钟。

前言

在上一节中，我们通过简单的数据绑定方式实现了在WXML页面中显示阿里云连接状态和订阅Topic是否成功。现在，我们将在此基础上学习小程序的条件渲染功能，具体来说，就是在按钮下方显示一个成功图标，只有当连接服务器并成功订阅Topic时才显示。

一、基础知识

微信小程序的条件渲染主要通过wx:if来实现。它用于判断是否需要渲染某个代码块，具体用法如下：

(1) wx:if的基本用法

通过在框架标签中添加wx:if="{ }"来实现条件判断。满足条件的代码块才会被渲染。例如：

   
        数据太大
   

(2) 异常处理

对于不满足条件的代码块，可以使用wx:elif或wx:else进行处理。例如，可以根据num的不同取值范围显示不同的信息：

   
    数据太大
   
   
    数据太小
   
   
    数据正常
   

(3) 判断多个标签

如果需要一次性判断多个组件，可以将多个组件包装在一个标签中，并在包装标签中使用wx:if。例如：

       
    
     数据1
        
    
     数据2
    
   

二、实例

在上一节的基础上，我们将修改index.wxml文件，命名为06-condition_render。修改后的index.wxml内容如下：

       
    
    
    
             服务器状态: 
     {status_server}    
        
    
    
    
             订阅状态: 
     {status_topic}    
        
    
    
    连接服务器    
    
    
            
         
    
   

需要注意的是，"已订阅"字符串需要进行转义处理，否则会导致程序报错。

三、执行效果

保存后，小程序界面会自动刷新，满足条件的代码块会被渲染显示。例如，点击连接服务器按钮后，如果状态显示为已订阅，页面会显示成功图标。

四、结语

如在使用过程中遇到任何问题，请及时加QQ群交流。

• QQ交流群: 906015840 (备注：物联网项目交流)
• 源码获取: 扫描下方二维码，关注公众号，回复wechat即可。

一叶孤沙出品：一沙一世界，一叶一菩提

转载地址：http://tohtz.baihongyu.com/